Displaying percentage price on Top Left (Dawn Theme)

[Regency]

Hello. I want to display my % off only on product page not on collections on the top left above the product regular price

Here’s the example:

Thanks

Regency

[Dan-From-Ryviu]

Hi @Regency

Go to Online Store > Themes > click ‘…’ in the current theme > Edit code > open price.liquid file, find this line of code

{%- unless target == null and placeholder == null -%}

Paste this code below above code

    {%- assign percent = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price | round -%}
    {{ percent }}% off
  

[Regency]

Hi @Dan-From-Ryviu

I wanted to display it only on product page not on collection and its giving an error to me its not displaying the digits Here’s my store link: (https://7c868c-88.myshopify.com/)

[JohnGray33]

Please update the code

{%- if template.name contains 'product' -%}
  {%- unless product.price_varies == false and product.compare_at_price_varies %}
  
    {%- assign percent = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price | round -%}
    {{ percent }}% off
  
    
  {%- endunless -%}
{%- endif -%}

[Dan-From-Ryviu]

Please update previous code to this

{%- if template.name contains 'product' -%}
  {%- unless product.price_varies == false and product.compare_at_price_varies %}
  
    {%- assign percent = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price | round -%}
    {{ percent }}% off
  
    
  {%- endunless -%}
{%- endif -%}

[websensepro]

@Regency , try the below code:

{%- if template.name contains 'product' -%}
  {%- unless product.price_varies == false and product.compare_at_price_varies %}
  
    {%- assign percent = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price | round -%}
    {{ percent }}% off
  
    
  {%- endunless -%}
{%- endif -%}

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[Regency]

Hi @Dan-From-Ryviu

It worked but the sale badge is still visible

Also decrease the %off text size a little bit and make it bold

Thanks

Regency

[websensepro]

@Regency , try the below code:

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[Dan-From-Ryviu]

Try this code.

{%- if template.name contains 'product' -%}
  {%- unless product.price_varies == false and product.compare_at_price_varies %}
  
    {%- assign percent = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price | round -%}
    **{{ percent }}% off**
  
    
  {%- endunless -%}
{%- endif -%}

[Regency]

Hi @websensepro

Can you help me make this %OFF text bold and small in size

Thanks

Regency

[Regency]

Hi @websensepro

The code worked very well but why does it showing % Off to all products even though those products don’t have any compare price

thanks

regency

[Regency]

Hi @Dan-From-Ryviu

Can you help me with this

The regular price products are also having %OFF Text Help me fix it

Thanks

Regency

[magecomp]

Hello @Regency

You should use product label app as well to attract the customers by showing discounts on your products

try this free app https://apps.shopify.com/star-product-labels-badges?

[Regency]

Hey @JohnGray33

Can you help me fix this problem

The %off badge is visible to all products either the product is on sale or not. Please help me display it only on products with sale

Thanks

Regency