How to change the colors of the current and old price on the collection page? I’m using the Symmetry theme.
https://tsukiakari-boutique.com/collections/blouse-closure-sale
Thank you in advance!
Topic summary
A user seeks to customize the display colors of current and discounted prices on their collection page using Shopify’s Symmetry theme.
Solutions Provided:
Method 1 (CSS in theme.liquid):
- Navigate to Online Store → Theme → Edit Code
- Locate theme.liquid file
- Insert custom CSS code before the
</head>tag - Target price elements with specific color values
- This solution was confirmed working by the original poster
Method 2 (Alternative CSS approach):
- Access theme code editor via Online Store → Themes → Edit code
- Open Assets/theme.css or Assets/base.css
- Add CSS targeting
.price--highlight(current price) and.price--compare(old price) classes - Customize color values using hex codes
Status: Resolved. The user successfully implemented the first CSS solution and confirmed it worked for their store. Both methods involve adding custom CSS to modify the styling of sale and regular price elements on collection pages.
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the tag
Result:
Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!
Awesome! Thank you!
Hello @Rickyxane
To change the colors of the current and old prices on the collection page in the Symmetry theme, follow these steps:
-
Go to your Shopify admin → Online Store → Themes.
-
Click “Customize” on your live Symmetry theme.
-
In the Theme Editor, navigate to a Collection page preview.
-
On the left sidebar, click “Theme settings” (usually a paintbrush icon).
-
Go to Colors – here, you may find options for “Price” or “Sale price”, depending on your theme version.
If you don’t see those options directly, you can add custom CSS:
-
Go to Online Store → Themes → Click “… > Edit code” on your Symmetry theme.
-
Open the file: Assets/theme.css or Assets/base.css (depending on version).
-
Scroll to the bottom and add this custom code:
/* Change current price color */
.price--highlight {
color: #000000; /* Replace with your desired color */
}
/* Change old price (compare-at price) color */
.price--compare {
color: #999999; /* Replace with your desired color */
}
- Click Save and check your collection page.
Let me know the colors you’d like, and I can provide you with the exact code!