Supply theme - change sale to strikethrough

Highlighted
Shopify Expert
90 0 28

I've seen some older topics about this, but it seems their solutions don't apply (I assume Supply changed some things so something else is needed now). Anyway, in the Supply theme, if I add a sale price, it comes up as:
$10.00   SAVE $5.00

I want it to look like:
$10.00    $15.00 (where $15.00 is crossed out)

Please let me know what I need to change in the liquid to accomplish this. Thanks!

0 Likes
Highlighted
Shopify Partner
1366 24 246

Your site is under password so I can't really tell much.

You need to find the element that contains the $15.00 text and modify its selector. In CSS just add text-decoration: line-through;

https://sections.design tips, tricks & Shopify sections
0 Likes
Highlighted
Shopify Expert
90 0 28

The site that this is for is http://everything-pet-2.myshopify.com/collections/dogs
I managed to make it show the original price with a strikethrough, but it still says "SAVE", and I can't find where to change that. 

0 Likes
Highlighted
Shopify Partner
1366 24 246

Most likely it is under snippets in product-grid-item.liquid. Look for sale.

https://sections.design tips, tricks & Shopify sections
0 Likes
Highlighted
Shopify Expert
90 0 28

I've already checked product-grid-item.liquid, price-sale.liquid, and more. I can't find Sale anywhere. That's why I need some help from someone who knows the Supply theme.

0 Likes
Highlighted
Shopify Expert
90 0 28

I found it! In en.default.json, it has "Save" in there so now it's showing up correctly. For anyone else who wants to do this in the future, here are the instructions:

In Snippets/price-sale.liquid, change the first line to:
{% capture saved_amount %}{{ compare_price | money }}{% endcapture %}

In Locales/en.default.json, search for
Save {{ saved_amount }} 
Delete Save to make it stop showing up.

In Assets/timber.scss.liquid, add this to the end:
.sale-tag { 
  text-decoration: line-through;
  border:none; }

This fixed it on the Collection page/Related products only. Still working on the Products page.

0 Likes
Highlighted
New Member
1 0 0

Hi guys, is there complete guide to do it. Im bit lost.

Basically, I want to see a crossline to my compared prices instead of box "save xxx". I'm using supply theme.

0 Likes
Highlighted
New Member
2 0 4

There's an option to do it instead of messing with the codes.

You have to change front page, product list page, and your single product page.

 

For your front page prices:

Go to Customize Theme

Then Under the Sections tab, select the collection that your products are in.

then it should have settings - deselect "Show saved prices" and select "Show compared at prices"

 

For your actual product page and category pages(doing 1 product page and 1 category product page will change the rest):

In the theme editor view, click on the link that contains products

and repeat the process above.

 

I hope that helped

Highlighted
New Member
2 0 0

Hi everyone.

I'm still unable to strikeout the Cost Price inside the product page.

Anyone able to help?

 

Thanks

0 Likes
Highlighted
New Member
2 0 4

hi

you do not need to change codes at all to show a strickthrough the compare price

all you have to do is: 

1-click on online store view

2-edit homepage

3-from the homepage drop menu, choose product pages then click on products

now you should have all settings of the product pages 4- check compare at price box and remove show saved amount. 

5- click Save to save the changes.

6- do the same to change settings of collections>>to show the compare price and remove show save amount. 

 

I wish this helps solve your problem.