Change Add-to-Cart button border color

Store Design
, ,

Topic summary

A user wants to visually distinguish in-stock products by changing the “Add to Cart” button’s border color from black to red, making them stand out from sold-out items.

Initial Solution Provided:

  • Another user suggested adding custom CSS code to the theme.liquid file (above the tag)
  • The code would target the add-to-cart button styling

Issue with Solution:

  • The original poster clarified they only want this styling applied to in-stock items
  • They don’t want the border color change affecting out-of-stock products
  • Requested a modified code solution that targets only products with the “Add to Cart” button visible

Status: The discussion remains open, awaiting a refined CSS solution that conditionally applies the border color based on stock availability.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I want to make my instock items pop out compared to sold out items.

So I want to make the “Add to Cart” button’s border color to be red instead of black.

Site: cardpiece.com

Thanks for the help!

CARDPIECE_1-1720893154019.png
CARDPIECE_1-1720893154019.png726×710 189 KB

2

Hey @CARDPIECE

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1720893797223.png
Moeed_0-1720893797223.png370×662 180 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi thanks for the suggestion.

Though I only want to apply this border color change to instock items that have the “Add to Cart” button on them, I don’t want this applied on out-of-stock products. Can you come up with another code?

Thanks :grinning_face_with_smiling_eyes: