"Dawn" theme , switch sale tag to percentage

[simoXzaki]

Hello everyone,

I have recently installed the new shopify Dawn theme in my store, i've been trying to change the product "sale" tag to show sale percentage instead...

I did some researches & checked similar requests for other themes, but i couldn't find a solution matching the actual theme code

Any help or suggestions would be much appreciated ! 

Thank you all

[Guleria]

Hello @simoXzaki ,

Use this code in place of 'sale' tag code 

{% 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 %}

Thanks

[bsp_dev]

Hello @Guleria,

What is the file name to add your code?

Thanks

[prashastpittie]

Hi Where do we add this code exactly?

[ksilvet]

Hi @Guleria I can't find 'sale' tag code, where or what I have to look? Please help. Thanks!

[Guleria]

For those to whom this code is not working.

Once please check the comment day I made and check what version of Dawn was available on that day and what version of Dawn theme is available in these days.
If you find difference then maybe there is chance that theme author made a update in this version and the solution I provided is not compatible with new version. So I suggest just take the idea from my solution and implement it in the version you are using.

[GatesGems]

I have this question too. I would like to replace the "Sale" bubble that appears on the bottom-left of the product images in the Dawn theme with "20% off", or the relevant sale percentage. 

@Guleria The code you shared seems promising, but as others have asked, it is not clear which file to add it too nor where to put it. Can you please answer these two questions?

Can anyone else provide guidance on how to display the percent discount in place of the sale icon? This would be both on the "all products" view and on individual product pages, as that is where the "Sale" bubble appears. Thank you!

[Guleria]

Edit file product-card.liquid under snippets 

Here search for this code

<div class="card__badge">
          {%- if product_card_product.available == false -%}
            <span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}" aria-hidden="true">{{ 'products.product.sold_out' | t }}</span>
          {%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%}
            <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
          {%- endif -%}
        </div>

and replace it with this one

<div class="card__badge">
          {%- if product_card_product.available == false -%}
          <span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}" aria-hidden="true">{{ 'products.product.sold_out' | t }}</span>
          {%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%}
          <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}" aria-hidden="true">
            {% 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 %}
          </span>
          {%- endif -%}
        </div>

Thanks

[GatesGems]

@Guleria Thanks for the detailed suggestion! I implemented this, and it did replace the "Sale" bubble with the percent off. However, it also messed up the grid display, instead displaying each product as a bulleted list with varying image sizes (see below). (Note: this image comes from the desktop view, not mobile.) Is there a way to modify the "Sale" bubble without changing anything else on that page?

[Guleria]

I provided the solution after implementing in Dawn version '1.1.0' 
If you are with anther version please just take the logic from the solution I provided and implement it accordingly. 

Thanks

[GatesGems]

@Guleria Thanks for that clarification. I modified the code further and got it to work by removing both instances of the following: " aria-hidden="true"

Could you point out the code file location for the "Sale" icon on the individual product page so that I can implement the new code similarly? Thank you!

[DP949]

Excellent. Thank you. It worked for me in all collections.

Can you also guide where to modify the code for reflecting the % discount in individual product page. It still shows "Sale" & not the % off.

Cheers

[CarlosDeco]

How can I change to the top right corner? I prefer there than the bottom left corner...

And also... I'm my collection I sell product with different sizes so the compare price is the high price with the low price and the discounts appears higher than the real one... 

For example:

Size 21x30 price 15$ - 12,75$ with discount

Size 50x70 price 30$ - 25,5$ with discount

So if I have a 15% discount, the code compares 30$ with 12,75$ and shows 58% off.... And it's incorrect... I want that compares 15$ with 12,75$ and shows 15% off.

I would appreciate your help. Thanks! 🙂

[gr_trading]

Hi @simoXzaki ,

Refer the below code to implement the same on product card file named card-product.liquid for DAWN.

{%- 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 request you to refer the video below.