please where can i change the color of add to cart button
Topic summary
A user seeks guidance on changing the color of the ‘Add to Cart’ button in their store theme.
Two solutions provided:
-
Direct CSS modification: Navigate to Online Store → Theme → Edit code → Assets → theme.scss, then add CSS targeting
.btn--add-to-cartwith desired background, border, and color properties. -
Inspect and customize approach:
- Use browser developer tools to identify the button’s CSS class/selector
- Locate the theme’s CSS file (theme.css, theme.scss, base.css, etc.) in the code editor
- Add custom CSS rules targeting the identified selector (example provided changes checkout button color to red)
- Screenshots demonstrate the inspection process and expected result
Status: Multiple working solutions offered; implementation depends on the specific theme being used.
1 Like
Hello there,
- Go to Online Store->Theme->Edit code
- Asset->theme.scss->paste bellow code in bottom of file
.btn--add-to-cart {
background: gold;
border: none;
color: white;
}
Hi @feloni01
We’re not sure what theme you are using. But we’d love to suggest you this solution:
- Search for the class of the checkout button and copy the selector of that element
- Go to edit code, find the css file (base.css, theme.css, theme.scss, …) and add the following css code
#checkout {
color: red;
}
Result:
Hope this can help you.