Shopify Horizon: Show “From” Price on Collection Cards Without Editing price.liquid

If your Shopify Horizon collection card shows $29.00 for a product that has variants up to $49.00 Customers may not realize the product has a price range.

That is where a “From” price helps.

Instead of showing only the lowest product price, you can show:

From $29.00

This makes your collection cards clearer, especially when products have variants with different prices.

In this guide, you’ll learn how to show the “From” price on Shopify Horizon collection cards using Custom Liquid. closest.product, price_varies, and price_min without editing the global price.liquid snippet.

                                            Contact Us for Any Shopify Help 

{% assign card_product = closest.product %}

{% if card_product != blank %}
  {% if card_product.price_varies %}
    <span class="eh-price eh-price--from">
      From {{ card_product.price_min | money }}
    </span>
  {% else %}
    <span class="eh-price">
      {{ card_product.price | money }}
    </span>
  {% endif %}
{% endif %}

Why Add “From” Price to Shopify Horizon Collection Cards?

Shopify products can have multiple variants. Each variant can have a different price.

For example:

On the product page, customers can usually select a variant and see the correct price. But on a collection page, the product card has limited space.

If the product card only shows:

$29.00

Customers may not understand that the product has higher-priced variants.

A clearer collection card would show:

From $29.00

This helps customers understand that the product starts at that price.

Should You Edit price.liquid?

Usually, no.

Many Shopify tutorials suggest editing the global price snippet, often called:

snippets/price.liquid

But this file may control price display in many parts of your theme.

Editing it can affect:

• Product pages
• Collection cards
• Featured product sections
• Recommended product sections
• Search result cards
• Related product blocks
• Quick add cards
• Upsell sections

That can create unexpected layout or pricing display issues.

For this specific use case, the safer approach is to add a Custom Liquid block inside the Shopify Horizon product card and only change the price display where you need it.

This lets you update collection card pricing without changing price display across your entire store.

Before You Start

Before editing your Shopify Horizon theme, do these three things:

1. Duplicate your theme. Do not test code directly on your live theme first.
2. Find a product with different variant prices. Use a real product where one variant is cheaper and another variant is more expensive.
3. Check desktop and mobile preview. Product card layouts often look different on mobile screens.

How to Add “From” Price in Shopify Horizon Product Cards

The exact layout may vary depending on your Horizon setup, but the general process is:

1. Go to Shopify Admin.
2. Open Online Store.
3. Click Themes.
4. Find your Horizon theme.
5. Click Customize.
6. Open a Collection template.
7. Select the Product grid or Product card area.
8. Find the default price block.
9. Hide or remove the default price block if possible.
10. Add a Custom Liquid block inside the product card.
11. Paste the Liquid code.
12. Save and preview your collection page.

The goal is to place your custom price inside the collection product card, not inside the global product page template.

Recommended Liquid Code

Paste this code inside the Custom Liquid block:

{% assign card_product = closest.product %}

{% if card_product != blank %}
  {% if card_product.price_varies %}
    <span class="eh-price eh-price--from">
      From {{ card_product.price_min | money }}
    </span>
  {% else %}
    <span class="eh-price">
      {{ card_product.price | money }}
    </span>
  {% endif %}
{% endif %}

What This Code Does

This line gets the current product from the Horizon product card context:

{% assign card_product = closest.product %}

This checks whether the product object exists:

{% if card_product != blank %}

This checks whether the product has variants with different prices:

{% if card_product.price_varies %}

This shows the lowest variant price with the word “From”:

From {{ card_product.price_min | money }}

This shows the regular product price when all variants have the same price:

{{ card_product.price | money }}

The money filter formats the price using your store’s currency format.

Alternative: Use “Starting at” Instead of “From”

Some stores prefer “Starting at” because it is clearer for customers.

To use that wording, replace this line:

From {{ card_product.price_min | money }}

with this:

Starting at {{ card_product.price_min | money }}

Use “From” if you want a short and clean product card.

Use “Starting at” if your customers need clearer pricing language.

Add CSS to Style the Price

You can add this optional CSS to make the custom price match your product card design:

.eh-price {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.eh-price--from {
  opacity: 0.9;
}

If you do not want to add CSS, you can still use the Liquid code. Your theme’s default styling may already make the price look fine.

How to Avoid Duplicate Prices

After adding the Custom Liquid block, you may see two prices on the product card.

Example:

$29.00
From $29.00

This usually means the default product card price block is still active.

To fix it:

1. Open the collection template in the theme editor.
2. Select the product card area.
3. Find the default price block.
4. Hide or remove the default price block.
5. Keep only your Custom Liquid price block.
6. Save and preview again.

Check both desktop and mobile after making this change.

Common Problems and Fixes

Should Every Product Show “From” Price?

No.

You should only show “From” when a product has different variant prices.

That is why this condition is important:

{% if card_product.price_varies %}

It prevents your store from showing “From” on products where all variants have the same price.

This keeps your pricing clear and honest.

Testing Checklist Before Making It Live

Before making this change live, test it on:

• Product with same-price variants
• Product with different price variants
• Product with sale price
• Product with a compare-at price
• Sold-out product
• Collection page
• Featured collection section
• Search results page
• Mobile product card
• Desktop product card

Also, check whether the default price block is hidden, so the price does not appear twice.

When You May Need a Shopify Developer

This Custom Liquid method works for many stores, but some setups need more careful customization.

You may need a Shopify developer if:

• Your product cards use custom swatches
• You have sale prices and compare-at prices
• You use quick add buttons
• Your theme has app-generated product cards
• You need a different logic by collection
• You sell B2B or wholesale products
• You need customer-tag-based pricing
• You want “From” pricing with sale badges
• You need the same logic across multiple templates
• Your Horizon theme has already been heavily customized

For example, an advanced product card may need to show:

From $29.00
Compare at $39.00
Save 25%

That requires more careful Liquid logic so your price, sale badge, and compare-at price stay accurate.

Recommended Final Result

Before:

$29.00

After:

From $29.00

For products with only one price, the card will still show:

$29.00

This gives customers a clearer pricing expectation before they open the product page.

Need Help Customizing Shopify Horizon?

FAQs

Can I show the “From” price in Shopify Horizon without an app?

Yes. You can show “From” price in Shopify Horizon without an app by using a Custom Liquid block inside the product card and outputting the lowest variant price with price_min.

Should I edit price.liquid for this change?

Not as the first option. Editing price.liquid can affect price display across product pages, collection cards, featured products, recommended products, and other theme sections. A product-card-level Custom Liquid block is usually safer.

Why is product.price not working in my Horizon Custom Liquid block?

In some Shopify Horizon product card contexts, the product object may not be available as product. You may need to access the current product through closest.product.

Can I show “Starting at” instead of “From”?

Yes. You can replace the word “From” with “Starting at” in the Liquid code.

Starting at {{ card_product.price_min | money }}

Will this affect my product page price?

No, not if you add the code only inside the collection product card Custom Liquid block. It may affect other areas only if you edit a global price snippet, such as price.liquid.

Why is the price showing twice?

The default product card price block is probably still active. Hide or remove the default price block and keep only your Custom Liquid price block.

Does this work for products with the same price for all variants?

Yes. The code checks price_varies. If all variants have the same price, it shows the regular product price instead of adding “From”.

Can EcomHeroes do this for my Shopify store?

Yes. EcomHeroes can customize Shopify Horizon product cards, price displays, badges, swatches, collection pages, and product page layouts.