Compare-at price in red

Technical Q&A
1

Hi Shopify Community,

Can someone please help me making the Compare-at price crossed price in red font? I think I would need to include some code but not sure where and what code.

Thanks a lot in advance

2

Hey @RK2024

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
span.price-item.price-item--sale.price-item--last {
    color: red !important;
}
</style>

RESULT:

image
image791×415 17.3 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

3

Hi @RK2024.
Thanks for your post, to solve your problem, you can try several solution :
Solution 1: Go to Online Store > Customize theme and add code in Custom CSS settings:

Code:

.price-item--sale.price-item--last {
  color: red !important;
}

Demo and result:

image
image1920×955 70.5 KB

Solution 2:

  1. Go to Online Store
  2. Edit Code
  3. Find component-price.css file
  4. Add the css code
.price-item--sale.price-item--last {
  color: red !important;
}

Or

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the code in the bottom of the file above </ body> tag,
<style>
      .price-item--sale.price-item--last {
        color: red !important;
      }
</style>

Demo:

image
image1920×966 123 KB

4

Thanks so much, that worked!

Regards

5

Thank you for your help!