How to change the colour of the 'sold out' badge only

Technical Q&A
, ,
1

I changed the colour of the ‘sale’ badge for the product cards and product pages, however I don’t know how to do it for only the ‘sale’ badge. I want the ‘sold out’ badge to be a black background and white text on the product cards and product pages.

This is my shop link d63bb7.myshopify.com

2

Hello @miab1567

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.badge--bottom-left{ background: #000 !important; } span.badge--bottom-left.color-accent-2 { background: #eb1c1c !important; }

Tech_Coding_0-1727777696130.png
Tech_Coding_0-1727777696130.png1347×414 406 KB

Tech_Coding_0-1727778397001.png
Tech_Coding_0-1727778397001.png1328×357 412 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

3

Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the end of the file and save.

.badge--bottom-left, {
  background: #000 !important;
}

result

13.png
13.png948×352 187 KB

12.png
12.png423×472 128 KB

If this was helpful, hit the like button and accept the solution.
Thanks

4

Hi,

Add this on your theme.liquid file.
5

But this also changes the ‘sale’ badge to be the same colour as the ‘sold out’ badge

I want the sale badge on all pages to be red and the sold out badge on all pages to be black

6

I want the sale badge on all pages to be red and the sold out badge on all pages to be black

7

not quite right.

I want the sale badge on all pages to be red and the sold out badge on all pages to be black

8

I have update the above code please add that
Thanks

9

Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the end of the file and save.

span#NoMediaStandardBadge-template--20458406019403__product-grid-10132389036363 {
background: red !important;
}

result

14.png
14.png696×872 503 KB

If this was helpful, hit the like button and accept the solution.
Thanks

10

Hello @miab1567 , You have to make some code changes in your files. First, You need to open the code editor to add a class for sold-out badges.

To open the code editor go to Shopify Admin > Online Store > Themes > Edit Code. Review below screenshot for the reference.

Edit Code.png
Edit Code.png1893×806 151 KB

Open the “card-product.liquid” file and locate the HTML elements that have the class “badge badge–bottom-left color-”. Add the “sold-out” class to these elements, but only if they are used for displaying the “Sold Out” badge. If the class appears multiple times for the “Sold Out” badge, ensure the “sold-out” class is added to each occurrence. Do not add the class for badges displaying "Sale. Review the screenshot below for reference:

badge_bg_color.png
badge_bg_color.png1900×809 66.9 KB

Once you add the class open the “theme.liquid” file and add the below code before the tag.

{% style %}
.badge.sold-out {
    background-color: #000;
}
{% endstyle %}

AT…

11

Hi @miab1567

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the 


Hope this can help you solve the issue

Best regards,

Richard | PageFly