How to display a price range on the collection page

Supported Versions

The details shared here apply to the most recent versions of our themes. To keep your theme up to date, check out this helpful document.

Thumbnail Product Prices

If you have a product in your shop that has different priced variants, the minimum price is displayed on the Collection page (and anywhere else product thumbnails appear):

However, you can change the price shown to be a price range by making some small modifications to the theme's code. Please note: in order for this customization to work, you will need to disable the currency converter. 

Select your theme:

• Turbo
• Parallax
• Retina
• Mobilia
• Responsive
• Artisan
• Flex

• Turbo

  Step 1: If you wish to change how this price is displayed on your Collection page, go to Admin > Online Store > Themes > Actions > Edit Code > Snippets >"product-info.liquid".

• Parallax

  Step 1: If you wish to change how this price is displayed on your Collection page, go to Admin > Online Store > Themes > Actions > Edit Code > Snippets >"product-thumbnail.liquid".

• Retina

  Step 1: If you wish to change how this price is displayed on your Collection page, go to Admin > Online Store > Themes > Actions > Edit Code > Snippets >"product-thumbnail.liquid".

• Mobilia

  Step 1: If you wish to change how this price is displayed on your Collection page, go to Admin > Online Store > Themes > Actions > Edit Code > Snippets >"product-thumbnail.liquid".

• Responsive

  Step 1: If you wish to change how this price is displayed on your Collection page, go to Admin > Online Store > Themes > Actions > Edit Code > Snippets >"product-thumbnail.liquid".

• Artisan

  Step 1: If you wish to change how this price is displayed on your Collection page, go to Admin > Online Store > Themes > Actions > Edit Code > Snippets >"product-info.liquid".

• Flex

  Step 1: If you wish to change how this price is displayed on your Collection page, you'll need to modify the code in two files.
  
  First, go to Admin > Online Store > Themes > Actions > Edit Code > Snippets >"product-thumbnail__product-info.liquid".
  
  Then, go to Snippets > "product-thumbnail.liquid".

Please note that there are two sets of instructions here: one for more recent versions of our themes and one for older versions. What theme version am I using?

• Older versions
• Newer versions

• For Turbo (versions before 6.0.2), Flex (versions before 2.0.2), Parallax (versions before 3.7.3), Retina (versions before 4.7.1), Responsive (versions before 7.2.1), Mobilia (versions before 6.2.1), and Artisan (versions before 1.3.1), follow these steps:

  Step 2: Locate this snippet of code:

   {% if product.price_varies and product.price_min > 0 %}
   <small><em>{{ 'products.general.from' | t }}</em></small>
   {% endif %}
   {% if product.price_min > 0 %}
   <span class="money">{{ product.price_min | money }}</span>
  

  Step 3: Replace it with this code:

   {% if product.price_min > 0 %}
     {{ product.price_min | money }} {% if product.price_varies %} - {{ product.price_max | money }}{% endif %}
   {% else %}
     {{ settings.free_price_text }} {% if product.price_varies %} - {{ product.price_max | money }}{% endif %}
  

• For Turbo (versions 6.0.2 and up), Flex (versions 2.0.2 and up), Parallax (versions 3.7.3 and up), Retina (versions 4.7.1 and up), Responsive (versions 7.2.1 and up), Mobilia (versions 6.2.1 and up), and Artisan (versions 1.3.1 and up), follow these steps:

  Step 2: Locate this snippet of code: 

  {% if product.price_varies and product.price_min > 0 %}
   <small><em>{{ 'products.general.from_html' | t }}</em></small>
   {% endif %}
   {% if product.price_min > 0 %}
   <span class="money">{% render 'price-element', price: product.price_min %}</span>
   {% else %}
   {{ settings.free_price_text }}
   {% endif %}

  Step 3: Replace it with this code: 

  {% if product.price_min > 0 %}
    <span class="money">
      {% render 'price-element', price: product.price_min %} {% if product.price_varies %} </span> - <span class="money">{% render 'price-element', price: product.price_max %}</span>{% endif %}
    </span>
  {% else %}
   {{ settings.free_price_text }} {% if product.price_varies %} - <span class="money">{% render 'price-element', price: product.price_max %}</span>{% endif %}
  {% endif %}