Shopify themes, liquid, logos, and UX
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/
Solved! Go to the solution
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
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==>
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.
Contect On My Mail :-Mail@gmail.com
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
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.
Contect On My Mail :-Mail@gmail.com
After changing the code the percentage value is merged with price and is not showing correct discount value.
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>
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.
Contect On My Mail :-Mail@gmail.com
Line 93 code does not match
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>
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.
Contect On My Mail :-Mail@gmail.com
Screenshot is not visible
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.
Contect On My Mail :-Mail@gmail.com
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?
you Remove This Screenshote 36% Value remove Right?
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.
Contect On My Mail :-Mail@gmail.com
Yes
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
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==>
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.
Contect On My Mail :-Mail@gmail.com
Thanks for the help everything seems to be working fine and accordingly.
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025