Shopify themes, liquid, logos, and UX
Currently works for Dawn v10
I know few peopled have been looking for this solution for awhile. I know I have. Even though, this won't automatically terminate the sale but it is a solution that works.
First step is to create Metafield Integer called Sale.Discount under Products. Make sure it's exposed to Storefront.
Then Look for this bit of code in Price.Liquid
{%- comment -%} No Compare Price
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 -%}
And Copy this code below
{%- comment -%} No Compare Price {%- endcomment -%}
<div class="price__regular">
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
<span class="price-item price-item--regular">
{{ money_price }}
</span>
</div>
{%- comment -%} With Compare Price {%- endcomment -%}
<div class="price__sale">
{%- unless product.price_varies == false and product.compare_at_price_varies %}
{%- comment -%} This IF/ELSEIF checks if product has 'Sale' TAG. If it does, it generates promo price. {%- endcomment -%}
{% if product.tags contains 'Sale' %}
<span class="price__sale">
{%- comment -%} This code will use metafield discount amount to calculate the new price. {%- endcomment -%}
{% assign discount = product.metafields.sale.discount | times: product.price | divided_by: 100 %} {% assign discountedPrice = product.price | minus: discount %}
Sale Price: {{ discountedPrice | money }}<br>
</span>
{% else %}{%- comment -%} This is the Original code for Compare Price {%- endcomment -%}
<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>
{% endif %}
{%- 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">
{%- comment -%} This bit of code check if item is on sale, if not, it will strike it out. Similar to how original code did to Compare price {%- endcomment -%}
{% if product.tags contains 'Sale' %}
<s class="price-item price-item--regular">Price:{{ money_price }} </s>
{% else %}
{{ money_price }}
{% endif %}
</span>
</div>
to just above this line
<small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
Then change sale badge code
{%- if show_badges -%}
to
{%- if product.tags contains 'Sale' and show_badges -%}
This won't be suitable for people with Buy 1, get 1 % OFF. Price.Liquid controls collection pages and Product pages. But you can still use it you add Promotion details. Just add separate metafield to Main-Product to something like
{{ product.metafields.sale.details }}
If anyone wants to tip me for this, just message me.
I've tried your code but seem like it's not working. I put "Sale" tag on product as well as start discount campaign. Nothing change on my collection. Could you help please?
You need the metafield as well.
product.metafields.sale.discount
Call it product.discount and only numbers. That's where magic actually happens.
Thanks for the great information. I'm doing it the way you suggested, but I'm not sure how to modify the metafields on the product page.
"Just add separate metafield to Main-Product to something like "
Can you explain it in detail for a beginner?
You need to create metafield in store settings>Custom Data. Choose the Product category. Name it 'sale. Discount'. Then in the product pages in admin, add percentage number (without % sign).
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024