Change "From" Price to a Range

Store Design
, , ,
1

Looking to change the From price in the collection, to a range in Symmetry Theme, this is the place I need to change it, just not sure what to change it to:

  <div class="price__default">
    {%- if product.price_varies -%}
      {%- if for_variant_picker == false -%}
        <span class="price__from">{{ 'products.product.from' | t }}</span>
      {%- elsif for_variant_picker and current_variant == false -%}
        <span class="price__from">{{ 'products.product.from' | t }}</span>
      {%- endif -%}
    {%- endif %}
2

Hi @chels_grove ,

I think the range need to modify the code to calculate and display the minimum and maximum prices of the product variants.

You need to Replace the current code snippet by this way:


  {%- if product.price_varies -%}
    {%- assign min_price = product.price_min | money %}
    {%- assign max_price = product.price_max | money %}
    {%- if for_variant_picker == false -%}
      
        {{ min_price }} - {{ max_price }}
      
    {%- elsif for_variant_picker and current_variant == false -%}
      
        {{ min_price }} - {{ max_price }}
      
    {%- endif -%}
  {%- endif %}

The {{ min_price }} - {{ max_price }} line displays the price range.

After making these changes, the product’s price will display as a range (e.g., “$10.00 - $20.00”) instead of just showing “From” a certain price.

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

3

Thanks @BSSCommerce-B2B - that worked for the collection page great, but then when I go to the product page, no price shows.

4

HI @chels_grove ,

Thank for your feedback!

We’re happy to see that our suggestion helped you solve the issue.

Sr about my little mistake, if you want it worked for the collection page only, you need to add condition for this script like that below:


  {%- if product.price_varies -%}
    {%- if for_variant_picker == false or (for_variant_picker and current_variant == false) -%}
      {%- if template.name == 'collection' -%}
        
          {{ product.price_min | money }} - {{ product.price_max | money }}
        
      {%- else -%}
        {{ 'products.product.from' | t }}
      {%- endif -%}
    {%- endif -%}
  {%- endif %}

Condition: (template.name == ‘collection’) checks if the current template is a collection page. If you’re on a collection page, it displays the price range.

On other pages, like the product page, it falls back to the original “From” price or other your pricing logic.

Try this out…

Hope it helps!

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!