All things Shopify and commerce
Hello, after a lot of research I found code on how to change my add to cart color, but the border color is still black, and what is the code for checkout? So that I can also change the color there. Thank you
Solved! Go to the solution
This is an accepted solution.
This code should update the color of the cart drawer.
<style>
.product-form__input input[type=radio]:checked+label{
background: #216738!important;
border: var(--variant-pills-border-width) solid #216738;
}
.product-form__submit:before,
.product-form__submit:after,
button#CartDrawer-Checkout:before,
button#CartDrawer-Checkout:after,
[data-testid="Checkout-button"]:before,
[data-testid="Checkout-button"]:after,
button#checkout:before,
button#checkout:after,
.cart__warnings .button:before,
.cart__warnings .button:after,
.contact__button .button:before,
.contact__button .button:after,
.cart-drawer__empty-content a:before ,
.cart-drawer__empty-content a:after
{
box-shadow: none!important;
}
button#CartDrawer-Checkout,
button#checkout,
.cart__warnings .button,
.contact__button .button,
.cart-drawer__empty-content a
{
background: #216738!important;
border: var(--variant-pills-border-width) solid #216738;
}
[data-testid="Checkout-button"] {
background: #216738!important;
}
</style>
Hi @qunzqu ,
Can you provide link to your store? I will review the checkout button and provide a solution accordingly.
Thank you
Hello, yes, my Shop Name is: fitellogermany.de
Passwort: skawmu
(code deactivated right now)
can you activate the code and let me know? I will fix the color and provide you the solution
The code is activated. I just thought of something another that I would like to change too (the color in the size selection). In summary: add to cart border, checkout color (+ border if necessary) and the color of the different sizes of the product
Hi @qunzqu ,
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>
<style>
.product-form__input input[type=radio]:checked+label{
background: #216738!important;
border: var(--variant-pills-border-width) solid #216738;
}
.product-form__submit:before,
.product-form__submit:after,
button#CartDrawer-Checkout:before,
button#CartDrawer-Checkout:after,
[data-testid="Checkout-button"]:before,
[data-testid="Checkout-button"]:after
{
box-shadow: none!important;
}
button#CartDrawer-Checkout {
background: #216738!important;
border: var(--variant-pills-border-width) solid #216738;
}
[data-testid="Checkout-button"] {
background: #216738!important;
}
</style>
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka
when i go into my shopping cart and remove the product from there, it says "your cart is empty" and this button at the bottom is also black. It's best to make it green like the others. And at the bottom of the contact page where the button says "send" the button is also completely black, it would be good if you made it green too. And whenever I open a page in the online store, for example about fitello, the page name is so big above "our story", can you make it smaller? in other pages the size fits again.
And thanks for the other solution, it worked!
Hi @qunzqu ,
Please replace previous code with below css to make the font green.
Regarding font size, can you provide screenshot of the menioned section?
<style>
.product-form__input input[type=radio]:checked+label{
background: #216738!important;
border: var(--variant-pills-border-width) solid #216738;
}
.product-form__submit:before,
.product-form__submit:after,
button#CartDrawer-Checkout:before,
button#CartDrawer-Checkout:after,
[data-testid="Checkout-button"]:before,
[data-testid="Checkout-button"]:after,
button#checkout:before,
button#checkout:after,
.cart__warnings .button:before,
.cart__warnings .button:after,
.contact__button .button:before,
.contact__button .button:after
{
box-shadow: none!important;
}
button#CartDrawer-Checkout,
button#checkout,
.cart__warnings .button,
.contact__button .button {
background: #216738!important;
border: var(--variant-pills-border-width) solid #216738;
}
[data-testid="Checkout-button"] {
background: #216738!important;
}
</style>
Yes, nevermind about the pages. When I put the product in the shopping cart and remove it from there, it says in black :Your shopping cart is empty
Continue shopping, this field is still black, otherwise everything works, thanks again
This is an accepted solution.
This code should update the color of the cart drawer.
<style>
.product-form__input input[type=radio]:checked+label{
background: #216738!important;
border: var(--variant-pills-border-width) solid #216738;
}
.product-form__submit:before,
.product-form__submit:after,
button#CartDrawer-Checkout:before,
button#CartDrawer-Checkout:after,
[data-testid="Checkout-button"]:before,
[data-testid="Checkout-button"]:after,
button#checkout:before,
button#checkout:after,
.cart__warnings .button:before,
.cart__warnings .button:after,
.contact__button .button:before,
.contact__button .button:after,
.cart-drawer__empty-content a:before ,
.cart-drawer__empty-content a:after
{
box-shadow: none!important;
}
button#CartDrawer-Checkout,
button#checkout,
.cart__warnings .button,
.contact__button .button,
.cart-drawer__empty-content a
{
background: #216738!important;
border: var(--variant-pills-border-width) solid #216738;
}
[data-testid="Checkout-button"] {
background: #216738!important;
}
</style>
Thanks! It Worked, i have one last Question,
What is the code to display this text above the size, below the price.
(product page)
Hi @qunzqu ,
This will require custom coding as per your theme. This is not straight forward and will require development timw.
If you find my information useful, please like all my replies. And also accept my reply as a solution.
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024