Remove Strikethrough from original price on product page when red 'compared at' price is showing. brooklyn theme

Highlighted
Shopify Partner
3 0 2

I would like to remove the strikethrough from the original price on the product page Brooklyn Theme. The strikethrough appears when the compared at discounted price is showing.  However I would like the original price to remain valid as I will be editing it to convey a 50% downpayment process.  So it will end up like:

 

$100  Total Price   (with no strikethrough)

$50   Only 50% deposit required today   (in red)  

 

I have the $50 line setup but I'm stumped how to remove the strikethrough and edit the first line $100.  

This is an attempt at a simple workaround to save from overcomplicating the situation with paid apps.  Pay half now,  We send a draft order invoice when the custom item has been approved.  

0 Likes
Highlighted
Shopify Staff
Shopify Staff
23 0 1

Hi Jacob,

Excellent question! I feel you may have already figured this out for yourself, as running through the site listed on your profile, I'm seeing the following:

Which does look quite like what you were looking for! But for the sake of providing the answer here for yourself and any others who might be curious, the solution lies in changing the 'text decoration' within the theme code.

Before you begin this process, make sure you keep your original theme code safe by backing up your current version. Always do this before performing any edits yourself, just on the off-chance that something strange occurs as a result. Best to play it safe!

The location of this aforementioned text decoration prompt may vary from theme to theme, but you will likely find one of the triggers for it within timber.scss.liquid under the Assets section of your theme code. Once in there, search for the term "compare" (for compare price) using either Control+ F on Windows or Command + F on Mac, which should eventually lead you to an area with the following text below:

text-decoration: line-through;

What you'll want to do is replace the line-through; text with none;. It's important that this text is exactly as posted here, semicolons included, so double check you've done so properly before saving. Once this is done, you can save, and the strikethrough should be removed!

Hope that helps, Jacob!

Kind Regards,

Tom | Shopify Guru

Highlighted
New Member
6 0 0

Hi Tom, I'm having this same issue, but using the Debut theme. I have scoured every bit of code I can find that might have the compare price text-decoration code, but I cannot find it anywhere. Any assistance on that theme?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
23 0 1

Hi Trish!

For removing the strikethrough on prices within Debut theme, you could try inserting 

.grid-view-item.product-price--sold-out .product-price__price {
     text-decoration: none;
}

to the bottom of assets/theme.scss.liquid. Just ensure you back up your current version before starting this project, just for safety's sake!

Let me know if that does the trick! :)

Kind Regards,

Tom | Shopify Guru

0 Likes
Highlighted
Excursionist
20 0 7

I tried this, but it did not work.  Any other way?

I would like to keep the Compare at Price, but just remove the strike through effect.

0 Likes
Highlighted
New Member
6 0 0

I'm trying to accomplish this on debut too but this isn't working for me either. Any other ideas?  Thanks!

0 Likes