Change Sale Price Color in Horizon Theme

[user4322]

Hello,

there a quite some solutions to change the color when the price is on sale, altough it does seem, all the solutions do not work on the current Horizon Theme.

Is there any solution known?

[Moeed]

Hey @user4322

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[devcoders]

Hi @user4322

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder

[Nordalux]

To do this, you need to make a few code changes.

Change the following lines in snippets/price.liquid.
Line 100:
<span class="price {% if show_compare_price %}sale_price{% endif %}">{{ price | default: '&nbsp;' }}</span>

Line 103:
<span class="price {% if show_compare_price %}sale_price{% endif %}">{{ price | default: '&nbsp;' }}</span>

Then add the following either to the custom CSS or to theme.liquid:

.sale_price {
color: #fffff; //color in HEX or rgb
}

[suyash1]

@user4322 can you please share this page link?

[tim_tairli]

Something like this CSS code:

product-price:has(.compare-at-price) .price {
  color: red;
}

will produce this:

The code can go into “Custom CSS” settings, say, under Theme settings(cog icon).