Change Font Size and Color of Sale/Compare to price - Venture Theme

Store Design
1

Good morning all! I’m looking for assistance with the following changes to my store design.

I would like to:

  • Increase the font size of ONLY the “Compare to price” (The one that has Strikethrough) on all areas of the store seen below
  • Change the font color of ONLY the “Sale price” to Red in all areas of the store seen below

chrome_nkqOerbwr4.png
chrome_nkqOerbwr4.png753×883 90.2 KB

chrome_CqJmyr3RjQ.png
chrome_CqJmyr3RjQ.png1697×905 147 KB

2

@SpeedSyndicate

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hi @SpeedSyndicate

Hope you’re having a great day!

I’ve read your problem and before providing a solution, would like to analyze your website. Then, I will provide a solution to you up here - on the forum.

Could you share your website URL? And if your website is password protected then also provide a password?

If you have any further questions, please do reach out either here on the forum, or via private message/email.

4

Hey Ketan, the shop url is Speedsyndicate.org and the login password is speedsyndicate0.

I appreciate your help in advance!

5

Hey Michael, the shop url is Speedsyndicate.org and the login password is speedsyndicate0

6

@SpeedSyndicate

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.product-card__price s.product-card__regular-price { font-size: 20px; }
.product-card__price, .product-single__price{ color:red !important; }
.product-single__price--compare{ font-size: 25px; }

Hope this works.

Thanks!

7

@dmwwebartisan Thanks so much for your help here! This does work for the main storefront product cards, but now both prices are in red at the item level. See pictures

chrome_t4vbn3BPcO.png
chrome_t4vbn3BPcO.png958×348 57.4 KB

hL1ziNzBbs.png
hL1ziNzBbs.png1358×939 160 KB

for comparison

8

@SpeedSyndicate

Please add the following code.

s#ComparePrice-product-template {
    color: #000 !important;
}

Thanks!

9

@dmwwebartisan Update, I was able to make the fix using the structure you gave me with .product-single__price–compare{ color:black !important; }

Thanks so much for your help!

10

@dmwwebartisan One final question for you! Is it possible to make just the strikethrough on the compare price red?

11

@SpeedSyndicate

Not understand. Right now you compare price is black and normal price is RED. Do you want compare price red ?