Collections: Change price color
Note:
Groupthought does not provide any warranty or further support for this code. Use this code at your own risk. The code provided below is only a suggestion. You are responsible for any and all code customizations made to your theme. Please work with a developer or Shopify Expert to ensure proper customization. This code may not work with all versions of of Pipeline or with other code customizations and apps you may have installed. We strongly recommend that you make duplicate of your theme before adding or changing any code in your theme.
This tutorial is intended for use with the Pipeline theme.
Pipeline uses the Accent color choice from your Theme settings for the collection product price color:
Simply change that color setting to modify the price color on product pages.
If you'd like to keep the Accent color setting and override the product price color, here are some options you can control in code:
Code options to change:
- 1
-
Sale price
/* -- code to change collection sale price -- */
.price_wrapper span.price.on-sale {color: #cc0000;}
/* - end - */
This example uses #cc0000; which is a red color while the Accent color is unchanged:
- 2
-
Original price - When on sale
/* -- code to change collection compare at price -- */
.price_wrapper span.compare-at {color: #656565;}
/* - end - */
This example uses #656565; which is a grey color while the Link color is unchanged:
- 3
-
Regular price - Not on sale
/* -- code to collection regular price when not on sale -- */
.price_wrapper span.price {color: #135e90;}
/* - end - */
This example uses #135e90; which is a blue color while the Body text color is unchanged.
Colors
hex color code references:
http://www.colorhexa.com/web-safe-colors
https://picular.co/
Where do I add the code?
Use this link to learn where exactly to add this code snippet: