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

[JohnGray33 · Accepted solution]

Please update the code 

{%- if template.name contains 'product' -%}
  {%- unless product.price_varies == false and product.compare_at_price_varies %}
  <div style="color: red;">
    {%- assign percent = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price | round -%}
    {{ percent }}% off
  </div>    
  {%- endunless -%}
{%- endif -%}

[websensepro · Accepted solution]

@Regency , try the below code:

{%- if template.name contains 'product' -%}
  {%- unless product.price_varies == false and product.compare_at_price_varies %}
  <div style="color: red;">
    {%- assign percent = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price | round -%}
    {{ percent }}% off
  </div>    
  {%- endunless -%}
{%- endif -%}

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

Thanks!

[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

  <div style="color: red;">
    {%- assign percent = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price | round -%}
    {{ percent }}% off
  </div>

[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 · Accepted solution]

Please update the code 

{%- if template.name contains 'product' -%}
  {%- unless product.price_varies == false and product.compare_at_price_varies %}
  <div style="color: red;">
    {%- assign percent = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price | round -%}
    {{ percent }}% off
  </div>    
  {%- endunless -%}
{%- endif -%}

[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

[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 %}
  <div style="color: red;">
    {%- assign percent = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price | round -%}
    {{ percent }}% off
  </div>    
  {%- endunless -%}
{%- endif -%}

[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 </head>

<style>
span.badge.price__badge-sale.color-scheme-4 {
    display: none !important;
}
</style>

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

Thanks!

[Dan-From-Ryviu · Accepted solution]

Try this code.

{%- if template.name contains 'product' -%}
  {%- unless product.price_varies == false and product.compare_at_price_varies %}
  <div style="color: red;">
    {%- assign percent = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price | round -%}
    <span><strong>{{ percent }}% off</strong></span>
  </div>    
  {%- endunless -%}
{%- endif -%}

[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

[websensepro · Accepted solution]

@Regency , try the below code:

{%- if template.name contains 'product' -%}
  {%- unless product.price_varies == false and product.compare_at_price_varies %}
  <div style="color: red;">
    {%- assign percent = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price | round -%}
    {{ percent }}% off
  </div>    
  {%- endunless -%}
{%- endif -%}

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

Thanks!

[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

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