Supply Theme - Change background color for "Sold Out" icon

mim768
New Member
7 0 0

Looking for guidance on changing the background color of the SOLD OUT icon that displays over the item photo on both the collection page and product page. TIA!

0 Likes
Michal_Morek
Shopify Partner
498 41 81

Hello ,

Kindly welcome to the Shopify Community.
I properly read your problem, and I dearly need to carefully analyze your website to provide a solution here.
Would you kindly share your website URL and if your website is password protected then also provide a password?

I will carefully check out the issue and provide a solution to you here.

Please let me know if you have any further questions.

If you found this comment useful then please hit Like and Accept the Solution!
If you would like to hire us as Shopify experts, please reach out via email or private message.
Founder of Shopify agency - Accomplishify.com
Contact me on: michal.morek@accomplishify.com
0 Likes
mim768
New Member
7 0 0
You can see what I'm referring to on this collection page

[ https://shop-mi-med.com/collections/electric-scooters ]( https://shop-mi-med.com/collections/electric-scooters )

I have changed the "sold out" text to say "call for availability," but would like the background of that icon to be light gray instead of black.
0 Likes
dmwwebartisan
Shopify Partner
6582 1536 2002

@mim768 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Natztech
Shopify Partner
889 242 661

hello @mim768 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-product #ProductSection .grid  .large--three-fifths  form.addToCartForm .payment-buttons--small button.btn--add-to-cart.disabled{
    color: #f4eeee !important ;
    background-color: #b71b1b !important;
}

.template-collection  #CollectionSection  .grid-item .grid-uniform  .grid-item .product-grid-image .product-grid-image--centered .badge--sold-out span.badge-label{
     color: #f4eeee !important ;
    background-color: #b71b1b !important;
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
mim768
New Member
7 0 0
mim768
New Member
7 0 0
Lilith
Shopify Staff
Shopify Staff
468 52 122

Hi, @mim768!

My name is Lilith, I'm on the Social Care team at Shopify.

Although Shopify's general support is unable to provide specific code modification solutions, I'm happy to provide this quick easy tutorial for you on how to change that color. Even if someone isn't too familiar with code this should be fairly straightforward.

The key here is not to overcomplicate it and just change one small number in your code.

 

How to Change the Sold Out Badge Color

1. Head over to Online Store > Themes

2. Open the Actions menu beside the theme that you want to edit, select Edit Code

3. Now you can jump over to the Assets folder and open theme.scss.liquid

4. Scroll down to approximately row 3639, you're looking for .badge-label

5. Under that you'll find the background-color: $colorHeaders; line that controls the color of just that sold-out badge.

 

16-38-ym84h-o92jh

 

6. All you have to do now is replace the $colorHeaders; with the hex color code you want. In my case here I'm going to change it to orange (#FFA500) - be sure to use the # symbol before your hex code

7. Click on Save

 

Results

Here's my before:

17-05-22huo-ybly6

 

Here's my after:

17-08-7j6sc-74a9h

 

Important Note

I should mention that you can change the color through the theme editor super easily by just going to your Theme Settings > Colors.

17-02-3da7t-81w5c

 

The only thing about doing this that might not work for you is that it also changes all of the headings' colors as well in your site. So I recommend changing just that one little number in your theme code if you only want to change the sold-out badge.

While changing the color of these can help your customers see that things are selling in your store, it can be a bit tough on the eyes. Try to use colors that are accessible, but also within your brand identity. It's always important to keep within your brand visuals so that you have a consistent appearance and the site allows customers to begin building trust in your business. It's amazing what these small changes and considerations can do!

Let me know how you do with the information above! I'm happy to answer any questions you think of as you work on your business.

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes