FROM CACHE - en_header

"Dawn" theme , switch sale tag to percentage

simoXzaki
New Member
3 0 0

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

Replies 12 (12)
Guleria
Shopify Partner
2128 448 648

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Try GEMPAGES a great app with drag and drop features.
bsp_dev
New Member
1 0 0

Hello @Guleria,

What is the file name to add your code?

Thanks

prashastpittie
New Member
1 0 0

Hi Where do we add this code exactly?

ksilvet
New Member
1 0 0

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

Guleria
Shopify Partner
2128 448 648

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.

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Try GEMPAGES a great app with drag and drop features.
GatesGems
Tourist
9 0 3

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
Shopify Partner
2128 448 648

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Try GEMPAGES a great app with drag and drop features.
GatesGems
Tourist
9 0 3

@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?

 

GatesGems_0-1637945481759.png

 

Guleria
Shopify Partner
2128 448 648

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Try GEMPAGES a great app with drag and drop features.
GatesGems
Tourist
9 0 3

@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!

 

GatesGems_0-1637946451005.png

 

DP949
New Member
2 0 1

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
Excursionist
28 0 16

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! 🙂