Display percentage off instead of sale badge [ Venture Theme ]

alexandris
Shopify Partner
15 2 2

Hello everybody !

I wanted to change my "sale" badge into "percentage" badge on my shopify store using this tutorial.

The problem is that this tutorial  is not working on venture theme, or it simply has a calculation error.

 

10-00-9pqxe-lvk89.jpg

I want to show you how to modify "sale" badge into "percentage" badge on venture teme:

 

1. From your admin, go to ‘Online Store > Actions > Edit Code’.

2. In your ‘Snippets’ folder, select ‘product-card.liquid’ file.

 

 

3. In this file, search for ‘products.product.on_sale’.

 

If you are using a Mac, press Command + F to search or on Windows, press Control + F. 

10-11-947f8-zni2w.jpg 

 

 

4. Replace this:

 

{{ 'products.product.on_sale' | t }}

With:

 

{{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | money_without_currency | replace: '0,', ''| append: "% OFF"}} 

 

 

 

 

Replies 19 (19)
SWSolutions
Trailblazer
203 27 54

Try to using this code-

 

{{ 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'}}% OFF

 

Thanks.

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com
alexandris
Shopify Partner
15 2 2

When i use your code, it shows to me 0%


@SWSolutions wrote:

Try to using this code-

 

{{ 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'}}% OFF

 

Thanks.


 

SWSolutions
Trailblazer
203 27 54

Hi,

Are you add the compare price in your products?

See the video- https://youtu.be/jZJrCfpZgLo

Thanks.

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com
alexandris
Shopify Partner
15 2 2

I already said that this method is not working for me. Did you read my post?

It shows me 0%

 

This code helped me:

 

{{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | money_without_currency | replace: '0,', ''| append: "% OFF"}} 
a_longhurst
Tourist
3 0 2

I am trying to change the sale badge to reflect the amount of money saved. So the product price minus the compare at price. I am currently moving from the supply theme to venture and the supply theme shows a badge like 'Save £8'. I want to carry this across. Can someone help?

 

Many thanks

EXOCYCLES
New Member
4 0 0

hi everyone,

 

I have the debut theme and would also like to include a little badge that says "xx % off" instead of sale.

 

Please could you assist? 

 

Kind regards,

Shakira

gomonke
Shopify Partner
2 0 0

This works for me

 

{% assign result = product.price | times: 1.0 | divided_by: product.compare_at_price%}
{% assign result = 1 | minus: result | times: 100 | ceil %}

erboristeria-do
New Member
9 0 0

@alexandris wrote:

I already said that this method is not working for me. Did you read my post?

It shows me 0%

 

This code helped me:

 

{{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | money_without_currency | replace: '0,', ''| append: "% OFF"}} 


Hi, thank you for your help.

There is an issue when percentage of discount is under 10%

For example you don't see -5% discount but -05% discount.

How to remove 0 in front of first number?

plumastudio
New Member
1 0 0

I use this code

{{ product.price | times: 100 | divided_by: product.compare_at_price | divided_by: 10 | remove: '.0' | append: '%' }}  
Treasurehunter
New Member
2 0 0

None of these codes are working for me in my venture theme. It just keeps showing 0% OFF. 

Might it be possible for me to get in contact with a super shopify expert who can take a look at my shop for a minute?

Best regards

Kristian

LongStroke
New Member
1 0 2

Hello, Treasurehunter

Try this one:

{% if product.compare_at_price > product.price %}
{{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | times: 100 | divided_by: 100 | floor }}% OFF
{% endif %}
petloveRNgifts
New Member
6 0 0

Your theme may already have some of the calculations done in earlier code.  You could try this: 

{{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price }}% OFF

Regards, Jessica
Visit petloveRNgifts.com PRN for your daily dose of tail wagging retail therapy!
muetzenmafia
New Member
1 0 0

Hello,

thank you for your help, this works perfect!

I only wanted to make the "15% OFF" text bould and in a different color - do you know how?

brumisrl
New Member
4 0 0

Hello,

this works for me in the collection page, but not if I use the search bar.

When I search a word appears the preview image of the products the the "on sale" label that at the moment i changed just in "%".

I would like to let appear the percentage there as well.

I can see that label is in Locales>it.json

(trademark theme)

 

Any help?

 

Thanks

Petsclubchile
New Member
1 0 0

This one worked for me in the Debut Theme in the product listing. How do you change the "SALE" Ticket for the "XX%" in the product?

Thank you very much

TableG
New Member
1 0 0

I am using Debut theme.

 

I had to edit a few of the suggestions together as it was displaying on my website as 0.25% instead of 25% OFF. Here is what I used to edit the word 'Sale' on the sales badge to reflect '%OFF'

 

 

I went to 'online store' - 'Action' - 'Edit Code' to the 'Snippets' under snippets I navigated to 'product-price-listing.liquid'

As highlighted. On line 113 it came up as {{ 'products.product.on_sale | t }}

 

Screen Shot 2021-11-24 at 11.50.16 pm.png

I replaced it the full text on line 113 with the text below.

 

{{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | money_without_currency | replace: '0', ''| remove: '0.' | append: "% OFF"}}

 

Screen Shot 2021-11-25 at 12.02.49 am.png

 

This is what it looked like on my website in the end 

 

Screen Shot 2021-11-25 at 12.08.17 am.png

Hope that helps someone!

 

Update! I had to do the same thing in 'product-price.liquid' under line 81 which stated  <span class="price__badge price__badge--sale" aria-hidden="true">

I replaced the text underneath it. As a couple of my products were still showing up with '0.'

🙂

cygniz
Excursionist
24 0 6

This one worked for me. I changed in both product-price-listing. liquid and in product-price.liquid. I'm using debut theme. I used page inspect and made some changes according to my need. 

 

search for 'products.product.on_sale and replaced the whole line

 

Thank you

MuhammadAlie
New Member
1 0 0

Thanks..This work for me (use avone Theme)

mentanovedades
New Member
2 0 0

I have the Drawn theme but when I enter the code the percentage does not appear or it appears 0% how can I fix this?