Display prices “From” $ X “to” $ X, instead of just “From”

[MiguelMaya]

https://www.shopify.com/partners/blog/collection-page-price-range

Like what the article points out, I just don’t know where the lines involved need to be added on my code.

Using Dawn 15, website misteri.ca.

We’ll be removing the following lines from the above code example:

{% if compare_at_price > price %}
  {{ compare_at_price | money }}

And replacing them with:

{% if product.price_varies and template == 'collection' %}
  From {{ product.price_min | money }} to {{ product.price_max | money }}

[kaiyaa]

Hello @MiguelMaya 

Compare price will show when you will add it in your products. Currently it's not added in product that's why it's not showing.

[swym]

Hey @MiguelMaya, 

It's good practice to create a copy of your theme and work on that to preview the changes before applying, especially if you are editing the raw code. Alternatively, you can also use the Shopify theme editor’s versions to revert to previous versions, but it is not recommended if you are making multiple changes.

Now, to address your specific question about displaying the price range on your collection pages, you can follow the steps below:

1. Open the code editor, as shown in the screenshot below. 

2. Create a snippet called ‘price-range.liquid’ and add the below code:

{% comment %}
  Renders a list of product's price (regular, sale)

  Accepts:
  - product: {Object} Product Liquid object (optional)
  - use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
  - show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
  - price_class: {String} Adds a price class to the price element (optional)
  - show_compare_at_price: {Boolean} Renders the compare at price if the product matches the condition (optional)

  Usage:
  {% render 'price', product: product %}
{% endcomment %}
{%- liquid
  if use_variant
    assign target = product.selected_or_first_available_variant
  else
    assign target = product
  endif

  assign compare_at_price = target.compare_at_price
  assign price = target.price | default: 1999
  assign price_min = product.price_min
  assign price_max = product.price_max
  assign available = target.available | default: false
  assign money_price = price | money
  assign money_price_min = price_min | money
  assign money_price_max = price_max | money
  if settings.currency_code_enabled
    assign money_price = price | money_with_currency
    assign money_price_min = price_min | money_with_currency
    assign money_price_max = price_max | money_with_currency
  endif

  if target == product and product.price_varies
    assign money_price = 'products.product.price.from_price_html' | t: price: money_price
  endif
-%}

{%- unless target == nil -%}
<div
  class="
    price
    {%- if price_class %} {{ price_class }}{% endif -%}
    {%- if available == false %} price--sold-out{% endif -%}
    {%- if compare_at_price > price and product.quantity_price_breaks_configured? != true %} price--on-sale{% endif -%}
    {%- if compare_at_price > price and product.quantity_price_breaks_configured? %} volume-pricing--sale-badge{% endif -%}
    {%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}
    {%- if show_badges %} price--show-badge{% endif -%}
  "
>
  <div class="price__container">
    {%- comment -%}
      Explanation of description list:
        - div.price__regular: Displayed when there are no variants on sale
        - div.price__sale: Displayed when a variant is a sale
    {%- endcomment -%}
    <div class="price__regular">
      {%- if product.quantity_price_breaks_configured? -%}
        {%- if show_compare_at_price and compare_at_price -%}
          {%- unless product.price_varies == false and product.compare_at_price_varies %}
            <span class="visually-hidden visually-hidden--inline">
              {{- 'products.product.price.regular_price' | t -}}
            </span>
            <span>
              <s class="price-item price-item--regular variant-item__old-price">
                {% if settings.currency_code_enabled %}
                  {{ compare_at_price | money_with_currency }}
                {% else %}
                  {{ compare_at_price | money }}
                {% endif %}
              </s>
            </span>
          {%- endunless -%}
        {%- endif -%}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span class="price-item price-item--regular">
          {{- 'products.product.volume_pricing.price_range' | t: minimum: money_price_min, maximum: money_price_max -}}
        </span>
      {%- else -%}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span class="price-item price-item--regular">
          {%- if product.price_varies -%} {{ price_min | money }} - {{ money_price_max }}{%- else -%}{{ money_price }}{% endif %}
        </span>
      {%- endif -%}
    </div>
    <div class="price__sale">
      {%- unless product.price_varies == false and product.compare_at_price_varies %}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span>
          <s class="price-item price-item--regular">
            {% if settings.currency_code_enabled %}
              {{ compare_at_price | money_with_currency }}
            {% else %}
              {{ compare_at_price | money }}
            {% endif %}
          </s>
        </span>
      {%- endunless -%}
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
      <span class="price-item price-item--sale price-item--last">
        {%- if product.price_varies -%} {{ price_min | money }} - {{ money_price_max }}{%- else -%}{{ money_price }}{% endif %}
      </span>
    </div>
    <small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
      <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
      <span class="price-item price-item--last">
        <span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span>
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
        <span>
          {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
            {{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
        </span>
      </span>
    </small>
  </div>
  {%- if show_badges -%}
    <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      {{ 'products.product.on_sale' | t }}
    </span>

    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>
  {%- endif -%}
</div>
{% endunless %}

3. In the "card-product.liquid" file, search for the string 'price' and replace it with 'price-range' (also including the single quotes) by clicking the "replace all" button. This will update all instances of 'price' to use the new snippet. Refer to the screenshot for more details: 

Done? Now save the file, and try previewing to confirm if the changes work for you.  In the reference above, it looks something like below:

I hope this helps!

Regards,
Abhishek from Swym

[MiguelMaya]

Where exactly on the code should i add the new price-range.liquid you mentioned?

[MiguelMaya]

I’ve added to the “Fragmentos” folder and it worked. I’m so grateful for the help.

Still, I want it to display it like “Desde (from)” minimum “hasta (to)” maximum. Please help me.

[swym · Accepted solution]

Hey @MiguelMaya, 

To display the price range as  "Desde $ 10 - hasta $ 100 COP”, replace the code I shared for the snippet "price-range.liquid" before, with the code below:   

{% comment %}
  Renders a list of product's price (regular, sale)

  Accepts:
  - product: {Object} Product Liquid object (optional)
  - use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
  - show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
  - price_class: {String} Adds a price class to the price element (optional)
  - show_compare_at_price: {Boolean} Renders the compare at price if the product matches the condition (optional)

  Usage:
  {% render 'price', product: product %}
{% endcomment %}
{%- liquid
  if use_variant
    assign target = product.selected_or_first_available_variant
  else
    assign target = product
  endif

  assign compare_at_price = target.compare_at_price
  assign price = target.price | default: 1999
  assign price_min = product.price_min
  assign price_max = product.price_max
  assign available = target.available | default: false
  assign money_price = price | money
  assign money_price_min = price_min | money
  assign money_price_max = price_max | money
  if settings.currency_code_enabled
    assign money_price = price | money_with_currency
    assign money_price_min = price_min | money_with_currency
    assign money_price_max = price_max | money_with_currency
  endif

  if target == product and product.price_varies
    assign money_price = 'products.product.price.from_price_html' | t: price: money_price
  endif
-%}

{%- unless target == nil -%}
<div
  class="
    price
    {%- if price_class %} {{ price_class }}{% endif -%}
    {%- if available == false %} price--sold-out{% endif -%}
    {%- if compare_at_price > price and product.quantity_price_breaks_configured? != true %} price--on-sale{% endif -%}
    {%- if compare_at_price > price and product.quantity_price_breaks_configured? %} volume-pricing--sale-badge{% endif -%}
    {%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}
    {%- if show_badges %} price--show-badge{% endif -%}
  "
>
  <div class="price__container">
    {%- comment -%}
      Explanation of description list:
        - div.price__regular: Displayed when there are no variants on sale
        - div.price__sale: Displayed when a variant is a sale
    {%- endcomment -%}
    <div class="price__regular">
      {%- if product.quantity_price_breaks_configured? -%}
        {%- if show_compare_at_price and compare_at_price -%}
          {%- unless product.price_varies == false and product.compare_at_price_varies %}
            <span class="visually-hidden visually-hidden--inline">
              {{- 'products.product.price.regular_price' | t -}}
            </span>
            <span>
              <s class="price-item price-item--regular variant-item__old-price">
                {% if settings.currency_code_enabled %}
                  {{ compare_at_price | money_with_currency }}
                {% else %}
                  {{ compare_at_price | money }}
                {% endif %}
              </s>
            </span>
          {%- endunless -%}
        {%- endif -%}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span class="price-item price-item--regular">
          {{- 'products.product.volume_pricing.price_range' | t: minimum: money_price_min, maximum: money_price_max -}}
        </span>
      {%- else -%}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span class="price-item price-item--regular">
          {%- if product.price_varies -%} 
            Desde {{ price_min | money }} - hasta {{ money_price_max }}
          {%- else -%}
            {{ money_price }}
          {% endif %}
        </span>
      {%- endif -%}
    </div>
    <div class="price__sale">
      {%- unless product.price_varies == false and product.compare_at_price_varies %}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span>
          <s class="price-item price-item--regular">
            {% if settings.currency_code_enabled %}
              {{ compare_at_price | money_with_currency }}
            {% else %}
              {{ compare_at_price | money }}
            {% endif %}
          </s>
        </span>
      {%- endunless -%}
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
      <span class="price-item price-item--sale price-item--last">
        {%- if product.price_varies -%}
          Desde {{ price_min | money }} - hasta {{ money_price_max }}
        {%- else -%}
          {{ money_price }}
        {% endif %}
      </span>
    </div>
    <small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
      <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
      <span class="price-item price-item--last">
        <span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span>
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
        <span>
          {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
            {{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
        </span>
      </span>
    </small>
  </div>
  {%- if show_badges -%}
    <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      {{ 'products.product.on_sale' | t }}
    </span>

    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>
  {%- endif -%}
</div>
{% endunless %}

Also, if you want to do more formatting with the price, search for the following code:

Desde {{ price_min | money }} - hasta {{ money_price_max }}

This code is responsible for showing the price range. To edit it, you can make changes to the string, such as reordering, removing words like 'Desde', 'hasta', or the '-', adding some space, or changing the words. However, do not change or update "{{ price_min | money }}" or "{{ money_price_max }}", as these are part of the Shopify Liquid code and are responsible for displaying the price. Any changes to these elements can break the functionality.

Please check the screenshot below for reference: 

I hope this will help you in getting the desired layout. 

If my responses helped you, please consider giving them a like (👍) and marking them as accepted solutions if they resolved your issue. Your feedback helps other community members with similar questions.

Thank you!

Regards,
Abhishek from Swym

[MiguelMaya]

You’re the gold standard for Shopify help. Where can i access your services?

[MiguelMaya]

Works perfectly. However that piece of the page can’t be translated with Translate & Adapt app. I need to display “From” “to” in my other markets, just like its displaying “Desde” “hasta” for the Spanish markets. I know this may be more complex.

[swym]

Hey @MiguelMaya, 

The reason the "Desde" and "hasta" strings are not being translated is that they have been added statically using custom code in the snippet. This problem can be fixed by using Shopify locale files. To achieve this, you must manually add the translations for both words to the locales folder, including the translations for all languages used by other markets in your store.

You can read more about it using the below link: https://shopify.dev/docs/storefronts/themes/architecture/locales/storefront-locale-files#reference-s... 

Please note if you are not familiar with liquid code, please consider hiring a Shopify developer who will help you fix the problem.    

Regards, 

Abhishek from Swym

[MiguelMaya]

Thanks, that looks helpful. Please tell me where do i add the translation, what should i write.