Have sold out button be a different colour background

Store Design
, ,

Topic summary

A user wants to change the background color of the “sold out” button on their product pages to make it more prominent (specifically requesting green instead of orange).

Proposed Solution:

  • Add custom CSS code to the theme files
  • Navigate to: Online Store → Theme → Edit code → Assets → section-main-product.css
  • Insert specific CSS targeting the sold-out badge background color

Current Status:

  • The suggested CSS solution was attempted but did not work
  • The issue remains unresolved
  • Previous solutions from other threads were also unsuccessful

Note: Some portions of the conversation appear corrupted or encoded, making complete details difficult to verify.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
2

Hello @RollingBeetle

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->section-main-product.css>Add this code at the bottom.

span.badge.price__badge-sold-out.color-background-2 {
    background: #8ABE92 !important;
}