Im currently using the horizon theme, and all my products have multiple variants but the price just shows the lowest instead of saying “from” or showing the range. How do i fix it?
Hello @omoot1
Go to Online Store → Three dots beside your theme → Edit Code
The find the price.liquid
and the line marked in the screenshot
Replace that line with the line below and it will work
<span class="price">From {{ price_min | default: ' ' }}</span>
Hi @omoot1
Find the file that renders the product price (usually something like snippets/price.liquid or a price-related snippet) and replace the product price output with:
{% if product.price_varies %}
<span class="price">
From {{ product.price_min | money }}
</span>
{% else %}
<span class="price">
{{ product.price | money }}
</span>
{% endif %}
Or, if you want to display the full price range:
{% if product.price_varies %}
<span class="price">
{{ product.price_min | money }} - {{ product.price_max | money }}
</span>
{% else %}
<span class="price">
{{ product.price | money }}
</span>
{% endif %}
Best regards,
Devcoder ![]()
Hey @omoot1 — great question! The Horizon theme shows only the lowest variant price by default, but you can fix this without touching price.liquid (which affects your whole store).
The safest fix: Custom Liquid block
- Go to Online Store > Themes > Customize
- Open a Collection page
- Click into the Product card block
- Remove or hide the existing “Price” block
- Add a “Custom Liquid” block in its place
- Paste in this code:
{% assign card_product = closest.product %}
{% if card_product != blank %}
{% if card_product.price_varies %}
<span>From {{ card_product.price_min | money }}</span>
{% else %}
<span>{{ card_product.price | money }}</span>
{% endif %}
{% endif %}
- Save and preview your collection page
Why closest.product and not just product?
In Horizon’s product card context, product isn’t always available — closest.product is the correct way to reference the card’s product object.
Price showing twice?
That means the original Price block is still active. Go back and remove it, keeping only your Custom Liquid block.
“From” vs “Starting at”
If you prefer different wording, just swap From for Starting at in the code — works exactly the same.
The price_varies condition means products where all variants cost the same will still show a plain price like $29.00 — the “From” label only appears when variants actually differ in price.
Hope that helps! Let me know if you run into any issues.
Hi, it has worked! Although, how would i edit the size, colour and font in the future if needed?
I’d only want the word “From” to appear on the homepage\collection pages not the product page, checkout or in cart. Is that possible?
I’d only want the word “From” to appear on the homepage\collection pages not the product page, checkout or in cart. Is that possible? Also, im unable to find that line once in price.liquid in edit code?
Hi @omoot1
Could you please send me a collaborator invite so that I can implement this directly in your theme?
I’m happy that worked for you, let me work on it and test it in my side
Hi @omoot1,
Please try this:
- Go to Online Store > Themes
- Click Edit code
- On the left side, open the Snippets folder
- Find and open price.liquid
- Before changing anything, copy the current code and save it in Notepad as a backup
- Then replace all the code in price.liquid with the full code:
Replace the whole price.liquid with this:
{%- doc -%}
This snippet is used to render a product card.
It is used in the product block, featured product block, and the product card block.
@param {product} product_resource - The product to render
@param {boolean} [show_unit_price] - Whether to show the unit price
@param {boolean} [show_sale_price_first] - Whether to show the sale price first
{%- enddoc -%}
{%- liquid
assign show_unit_price = show_unit_price | default: false
assign show_sale_price_first = show_sale_price_first | default: false
assign selected_variant = product_resource.selected_or_first_available_variant
assign price = selected_variant.price
assign compare_at_price = selected_variant.compare_at_price
assign show_compare_price = false
if compare_at_price > price
assign show_compare_price = true
endif
if product_resource == blank
assign price = 1999
endif
assign has_volume_pricing = null
assign price_min = null
assign price_max = null
assign show_from_price = false
assign is_product_card = false
if template.name != 'product'
assign is_product_card = true
endif
if is_product_card
assign price_min = product_resource.price_min
assign price_max = product_resource.price_max
assign has_volume_pricing = product_resource.quantity_price_breaks_configured? | default: false
if product_resource.price_varies
assign show_from_price = true
assign price = product_resource.price_min
endif
else
if selected_variant.quantity_price_breaks.size > 0
assign has_volume_pricing = true
assign price_min = selected_variant.quantity_price_breaks.last.price
assign price_max = selected_variant.price
endif
endif
assign use_currency = false
if product.handle == product_resource.handle
if settings.currency_code_enabled_product_pages
assign use_currency = true
endif
elsif settings.currency_code_enabled_product_cards
assign use_currency = true
endif
if use_currency
assign price = price | money_with_currency
assign compare_at_price = compare_at_price | money_with_currency
assign price_min = price_min | money_with_currency
assign price_max = price_max | money_with_currency
else
assign price = price | money
assign compare_at_price = compare_at_price | money
assign price_min = price_min | money
assign price_max = price_max | money
endif
-%}
<div ref="priceContainer">
{% if has_volume_pricing %}
{% if show_compare_price %}
<span class="price-item__group">
<span class="visually-hidden">{{ 'content.price_regular' | t }} </span>
<span class="compare-at-price">{{- compare_at_price -}}</span>
</span>
{% endif %}
<span class="price-item__group">
<span class="visually-hidden">{{ 'content.price_range' | t }} </span>
<span class="price">
{% if show_from_price %}
<span class="price-from-text">From</span>
{% endif %}
{{ price_min }} - {{ price_max }}
</span>
</span>
{% else %}
<div
class="
price__regular
{% if show_compare_price %}
price__hidden
{% endif %}
"
>
<span class="price">
{% if show_from_price %}
<span class="price-from-text">From</span>
{% endif %}
{{ price | default: ' ' }}
</span>
</div>
<div
class="
price__sale
{% unless show_compare_price %}
price__hidden
{% endunless %}
"
>
{% if show_sale_price_first %}
<span class="price-item__group">
<span class="visually-hidden">{{ 'content.price_sale' | t }} </span>
<span class="price-item--sale price">
{% if show_from_price %}
<span class="price-from-text">From</span>
{% endif %}
{{ price | default: ' ' }}
</span>
</span>
<span class="price-item__group">
<span class="visually-hidden">{{ 'content.price_regular' | t }} </span>
<span class="price-item--regular compare-at-price">{{- compare_at_price -}}</span>
</span>
{% else %}
<span class="price-item__group">
<span class="visually-hidden">{{ 'content.price_regular' | t }} </span>
<span class="price-item--regular compare-at-price">{{- compare_at_price -}}</span>
</span>
<span class="price-item__group">
<span class="visually-hidden">{{ 'content.price_sale' | t }} </span>
<span class="price-item--sale price">
{% if show_from_price %}
<span class="price-from-text">From</span>
{% endif %}
{{ price | default: ' ' }}
</span>
</span>
{% endif %}
</div>
{% endif %}
{%- if selected_variant.unit_price and show_unit_price %}
{%- liquid
if use_currency
assign unit_price = selected_variant.unit_price | money_with_currency
else
assign unit_price = selected_variant.unit_price | money
endif
-%}
{% render 'unit-price', price: unit_price, measurement: selected_variant.unit_price_measurement %}
{%- endif -%}
</div>
{%- if has_volume_pricing -%}
<small
ref="volumePricingNote"
class="volume-pricing-note"
>
{{- 'content.volume_pricing_available' | t -}}
</small>
{%- endif -%}
Optional CSS for changing size/color later (in base.css):
.price-from-text {
font-size: inherit;
color: inherit;
font-family: inherit;
font-weight: inherit;
margin-right: 4px;
}
- Click Save
- Check the homepage and collection pages
This should make “From” appear only on homepage/collection product cards, not on the product page, cart, or checkout.
If this solves it, please mark this reply as the solution so it can help others too., if not, let me know what is the error and feel free to ask me here or in the chat.
Hi, how would i do so?
Hi @omoot1, let me know if you’re available — I’ll guide you step by step, here in the replies or via chat.
- Go to Online Store > Themes > click the three dots (…) next to Horizon > Edit default theme content.
- Search for the word From or Varies in the top search bar.
- Look under the Products or Pricing section. If your theme natively has a setting for variable prices, make sure the text field is filled in (for example, typing
Frombefore the price variable). Click Save.
