Change the Color Of "On Sale" In Focal Theme On Desktop AND Mobile View

[LeyDE]

Hello Dear community,

Its my third time asking but no one was able to make it work on mobile view. Im using the focal theme and I want to change the color and background color of the “on sale” accent on both desktop AND mobile view.

What exactly do I need to change in the code?

URL: https://leyah.de/products/5-in-1-haarstyler

Thanks.

[PageFly-Henry]

Hi @LeyDE

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

.product-meta__price-list-container span.label.label–highlight {

background: black !important;

color: red !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[LeyDE]

Thanks for the fast reply Henry.

This did not work. It only shows on desktop view but I want it mainly on mobile view.

[PageFly-Henry]

You can try again with this code only on mobile:

@media (max-width: 767px){

.product-meta__price-list-container span.label.label–highlight {

background: black !important;

color: red !important;

}

}

[LeyDE]

This didn’t work either.

[ZenoPageBuilder]

Hello @LeyDE

Inside Shopify Admin, you can go to Edit theme code, open file theme.css and add this code at the bottom

.label--highlight {
    color: #000 !important;
    background: #00ff00 !important;
}

The result on mobile

Hope that help!

[LeyDE]

Unfortunately, this didn’t work for mobile view. It only changed the desktop view.

[fadi_yousif]

Are you testing on a physical mobile device or inside your browser’s developer tools? The old version of the sale tag might be cached. Try clearing the cache and test on another mobile device and browser.

[LeyDE]

I deleted cache and tried another browser. No results.

[fadi_yousif]

Okay, in that case I’d have to take a look at your theme code

[PageFly-Henry]

Please try another solution:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag → save.

@media (max-width: 767px){ .product-meta__price-list-container span.label.label--highlight { background: black !important; color: red !important; } }

[LeyDE]

This worked, thanks!

[PageFly-Henry]

You are welcome @LeyDE