A user wants to change the border color of “add to cart” buttons on collection pages from dark green to #48ef13.
Solutions Provided:
Three different CSS approaches were offered:
CodingFifty’s solution: Target .card-wrapper .button--secondary:after with a box-shadow property in base.css/theme.css
Made4uo-Ribe’s solution: More comprehensive code targeting multiple button states (hover, default) using box-shadow with CSS variables for border width
DaisyVo’s solution: Simpler approach using .card__content > .quick-add button with a direct border property, added via Theme Settings > Custom CSS
Resolution:
The user confirmed DaisyVo’s solution worked perfectly, marking it as the simplest and most effective approach. All solutions involve adding custom CSS code, but differ in specificity and implementation method (editing theme files vs. using the Custom CSS panel).
Hi @StuKellyMotorsp ,
You can follow the steps here:
Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there
Here is the code for step 3:
.card__content > .quick-add button {
border: 3px solid #48EF13 !important;
}
Here is the result:
Please let me know if it works!
Best,
Daisy
