How to alter price and sales color on Impulse theme?

Topic summary

Users of Shopify’s Impulse theme are seeking to differentiate regular prices from sale prices through color coding—typically wanting regular prices in black and sale prices in red, with strikethrough original prices in grey.

Initial Solution Provided:
A CSS code snippet was shared to add to the theme.scss.liquid file:

  • .grid-product__price { color: #ff0000; }
  • .grid-product__price--original { color: #000; }

Recurring Problem:
Multiple users report this code incorrectly colors ALL prices red, including non-sale items. The desired outcome is:

  • Regular (non-sale) prices: black
  • Original prices (strikethrough): grey
  • Sale prices: red

Refined Solution:
An updated CSS selector was provided:

  • .grid-product__price--original + span + span.money { color: #e23737; }
  • .grid-product__price--original { color: #ccc; } (for grey strikethrough)

Current Status:
The discussion remains ongoing with several users still troubleshooting implementation issues. The helper (KetanKumar) continues requesting site URLs to provide customized solutions, and some users have shared private login details for direct assistance. One user mentions the issue also affects the Flex theme.

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

@KetanKumar I don’t understand why, but the color has changed on mobile:

but look, on dekstop it always appears in black …

1 Like