Can I replace the sale label with a discount percentage on the Dawn theme?

Store Design
1

Hello,

I use DAWN theme and I want to ask you can I change the sale label with the with label that showing the percentage of the sale?

Hope you can help me?

2

Hello,

If you want to show the sale in percentage on products listing page then you can use the code below in file “product-card.liquid” under snippets :


          {%- if product_card_product.available == false -%}
          {{ 'products.product.sold_out' | t }}
          {%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%}
          
            {% comment %}{{ 'products.product.on_sale' | t }}{% endcomment %}
            {% if product_card_product.compare_at_price_max > product_card_product.price %}
            {{ product_card_product.compare_at_price_max | minus: product_card_product.price | times: 100.0 | divided_by: product_card_product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% off
            {% endif %}
          
          {%- endif -%}

and

if you want to show the sale in percentage on product detail page then you need to add this code in “price.liquid” under snippets:


      {%- if product.available == false -%}
      {{ 'products.product.sold_out' | t }}
      {%- elsif product.compare_at_price > product.price and product.available -%}
      
        {% comment %}{{ 'products.product.on_sale' | t }}{% endcomment %}
        {% if product.compare_at_price_max > product.price %}
        {{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% off
        {% endif %}
      
      {%- endif -%}

Thank you.

3

Thank you for sharing this info.

Do you know if there’s a code to change “Sale” with “Save ”?

4

Is there an updated version of this? Because I just checked the code, and there is no “product-card.liquid” under snippets in my Dawn theme. Thank you!

5

@adventurebook do you want to change sale to % in your theme?

6

You can refer to this article to do that.

7

Hello, @hristijan_hrive

1. Go to Online Store → Theme → Edit code.
2. Open your card-product.liquid. It will likely be in the Snippets folder.

Now you will find the section of the code that generates the “Sale” badge and replace it with code that calculates and displays the percentage.

Search for the word “sale” or look for a line of code that looks similar to this:

<span class="badge badge--on-sale">{{ 'products.product.on_sale' | t }}</span>

replace it with the following code snippet:

{%- if product.compare_at_price > product.price -%}
  <span class="badge badge--on-sale">
    -{{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round }}%
  </span>
{%- endif -%}

Thank You!

8

Yes, please. And if there’s a way to change the color of the label, that would be nice as well. Thank you.

9

@adventurebook it will need code editing, are you familiar with the coding? If no then I can do it for you, I will need Collab code to send access request

10

Thank you, that worked!

11

You are very welcome!

12

I do have another question. The 3 bundles below should display as 25% off, but when I view them on my website, it shows that it’s 24% off. Is this a glitch caused by the HTML or the third-party app I’m using (Revy)?
https://www.theadventurebook.nl/products/the-adventure-book-printables-bundle?revy-bundle-test=t
https://www.theadventurebook.nl/products/the-adventure-book-continents-bundle-1?revy-bundle-test=t
https://www.theadventurebook.nl/products/the-adventure-book-stationery-bundle?revy-bundle-test=t

13

@adventurebook HTML can not calculate the the % sale, so it must be the code in theme or the app you are using