Re: shopify dawn theme add to cart how to change BORDER color and checkout color

Solved

shopify dawn theme add to cart how to change BORDER color and checkout color

qunzqu
Tourist
12 0 1

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

Accepted Solution (1)
theycallmemakka
Shopify Partner
1693 408 427

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>

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 11 (11)

theycallmemakka
Shopify Partner
1693 408 427

Hi @qunzqu ,

 

Can you provide link to your store? I will review the checkout button and provide a solution accordingly.

 

Thank you

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

qunzqu
Tourist
12 0 1

Hello, yes, my Shop Name is: fitellogermany.de

Passwort: skawmu 

 

(code  deactivated right now)

theycallmemakka
Shopify Partner
1693 408 427

can you activate the code and let me know? I will fix the color and provide you the solution

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

qunzqu
Tourist
12 0 1

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

theycallmemakka
Shopify Partner
1693 408 427

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

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

qunzqu
Tourist
12 0 1

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!

theycallmemakka
Shopify Partner
1693 408 427

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>

 

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

qunzqu
Tourist
12 0 1

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

theycallmemakka
Shopify Partner
1693 408 427

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>

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

qunzqu
Tourist
12 0 1

Thanks! It Worked, i have one last Question, 

Screenshot 2023-11-24 194150.png

What is the code to display this text above the size, below the price.

(product page) 

theycallmemakka
Shopify Partner
1693 408 427

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.

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com