Hello, i’ve been trying to edit the color of the cart icon on my checkout page, but i can’t figure out how to. Right now the color is white which makes it invisible with the current background i have. I want it to black like this picture
Hi @chrissvane
You can change it from the customizer
Check the screenshot: https://prnt.sc/XWL7iTitprLz
- Goto Customizer → Theme Settings → Checkout → Colors → Change the Accents Color
Individual colors can’t be changed in the checkout.
Hi @chrissvane
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
.icon-cart-empty {
color: red !important;
}
In case the above code cannot work, please share with me the URL and password so I can check the problem to help you be more careful.
Hope that my solution works for you.
Best regards,
Henry | PageFly
Hi there,
In your customizer, go to the checkout template and then to your “theme settings”. There change the “accent” color.
Hope this helps!
https://prbelts.dk
Just put something in the basket and checkout
Code svane21
You are giving code for the cart, not for the checkout
Im also trying to change the color of the cart?
Hello @chrissvane
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
It’s still white after this code
Hello @chrissvane
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
Result
Hello @chrissvane
ok I understood
Why the color is not changing,The reason is that we can only edit checkout page in Shopify Plus.
You can try this code:
svg.icon.icon-cart {
color: red !important;
}
Hi there,
I see a lot of comments here about editing some liquid etc to change the cart icon on the checkout. Let me make the solution pretty easy and clear. The only way a non-plus merchant can edit any type of color in the checkout is using the customizer like I’ve told before and changing the accent color. Any type of CSS will NOT work.
If after saving and going to the actual page to check it (sometimes the customizer is a bit buggy with the checkout) and the highlighted color is not there, please contact support as this clearly is a bug.
Hope this helps!