Solved

Percentage pill on products instead of sale pill

faisalyameen96
Tourist
9 0 1

I am using dawn theme, products carry a pill of sale only i want to add a sale percentage pill on them, i have seen some solutions here but none of them seems to work for my store. Store link https://www.tinytrendz.pk/

Accepted Solution (1)
Raj-webdesigner
Shopify Partner
236 52 53

This is an accepted solution.

1) open Your Store 
see Screenshote:->
https://prnt.sc/D2VewTnAnIxe

2) Open Edit Code

see Screenshote
https://prnt.sc/PnWJ7B0ODXAf

 

3) Search Price

https://prnt.sc/zGCsgnbh2Fyp
 

4) This Code change New Code Like This

ScreenShote
https://prnt.sc/DTpB3V52_bhn

remove this code.

 {% if product.compare_at_price > product.price and product.available %}
    <div class="you-save">
      {% 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'
        -}}
        %
      {%- endif %}
    </div>
  {% else %}
    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>
  {% endif %}

 

Add This Code

{%- if show_badges -%}
    <span class="badge-item-seller color-{{ settings.sale_badge_color_scheme }}">
      {{ 'products.product.on_sale' | t }}
    </span>

    <span class="badge-item-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>
  {%- endif -%}

Like This Screenshote==>

https://prnt.sc/otelQHofGxyN
 

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com

View solution in original post

Replies 12 (12)

Raj-webdesigner
Shopify Partner
236 52 53

Follow My Step 
1) open Your Store 
see Screenshote:->
https://prnt.sc/D2VewTnAnIxe

2) Open Edit Code

see Screenshote
https://prnt.sc/PnWJ7B0ODXAf

 

3) Search Price

https://prnt.sc/zGCsgnbh2Fyp
 

4) This Code change New Code Like This

ScreenShote
https://prnt.sc/DTpB3V52_bhn

 {% if product.compare_at_price > product.price and product.available %}
    <div class="you-save">
      {% 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'
        -}}
        %
      {%- endif %}
    </div>
  {% else %}
    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>
  {% endif %}
If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
faisalyameen96
Tourist
9 0 1

After changing the code the percentage value is merged with price and is not showing correct discount value. 

Raj-webdesigner
Shopify Partner
236 52 53

Go to snippets > card-product.liquid file, in line 93 and change code:

Rajwebdesigner_0-1711948028607.png

 

before

Rajwebdesigner_1-1711948028873.png

 

after

Code:

 

 

{%- assign percent = card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price | round -%}
              <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"> {{ percent }}%</span>

 

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
faisalyameen96
Tourist
9 0 1

Line 93 code does not match

Screenshot (32).png

Raj-webdesigner
Shopify Partner
236 52 53

Okay Ctrl + F And Type

 

badge

 

See  This Code 

Rajwebdesigner_0-1711962165006.png

 

After Replace 

Rajwebdesigner_1-1711962204718.png

 

{%- assign percent = card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price | round -%}
              <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"> {{ percent }}%</span>

 

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
faisalyameen96
Tourist
9 0 1

Screenshot is not visible

Raj-webdesigner
Shopify Partner
236 52 53

See This screenshote Link :-->>

https://prnt.sc/wXhrpNWLUbYa 
change With This Code

{%- assign percent = card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price | round -%}
              <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"> {{ percent }}%</span>
If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
faisalyameen96
Tourist
9 0 1

Pill on the product is showing the accurate value but it is also showing percentage value with price which is not correct, ow can i remove it? Screenshot (33).png

Raj-webdesigner
Shopify Partner
236 52 53

you Remove This Screenshote 36% Value remove Right?

https://prnt.sc/a0b554DjZKjl

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
faisalyameen96
Tourist
9 0 1

Yes

Raj-webdesigner
Shopify Partner
236 52 53

This is an accepted solution.

1) open Your Store 
see Screenshote:->
https://prnt.sc/D2VewTnAnIxe

2) Open Edit Code

see Screenshote
https://prnt.sc/PnWJ7B0ODXAf

 

3) Search Price

https://prnt.sc/zGCsgnbh2Fyp
 

4) This Code change New Code Like This

ScreenShote
https://prnt.sc/DTpB3V52_bhn

remove this code.

 {% if product.compare_at_price > product.price and product.available %}
    <div class="you-save">
      {% 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'
        -}}
        %
      {%- endif %}
    </div>
  {% else %}
    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>
  {% endif %}

 

Add This Code

{%- if show_badges -%}
    <span class="badge-item-seller color-{{ settings.sale_badge_color_scheme }}">
      {{ 'products.product.on_sale' | t }}
    </span>

    <span class="badge-item-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>
  {%- endif -%}

Like This Screenshote==>

https://prnt.sc/otelQHofGxyN
 

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
faisalyameen96
Tourist
9 0 1

Thanks for the help everything seems to be working fine and accordingly.