Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hi there,
Is there a way to change the cart button in the checkout? I tried the normal settings, but it does not give me the option. As you can see, the logo is black and I would like to have the cart button black as well. Is there some sort of code I can implement to make this happen?
Best regards,
Ernesto
Hi,
Hope this will help
- For Basic Shopify add css at css file
Example of css code
/* Make cart button black */
.cart__checkout-button,
.cart__footer .btn {
background-color: #000000 !important; /* black */
color: #ffffff !important; /* white text */
}
- For Shopify plus add css at checkout.liquid
CSS example
/* Change checkout cart icon button to black */
.checkout__header__cart {
filter: brightness(0); /* Makes icons black */
}
You can also target a specific button class with css
Hello @ErnestoRP,
As per your requirement and shared image, you want to change the cart icon color to black. For that, you can follow the following instruction if you are on Shopify Plus (In Shopify, customizing the checkout page is limited unless you're on the Shopify Plus plan):
1. Navigate to Shopify Admin → Online Store > Themes > Actions > Edit code
2. Open the file called checkout.liquid.
3. Add this code just before the closing </head> tag:
<style>
/* Make the cart icon (top right) black */
.checkout-header__cart-toggle {
color: #000000 !important;
fill: #000000 !important;
}
</style>
4. Save the changes.