how to change cart background color? be yours theme

[withaudette]

I would like to change the background color to white, and the button to black color - how do i go about doing this? 

www.audette.store (code: test)

[Ellie-BOGOS]

Hi @withaudette 😊

I’m Ellie from BOGOS, #1 Shopify Promotion App (Gifts, Bundles, Upsells, Discounts)

Could you please confirm the following for me? So that I could help you with my CSS code

1. Do you want to change the cart background color from the current cream to white?

2. Is the button you'd like to change to black the "Check Out" button?

3. Do you have any preferences regarding the rainbow line you've highlighted in blue?

Thank you!

[Ellie-BOGOS]

Hey @withaudette 😊💙 Ellie again from BOGOS, #1 Shopify Promotion App (Gifts, Bundles, Upsells, Discounts)

Regarding my question 1 & 2, if your answer is yes, please follow my steps below:
Step 1. Go to Online Store
Step 2. Find "..." (next to "customize" button" -> click "Edit Code"
Step 3. Find "theme.liquid" file
Step 4: In the bottom of the file -> find </body> tag -> add this code above </body> tag:

.mini-cart__inner {

    background-color: #fff !important;

}

.mini-cart__footer .button-container .button {

    background: #000 !important;

}

*Result: 

If my code worked, appreciate if you could Like and Accept as Solution!

[withaudette]

Hi! Yes this is exactly what i wanted, however after implementing the code, it still didn't work

[Ellie-BOGOS]

Hi @withaudette 😊 Could you please take a screenshot of where you placed my code? Also, could you confirm if it's added above the </body> tag at the bottom of the file?

[withaudette]

Yes, it's placed above the </body> tag

[Ellie-BOGOS]

Hi @withaudette 😊 Please:

+ delete the <style> in the line 276

+ add this code in the line 285

</style>

😊If my code worked, appreciate if you could Like and Accept as Solution!

[withaudette]

Hi, it still doesn't work for me 😞

[Ellie-BOGOS]

Hi @withaudette

1. Please delete 2 <style> lines I note in red below (delete, not add). 

2. There's also a problem with the code you add above (the @media screen... one). It's wrong and affecting my code below so it didn't work. Please add one more "}" in the 2 lines as I have circled in green.

The correct line shouldn't be "}", but should be:

}}

[Ellie-BOGOS]

@withaudette, The correct result should be like this 😊 Let me know if it worked or not

[withaudette]

Thank you! It works now, would you know how to change the rainbow line to black?

[withaudette]

Also would you happen to know how to add this: 

The edit function, when you click it allows you to choose the variant option in the cart 

[Ellie-BOGOS]

This might need a more advanced custom code or a third-party app to do this 😊 You can create another post to ask the community about it ❤️

[Ellie-BOGOS · Accepted solution]

Hi @withaudette 😊 Ellie again from BOGOS, #1 Shopify Promotion App (Gifts, Bundles, Upsells, Discounts)

After do all these above, please:

1. add a new line between the 2 lines I noted in green

2. paste this code 

.free-shipping__progress--success:after {
    background: #000 !important;
}

*Result:

If my code worked, appreciate if you could Like and Accept as Solution!

[withaudette]

Thank you!!

Two things I might need help:

Would you happen to know how to change the text font and color for this part:

I want to change BLUSH BUTTER font to SHADE: MERCI font (and in black color), and to change
SHADE: MERCI font color to black, how do i go about doing that?

Second:

To change the cart title to add in the product count beside and to change font to same as SHADE:MERCI font

Thank you so much, your help is appreciated 🙂

[Ellie-BOGOS]

Hi @withaudette, Could you mark my first reply with code as a solution, then start a new topic for your new questions? 

I'll help you out, but the community rule encourages members to create a new topic if you have any other questions ❤️ Thank you very much first ❤️

[withaudette]

got it! Will do it now thank you

[Rahul_dhiman]

Hello @withaudette 
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> component-cart-drawer.css
add this code at the end of the file and save.

.mini-cart__header {
background-color: white !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks