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

[miab1567]

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

[Tech_Coding]

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 </body> on theme.liquid
<style>
  .badge--bottom-left{
     background: #000 !important;
  }

  span.badge--bottom-left.color-accent-2 {
     background: #eb1c1c !important;
  }
</style>

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

[miab1567]

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

[Tech_Coding]

I have update the above code please add that 
Thanks

[GTLOfficial]

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

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

[miab1567]

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

[GTLOfficial]

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

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

[TechNinja]

Hi,

Add this on your theme.liquid file.

<style>
.badge--bottom-left, span.badge.price__badge-sale {
    background: black!important;
}
</style>

[miab1567]

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

[Huptech-Web]

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.

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:

Once you add the class open the "theme.liquid" file and add the below code before the </head> tag.

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

AT...

[PageFly-Richard]

Hi @miab1567 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> 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 </head>

<style>
span.badge.price__badge-sale {
    background-color: red !important;
}
<style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly