Personalized checkout and custom promotions with Shopify Scripts
Hi, I am new user to Shopify. I would like to add price range (min - max) to collection page in Debut Theme. Grateful if anyone can help on it. Many thanks!
-product-price.liquid-
{% comment %}
Renders a list of product's price (regular, sale, unit)
Accompanies product forms and meant to be updated dynamically
Accepts:
- variant: {Object} Variant Liquid object (optional)
- product: {Object} Product Liquid object (optional)
- show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)
Usage:
{% include 'product-price', variant: current_variant, product: product %}
{% endcomment %}
{%- liquid
if variant.title
assign compare_at_price = variant.compare_at_price
assign price = variant.price
assign available = variant.available
else
assign compare_at_price = 1999
assign price = 1999
assign available = true
endif
assign money_price = price | money
-%}
<dl class="price
{% if available == false %} price--sold-out {% endif %}
{% if compare_at_price > price %} price--on-sale {% endif %}
{% if variant.unit_price_measurement %} price--unit-available {% endif %}"
data-price
>
{% if show_vendor and product %}
<div class="price__vendor">
<dt>
<span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
</dt>
<dd>
{{ product.vendor }}
</dd>
</div>
{% endif %}
{%- 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
- div.price__unit: Displayed when the first variant has a unit price
- div.price__availability: Displayed when the product is sold out
{%- endcomment -%}
<div class="price__pricing-group">
<div class="price__regular">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--regular" data-regular-price>
{{ money_price }}
</span>
</dd>
</div>
<div class="price__sale">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--sale" data-sale-price>
{{ money_price }}
</span>
</dd>
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s class="price-item price-item--regular" data-regular-price>
{{ compare_at_price | money }}
</s>
</dd>
</div>
<div class="price__badges">
<span class="price__badge price__badge--sale" aria-hidden="true">
<span>{{ 'products.product.on_sale' | t }}</span>
</span>
<span class="price__badge price__badge--sold-out">
<span>{{ 'products.product.sold_out' | t }}</span>
</span>
</div>
</div>
<div class="price__unit">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
</dt>
<dd class="price-unit-price">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span data-unit-price-base-unit>
{%- if variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</dd>
</div>
</dl>
Grateful if anyone can help. Thanks!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024