How can I change old and current price colors on Publisher 13.0.1?

Store Design
, ,

Topic summary

A user wants to change the display colors for old (original) and current (sale) prices in their Shopify store using the Publisher 13.0 theme.

Two solutions are provided:

  1. Theme Settings Method: Navigate to Online Store > Themes > Customize and look for Theme Colors or Typography sections that may include a Sale Price color option.

  2. CSS Code Method (if theme lacks built-in options):

    • Duplicate the theme first as a safety precaution
    • Go to Online Store > Themes > Actions > Edit Code
    • Locate the component-price.css file
    • Add CSS code at the bottom to target sale price elements (.price-item.price-item--sale .price-item--last)
    • Replace “red” with desired color code
    • Save changes

Note: The original post text appears corrupted or reversed in places, but the core guidance focuses on customizing price colors through either theme settings or custom CSS modifications.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hello, how can i put old price to Grey and current price in red?

Vaskogskin.com

2

Using Theme Settings:

Some Shopify themes allow you to customize the color of sale prices directly from the theme settings. Here’s how to check:

  • Go to your Shopify admin panel and navigate to Online Store > Themes.
  • Click on the Actions menu for your current theme and select Customize.
  • Look for a section related to Theme Colors or Typography.

If you find an option for Sale Price, you can change the color to red and the default price color (likely black) will remain unchanged.

Using CSS Code

  1. If your theme doesn’t have built-in options for price colors, you can achieve this with a bit of CSS code. Here’s what to do:
  2. Important: Before making any code edits, it’s recommended to duplicate your theme to avoid affecting your live store. You can learn how to do this here: https://help.shopify.com/en/manual/online-store/themes/managing-themes/duplicating-themes
  3. In your Shopify admin, navigate to Online Store > Themes.
  4. Click on the Actions menu for your theme and select Edit Code.
  5. Search for the file named component-price.css.

Scroll down to the bottom of the file and paste the following code:

span.price-item.price-item--sale.price-item--last {
color: red !important;
}​

Use code with caution.
Replace red with your desired color code (you can find color codes online).
Click Save.
This code will change the color of the discounted price (the one displayed after the strikethrough) to red.