Change Sale Price Color - Product Page & Collection Page - Symmetry Theme

Amanda_Brown1
Excursionist
29 0 4

Trying to figure out how to change the Sale price color to stand out more on the product and collection pages. Red is the obvious choice. We're using Symmetry theme and I was able to locate the product price css for the product pages, but it only changes the price color for every product. I tried adding an IF statement, if the product price was less than product compare at price, but that didn't work either. 

Any suggestions?

Thanks!

0 Likes
Alex135
Astronaut
1889 1 460

You'll need to make a change in the Liquid code.  First you need to find the Liquid code that prints the prices and compared prices.  It might be in collection.liquid.  If not, it will be in one of the snippet files.  Maybe something named product-loop.liquid.  The section of code will look something like:

                  <div class="innerer">
                    <div class="title">{{ product.title }}</div>
                    {% if product.price < product.compare_at_price %}
                        <div class="reducedfrom"><span class="amount">{{ product.compare_at_price | money }}</span></div>
                    {% endif %}                    
                    <span class="price">
                        {{ product.price | money }}
                    </span>
                  </div>

The fourth-to-last line assigns that element the "price" class.  Change this line to:

<span class="price{% if product.price < product.compare_to_price %} reducedprice{% endif %}">

Open the CSS file (styles.css).  Add the following line to the end of the file.

.reducedprice { color: red; }

I hope this helps.

0 Likes
momsucceeds
New Member
1 0 0

Thank you for the information, ! Your instructions worked for the Minimal Theme too

I followed many suggestions from the threads but nothing worked until now. **I am NOT a tech person at all** However, since I saw many people asking for a solution for the minimal theme, I am sharing what worked for me after reviewing a lot of threads.

To change the price color on the product page:

- Follow Alex135's instructions (above). Just place the first code in the product.liquid and the second code in the theme.scss.liquid.

 

To change the price color on the collection page, add the following code at the bottom of the theme.scss.liquid:

.on-sale .grid-link__meta {

  color: red;

}

 

.grid-link__sale_price {

  color: #000;

}

 

0 Likes
Natztech
Shopify Partner
602 156 381

can you please share site url and if any password then provide password 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes