Percentage pill on products instead of sale pill

[faisalyameen96]

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/

[Raj-webdesigner]

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

[faisalyameen96]

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

[Raj-webdesigner]

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

before

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>

[faisalyameen96]

Line 93 code does not match

[Raj-webdesigner]

Okay Ctrl + F And Type

badge

See  This Code 

After Replace 

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

[faisalyameen96]

Screenshot is not visible

[Raj-webdesigner]

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>

[faisalyameen96]

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? 

[Raj-webdesigner]

you Remove This Screenshote 36% Value remove Right?

https://prnt.sc/a0b554DjZKjl

[faisalyameen96]

Yes

[Raj-webdesigner · 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
 

[faisalyameen96]

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