Dawn theme: How to show %-off to product cards in collection overview?

[FriEqv]

Hi, I am using the Dawn theme 9.0 and I have been searching the forum on how to show the customer how much they are saving in %, but all solutions online seems outdated. I would like either the “Rea” (Sale)-badge to show -20%, or have a text below the price like “Save 20%”.

Ideally I would like to add this to both collection pages and product pages.

Do anyone have a solution for this that works with this version of the theme?

Here is the shop URL.

Thank you!

[NomtechSolution]

1. Open the collection-template.liquid file and find the section where the product listings are rendered. This section might be named something like {% for product in collection.products %}.

2. Inside the loop, locate the code responsible for displaying the product price. It might look similar to {{ product.price | money }}.

3. To display the percentage savings, you can calculate it by subtracting the sale price from the regular price, dividing it by the regular price, and multiplying by 100. Here’s an example of how you can implement this calculation:

{% assign savings_percentage = ((product.compare_at_price - product.price) / product.compare_at_price) * 100 %}
{% if savings_percentage > 0 %}
  Save {{ savings_percentage | round }}%
{% endif %}

[suyash1]

@FriEqv - are you familiar with the coding? if yes then you can try solution given by @NomtechSolution , else you will need to get someone who knows how to make code changes

[FriEqv]

I will try this, but I don’t have a file called collection-template.liquid.

Is it under snippets? I have a file called card-collection.liquid there.

[FriEqv]

Im not a pro but usually I can figure it out. But I don’t even find any of those elements he mentioned or variations of it in my code unfortunately so I don’t know where to look.

[suyash1]

@FriEqv - please check if you have code which has name badge… you can search this element in card-collection.liquid file… this will surely be in your product liquid template file

[made4Uo]

Hi @FriEqv

Please follow the instructions below to achieve this

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. For sale badges in collection pages, go to Snippet folder and open the card_product.liquid file
3. Find the all the code below

{{- 'products.product.on_sale' | t -}}

See image for reference

4. Replace all the code with the code below

{% assign saving = card_product.compare_at_price
    | minus: card_product.price
    | times: 100
    | divided_by: card_product.compare_at_price
    %}
    {{ saving | prepend: 'SAVE ' | append: '%' }}

5. Next, for the sale badges in product pages, go to Snippet folder and open the price.liquid file

6. Find the code below

{{ 'products.product.on_sale' | t }}

7. Replace it with the code below

{% assign saving = product.compare_at_price
        | minus: product.price
        | times: 100
        | divided_by: product.compare_at_price
      %}
      {{ saving | prepend: 'SAVE ' | append: '%' }}

See image for reference

Results here:

[gr_trading]

Hi @FriEqv ,

To implement the same kindly use the below card since you have card-collection.liquid file you should find the class named badge and update the code inside the tag with below code.

{%- assign difference = card_product.compare_at_price | minus: card_product.price -%}
{%- assign float_difference = difference | times: 1.0 -%}
{%- assign discount_fraction = float_difference | divided_by: card_product.compare_at_price -%}
{%- assign discount_percentage = discount_fraction | times: 100 | round -%}
{{- discount_percentage }} OFF

To implement the same on product page, kindly refer the below video for class name etc.

Display sale percentage instead of sale badge in Shopify theme | Dawn customization

Hope this will helps…