To display sale percentages while doing a discount with the compare-at price by using “Display product discounts on all channels”, you would need some custom coding in your theme. Some themes natively support this feature, and this article is for those that do not support it.
Create a snippet in your theme and reuse it across your various templates.
Inserting the initial code snippet
First, navigate to: Sales Channels -> Online store. Then, click the three dots (…) and select Edit code.
It will direct you to an online code editor where you can adjust your current theme’s functionalities. Once there, locate the Snippets in the Explorer on the left-hand side, and right-click to create a New File....
Once you create this new file, paste this snippet:
{%- liquid
# Expecting: item = product or card_product
assign compare_price = item.selected_or_first_available_variant.compare_at_price
assign product_price = item.selected_or_first_available_variant.price
if compare_price > product_price and compare_price > 0
assign diff = compare_price | minus: product_price
assign diff_float = diff | times: 1.0
assign compare_price_float = compare_price | times: 1.0
assign fraction = diff_float | divided_by: compare_price_float
assign percentage = fraction | times: 100
endif
-%}
{%- if percentage -%}
round: 0%
{%- endif -%}Then hit Save.
Configuring product cards
Now, you need to use this snippet in your different templates. For collection and other pages, you can usually find the relevant code in card-product.liquid, which is responsible for product card behaviour. In this file, look for on_sale instances. Once you find it, you can put the snippet to use.
Just paste the following line right after each on_sale instance. There might be several instances, so you should do this for all of them. Once you are done, make sure to hit the Save button.
{% render 'discount-percentage', item: card_product as percentage %}
Configuring product pages
After that, repeat the process for the product pages. You can find the relevant data in price.liquid, which manages the pricing for those pages.
Look for on_sale instances and, once found, paste the new content directly below it. After completing this, click the Save button.
{% render 'discount-percentage', item: product as percentage %}
Once you implement these changes, the sale percentage should be visible on all your store’s sale badges.
This approach is merely for displaying the initially selected variant discounts and might not display the correct percentage if different variants have different discounts.
If you require any further assistance, please contact our team via the support chatbox.