Strike-through not appearing on sale price

Store Design
, , ,

Topic summary

A user’s sale prices display in grey text without strike-through styling on their Shopify store product pages.

Initial Solutions Provided:

  • Multiple CSS code snippets were offered to add text-decoration: line-through to various price-related classes
  • Suggestions included adding code to theme’s Custom CSS settings or directly to the CSS file (theme.css/base.css)
  • One response recommended verifying that “Compare at Price” is set higher than the sale “Price” in Shopify admin

Follow-up Issue:

  • The original poster confirmed the main product page was fixed, but the strike-through still doesn’t appear in the Quick View modal
  • An additional CSS snippet targeting .price--on-sale .price__sale .price-item--regular was provided to address the Quick View specifically

Status: The discussion appears ongoing, awaiting confirmation whether the Quick View fix resolved the remaining issue.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hello

Currently I cannot see a strike-though on my sales prices. It’s just greyed out. How can I add a strike-though?

link: https://tothestars.media/products/shanty-beanie-burnt-orange

Screenshot 2025-07-03 at 7.28.02 AM.png
Screenshot 2025-07-03 at 7.28.02 AM.png1066×1066 66 KB

1 Like
2

You can fix this with CSS:

.price__sale .price-item--regular {
  text-decoration: line-through;
}

This code can be added to this section “Custom CSS” setting, or, if you want to apply it to all sections, add it to “Theme Settings”=> “Custom CSS”.

3

  • Go to the product in Shopify admin.

  • Set a higher Compare at Price and a lower Price (e.g., Compare at: $30, Price: $20).

  • If no strike-through appears, go to Online Store > Themes > Edit Code.

  • Open your CSS file (theme.css or base.css).

  • Add this at the bottom:

    .compare-price {
    text-decoration: line-through;
    }
    Refresh

4

@JayKay89

Please add the following code at the bottom of your css file.

dd.price__compare {
    text-decoration: line-through;
}

Hope this helps!

5

thanks! Solution worked but I still don’t see a strikethrough on the Quickview. Where can I add the code to change that?

1 Like
6

@JayKay89

Please add the following code at the bottom your css file.

.price--on-sale .price__sale .price-item--regular {
    text-decoration: line-through;
}

Hope this works!