How can I change the display of prices on my collections page?

Store Design
1

Hi everyone.

I’m hoping someone can help me. I’d like to know how to change prices showing on collections page. Currently they are displayed “from” which I feel is misleading to customers. I’d like for prices to be shown either from min to max or just max price of the most expensive variant, which is the whole set.

Link to my site https://acfab.co.nz/collections/frontpage/Bash-plates

Thanks in advance.

Andrei

2

You are using the Venture theme, and this theme template defines what displays when prices for a product varies. To change this, you will have to get your hands dirty with the liquid theme code. I suggest you try the following by duplicating your current theme.

How does it work

The theme has a snippet called product-card.liquid with the following code in it


        {% if product.compare_at_price > product.price %}
          {% comment %}
            Product is on sale
          {% endcomment %}
          {% if product.price_varies %}
            {% assign sale_price = product.price | money_without_trailing_zeros %}
            {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
          {% else %}
            {{ 'products.product.regular_price' | t }}
            ~~{{ product.compare_at_price | money_without_trailing_zeros }}~~

            {{ 'products.product.sale_price' | t }}
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}

        {% else %}
          {% comment %}
            Not on sale, but could still have varying prices
          {% endcomment %}
          {% if product.price_varies %}
            {% assign price = product.price | money_without_trailing_zeros %}
            {{ 'products.product.from_text_html' | t: price: price }}
          {% else %}
            {{ 'products.product.regular_price' | t }}
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}

        {% endif %}
        {%- unless product.price_varies -%}
          {%- if current_variant.unit_price_measurement -%}
            {% include 'product-unit-price', product_variant: current_variant, wrapper_class: "product-card__unit-price" %}
          {%- endif -%}
        {%- endunless -%}

the condition {% if product.price_varies %} in the above has the part you are interested in. It uses the language inputs to product the ‘From’ text in Sale and non sale scenarios, by default, the language input for

‘products.product.on_sale_from_html’ is ‘On sale from {{ price }}’ and for ‘products.product.from_text_html’ is ‘From {{ price }}’. An option would be to try and change the input value in it and change the wordings here and something that I’d encourage you to explore but for simplicity, you could replace with the above with what I have below to display the min-max range


        {% if product.compare_at_price > product.price %}
          {% comment %}
            Product is on sale
          {% endcomment %}
          {% if product.price_varies %}
            {{ 'products.product.regular_price' | t }}
            {{ product.price_min | money_without_trailing_zeros }} - {{ product.price_max | money_without_trailing_zeros }}
          {% else %}
            {{ 'products.product.regular_price' | t }}
            ~~{{ product.compare_at_price | money_without_trailing_zeros }}~~

            {{ 'products.product.sale_price' | t }}
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}

        {% else %}
          {% comment %}
            Not on sale, but could still have varying prices
          {% endcomment %}
          {% if product.price_varies %}
            {{ 'products.product.regular_price' | t }}
            {{ product.price_min | money_without_trailing_zeros }} - {{ product.price_max | money_without_trailing_zeros }}
          {% else %}
            {{ 'products.product.regular_price' | t }}
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}

        {% endif %}
        {%- unless product.price_varies -%}
          {%- if current_variant.unit_price_measurement -%}
            {% include 'product-unit-price', product_variant: current_variant, wrapper_class: "product-card__unit-price" %}
          {%- endif -%}
        {%- endunless -%}

Hope this helps

3

Thanks Bunty. That worked a treat.

Another question though, what would I need to change if I wanted to show only max price?

4

Simply change

{{ 'products.product.regular_price' | t }}
{{ product.price_min | money_without_trailing_zeros }} - {{ product.price_max | money_without_trailing_zeros }}

to

{{ 'products.product.regular_price' | t }}
{{ product.price_max | money_without_trailing_zeros }}

N.B. this occurs twice in my code above (when the item is on sale and when it is not), replace on both

5

All good. I figured it out.

Thank you.