Price range

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: '&nbsp;' }}</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 :laptop:

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

  1. Go to Online Store > Themes > Customize
  2. Open a Collection page
  3. Click into the Product card block
  4. Remove or hide the existing “Price” block
  5. Add a “Custom Liquid” block in its place
  6. 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 %}

  1. 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:

  1. Go to Online Store > Themes
  2. Click Edit code
  3. On the left side, open the Snippets folder
  4. Find and open price.liquid
  5. Before changing anything, copy the current code and save it in Notepad as a backup
  6. 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 }}&nbsp;</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 }}&nbsp;</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: '&nbsp;' }}
      </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 }}&nbsp;</span>
          <span class="price-item--sale price">
            {% if show_from_price %}
              <span class="price-from-text">From</span>
            {% endif %}
            {{ price | default: '&nbsp;' }}
          </span>
        </span>
        <span class="price-item__group">
          <span class="visually-hidden">{{ 'content.price_regular' | t }}&nbsp;</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 }}&nbsp;</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 }}&nbsp;</span>
          <span class="price-item--sale price">
            {% if show_from_price %}
              <span class="price-from-text">From</span>
            {% endif %}
            {{ price | default: '&nbsp;' }}
          </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;
}
  1. Click Save
  2. 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.

  1. Go to Online Store > Themes > click the three dots (…) next to Horizon > Edit default theme content.
  2. Search for the word From or Varies in the top search bar.
  3. 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 From before the price variable). Click Save.