Button Change Color When Product is Soldout

8 0 2

Hi, can someone help me out on how can I change the color of the button add to cart to red when product is soldout? 




Replies 4 (4)

Shopify Partner
5589 1261 1223

Hello @newuser01 


To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?


Thank you and hope to hear from you.
Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business

- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

Shopify Expert
3477 462 523

Hi @newuser01

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Shopify Partner
253 19 109

Hello @newuser01 ,


You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code 

Ref- step 1.png


Go to Assets -> quick-add.css -> search for the class that styles the "Add to Cart" button

Add the following code:

.btn.sold-out {
  background-color: red;


Save and preview.


Hope this can help.

OneCommerce team.

OneCommerce - The Ultimate eCommerce Solution Platform
We offer 12+ solutions to help increase traffic, maximize conversion rates and generate better revenue for more than 500,000 eCommerce merchants worldwide.

Get know us at: Website | Blog | FAQ | Contact us