Changing Sale Button Color on Sense theme

Store Design
1

Hi! I am trying to change the color of the sale badge on all my products, currently, I have a white background for the entire page and the sale badge is also white, so the “sale” badge just appears as the words “sale”. How would I be able to change the color of the sale badge background to be black or any other color?

Extra: How do I change the color of individual text on a page on my site?

2

Hi @lighthuelabs

Can you share with me the page url?

3

Hello @lighthuelabs

It’s GemPages support team and glad to support you today.

You can follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code below:

.badge{
    background-color: #000;
    border-color: #000;
}

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

1 Like
4

Hi @lighthuelabs

This is Victor 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 base.css.

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

.card__badge.bottom.left .badge {
    background: red !important;
}

PageFlyVictor_0-1672978555354.png
PageFlyVictor_0-1672978555354.png262×287 70.4 KB

Hope that my solution works for you.

Best regards,

Victor | PageFly

1 Like
5

Hi,
Please share your store URL and if your store is password protected then also provide password too.
Thank you.

6

@lighthuelabs
Put below css into theme.liquid file before closing tag
7

Hi Victor! This changed the badge color perfectly, however the text “sale” is in red also, how would I change it to appear white manually with code?

8

@PageFly-Victor This changed the badge color perfectly, however the text “sale” is in red also, how would I change it to appear white manually with code?

9

@GemPages This changed the badge color perfectly, however the text “sale” is in red also, how would I change it to appear white manually with code?

10

Hi @lighthuelabs

You can try with this code:

.card__badge.bottom.left .badge {
    color: white !important;
}