How do I change the color of the Add to Cart Button on the product pages to a green fill with white text? I’d like it to match the ‘Quick View’ buttons.
Preview link: https://3x1qz6sz994d57oi-55480647737.shopifypreview.com
Thank you.
Topic summary
A user seeks to change their Add to Cart button color to green with white text to match their Quick View button styling on a Shopify Motion theme.
Solution Provided:
A CSS code snippet was shared to apply the desired styling:
- Targets the
.payment-buttons.add-to-cart--secondaryclass - Sets background color to
#22a98e(seafoam green) - Changes text color to white (
#fff) - Removes border with
!importantflags
Follow-up Issue:
The user reported the button color stopped displaying correctly after initially working. However, when checked via the live product link, the seafoam green styling appears to be rendering properly, as confirmed with a screenshot showing the correct button appearance.
@jaimie2 With your current theme style, since you are using a secondary color on your add to cart button, you can add the following CSS line to your theme in a separate CSS file:
.payment-buttons .add-to-cart--secondary{background-color:#22a89e !important; color: #fff !important; border: none !important;}
2 Likes
Thank you @DavidCouillard works great!
1 Like
@DavidCouillard hi David, something happened to the above code and the add to cart button is no longer showing as sea foam green. Is there an update to the code that I can paste into my liquid to fix this issue?
Live example: https://www.walaxr.com/products/xr-reality-collection-mystical-unicorn-unisex-youth-hoodie
@jaimie2 I’ve clicked your link and still see the Add to Cart with the right sea foam green…
1 Like