[Brooklyn] How to change the color of compare at price to red

Solved
Tourist
5 0 1

Hello i used this post to add the compare at price to my products

https://community.shopify.com/c/Shopify-Design/Display-Normal-Price-next-to-Sale-Compare-at-Price/td...

How can i change the 29 here to red313.JPG

0 Likes
Shopify Partner
570 123 186

send me your store url so, I can check and assist you better.

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
1 Like

Success.

Shopify Partner
570 123 186

@asadv123 

 

Go to the Snippets > product-grid-item.liquid file and find "grid-product__price-wrap" class in that file. It should be like following:

<span class="grid-product__price-wrap">

replace this line with following code:

<span class="grid-product__price-wrap   {% if product.compare_at_price > product.price %}item_with_compareatprice{% endif %} ">

It will add new class for those products which has Compare at price as well.

 

Now, add following css at the end of Assets > theme.scss.liquid file:

.item_with_compareatprice .grid-product__price {
    color: #900;
}

You can change color code according your requirement.

 

Cheers,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
1 Like
Tourist
5 0 1

THANK YOU Tejas! You don't know how much you've done for me much appreciated!!

1 Like
Tourist
5 0 1

One more question if you don't mind 
How can i make the Red price bigger and the black price smaller?

0 Likes
Shopify Partner
570 123 186

@asadv123 

 

Add following css to make the Red price bigger and the black price smaller:

.item_with_compareatprice .grid-product__price {
    font-size: 17px;
}
.item_with_compareatprice .product-single__price--compare-at {
    font-size: 15px;
}
Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
1 Like
Tourist
5 0 1

Thanks again!

0 Likes
New Member
1 0 0

I copied and pasted both in the correct spots and it did make the sale price red but it also made the slashed out regular price red as well. What did I do wrong?

0 Likes
Shopify Partner
570 123 186

@hoofbeats 

 

Send me your store url so, I can check and assist you better.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
0 Likes