I need help in changing the colors of the View Cart and Checkout Button on my Shopify online store. Could someone direct me on how to change the code to help with this issue.
Topic summary
Goal: change the colors of the “View Cart” and “Checkout” buttons in a Shopify (Prestige theme) store. A screenshot was shared.
Key guidance provided:
- Add custom CSS via Shopify Admin > Online Store > Themes > Edit code.
- Open base.css, theme.css, or styles.css and append CSS:
.cart-drawer__footer .button[href=‘/cart’],
.cart-drawer__footer button[type=‘submit’] {
background-color: black !important;
color: #ffff;
background-size: 0 100%, 100% 100%;
} - This targets the cart drawer footer buttons (View Cart and Checkout), making them black with white text. Adjust colors as needed.
Requests for more info:
- Multiple replies asked for the store URL to provide theme-specific guidance or refine selectors.
Notes:
- The provided code is for the cart drawer (slide-out mini-cart). If buttons on the full cart page differ, selectors may need adjustment based on the theme’s markup.
- Images and a code snippet are central to understanding the proposed solution.
Status: pending. Awaiting the store URL and/or confirmation whether the CSS change achieves the desired result; no final resolution yet.
Hello, @TheTrnchs
Please share the store URL so that I can assist you.
Hi @TheTrnchs ,
You can try this code by following these steps:
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file base.css, theme.css or styles.css
Step 3: Insert the below code at the bottom of the file → Save
.cart-drawer__footer .button[href='/cart'],
.cart-drawer__footer button[type='submit'] {
background-color: black !important;
color: #ffff;
background-size: 0 100%, 100% 100%;
}
1 Like
Hello @TheTrnchs
Can you share store URL?