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:
Open the code editor, as shown in the screenshot below.
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 -%}
{%- 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 -%}
{%- 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 %}
{{- 'products.product.price.regular_price' | t -}}
<s>
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
{%- endunless -%}
{%- endif -%}
{{ 'products.product.price.regular_price' | t }}
{{- 'products.product.volume_pricing.price_range' | t: minimum: money_price_min, maximum: money_price_max -}}
{%- else -%}
{{ 'products.product.price.regular_price' | t }}
{%- if product.price_varies -%} {{ price_min | money }} - {{ money_price_max }}{%- else -%}{{ money_price }}{% endif %}
{%- endif -%}
{%- unless product.price_varies == false and product.compare_at_price_varies %}
{{ 'products.product.price.regular_price' | t }}
<s>
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
{%- endunless -%}
{{ 'products.product.price.sale_price' | t }}
{%- if product.price_varies -%} {{ price_min | money }} - {{ money_price_max }}{%- else -%}{{ money_price }}{% endif %}
<small>
{{ 'products.product.price.unit_price' | t }}
{{- product.selected_or_first_available_variant.unit_price | money -}}
/
{{ 'accessibility.unit_price_separator' | t }}
{%- 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 }}
</small>
{%- if show_badges -%}
{{ 'products.product.on_sale' | t }}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
{% endunless %}
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:
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 -%}
{%- 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 -%}
{%- 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 %}
{{- 'products.product.price.regular_price' | t -}}
<s>
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
{%- endunless -%}
{%- endif -%}
{{ 'products.product.price.regular_price' | t }}
{{- 'products.product.volume_pricing.price_range' | t: minimum: money_price_min, maximum: money_price_max -}}
{%- else -%}
{{ 'products.product.price.regular_price' | t }}
{%- if product.price_varies -%}
Desde {{ price_min | money }} - hasta {{ money_price_max }}
{%- else -%}
{{ money_price }}
{% endif %}
{%- endif -%}
{%- unless product.price_varies == false and product.compare_at_price_varies %}
{{ 'products.product.price.regular_price' | t }}
<s>
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
{%- endunless -%}
{{ 'products.product.price.sale_price' | t }}
{%- if product.price_varies -%}
Desde {{ price_min | money }} - hasta {{ money_price_max }}
{%- else -%}
{{ money_price }}
{% endif %}
<small>
{{ 'products.product.price.unit_price' | t }}
{{- product.selected_or_first_available_variant.unit_price | money -}}
/
{{ 'accessibility.unit_price_separator' | t }}
{%- 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 }}
</small>
{%- if show_badges -%}
{{ 'products.product.on_sale' | t }}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
{% 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.
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.
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.
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.
) and marking them as accepted solutions if they resolved your issue. Your feedback helps other community members with similar questions.