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

[qunzqu]

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

[theycallmemakka]

Hi @qunzqu ,

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

Thank you

[qunzqu]

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

Passwort: skawmu 

(code  deactivated right now)

[theycallmemakka]

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

[qunzqu]

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]

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

[qunzqu]

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]

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>

[qunzqu]

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 · 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>

[qunzqu]

Thanks! It Worked, i have one last Question, 

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

(product page) 

[theycallmemakka]

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.