how to change color on checkout button in cart drawer

Solved

how to change color on checkout button in cart drawer

silenceclothing
Explorer
132 0 17

hello. i want to make the go to chackout button white, and also the border around the quantity chooser white. does anyone know how to do this?

silenceclothing_0-1736763339540.png

 

Accepted Solution (1)

DaisyVo
Shopify Partner
4447 495 591

This is an accepted solution.

Hi @silenceclothing 

 

In order to fulfill your request, please follow these steps
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head>

 

{% style %}
.quantity:after {
    box-shadow: 0 0 0 var(--inputs-border-width) white !important;
}
div#CartDrawer button#CartDrawer-Checkout {
    color: black !important;
}
{% endstyle %}


Here is the result: 

image_720.png

 

I hope this helps

 

Best,

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

View solution in original post

Replies 6 (6)

ZestardTech
Shopify Partner
6147 1099 1475

Hello @silenceclothing ,
Here are the steps to apply the necessary changes in your Shopify store:

  • In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  • Locate Asset > base.css and paste the following code at the bottom of the file:

 

div#CartDrawer .drawer__inner button#CartDrawer-Checkout {
    background: white;
    color: black !important;
}

 

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

topnewyork
Astronaut
1368 165 224

Hi @silenceclothing 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
button#CartDrawer-Checkout {
    background: white !important;
}
button#CartDrawer-Checkout:before {
    color: black !important;
}
</style>

 If you find my advice helpful please remember to LIKE and accept as SOLUTION.
Thanks!

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month
silenceclothing
Explorer
132 0 17

the button just turns grey and nothing happend with the border around quantity

silenceclothing_0-1736765673980.png

 

topnewyork
Astronaut
1368 165 224

I saw your complete code, you put some id's in all cart sections, that's why you are not able to apply some specific code.. so please reove id's from div then you can apply all custom easily.. 
Step 1: First you need to remove this id
image.png
Step 2: I'm trying to apply code.. you can check results below but above tags also efffective.
image.png

Hope you will get my all points, after this you will face any problem so kindly inbox me
Thank you!

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month

DaisyVo
Shopify Partner
4447 495 591

This is an accepted solution.

Hi @silenceclothing 

 

In order to fulfill your request, please follow these steps
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head>

 

{% style %}
.quantity:after {
    box-shadow: 0 0 0 var(--inputs-border-width) white !important;
}
div#CartDrawer button#CartDrawer-Checkout {
    color: black !important;
}
{% endstyle %}


Here is the result: 

image_720.png

 

I hope this helps

 

Best,

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
silenceclothing
Explorer
132 0 17

Hello, this worked ! Thanks:)