How To Change Add To Cart Color In Shopify

Today i will show you how to change add to cart button and text color in Shopify and add any hex color code to both button and the text on add to cart for your Shopify store.
changing the color of your "Add To Cart" button and text on Shopify is really important it is to make sure your customers have the best shopping experience possible.
By selecting an eye-catching color for add to cart button and text, you can draw attention to them and encourage shoppers to click through more quickly, this could mean more sales for you in the long run also choosing colors that match or complement those already found throughout your Shopify store will help create a cohesive look that appeals even further to potential customers that will easily click on your add to cart button.
Overall, taking time out of running other aspects of your Shopify business operations like inventory management or marketing campaigns allows for some creative freedom when it comes down customizing small details like “Add To Cart” button and text colors resulting in improved customer satisfaction and higher conversion rate.
Code : pastebin.com/x...
If you have any questions or suggestions my Instagram : / anas_elmedlaoui
About me:
My name is Anas El Medlaoui and i have been around digitally for 8 years making Websites, Mobile Applications, Social Media Promotions, E-commerce etc...
And i have accumulated some experience in multiple fields over the years jumping from project to project (Which wasn't a good idea), I started this UA-cam channel after a year of hesitation to share my knowledge and experience with people that are willing to succeed online with the theory of knowledge for everyone.
#addtocart #color #shopify

[@ChickStore-c1d]

WOW. It WORKS!!! Thanks a lot!!! I have one question, how to add to the other buttons? I am trying to add to the image banner in my main page, could you please let me know where to add it? Thanks a lot!!!

[@karinn4599]

This is very helpful; thank you. I have two buttons next to each other and I would like it if they are the same color. They are "add to cart" and "Choose options"(for gift card amounts). Using your advice, I was able to change the color for the "add to cart" button. How would I change the colors for the choose options button?

[@faith8290]

im dealing with the same issue! let me know if you found a solution

[@cryptonium9257]

Same! How do we change the "Choose Options" Button color? @OnHow

[@SolutionParlour]

Dear Anas,
It is brilliant. You are providing marvelous information.👍👍

[@AnimalsinDisasters]

Always the best information! So helpful! Thanks so much!

[@whitenikes566]

good tutorial bro. Can you tell me how to change the frame/ border color? in my store and yours as well its still black after the edited code. Cheers

[@amroutara690]

That was very helpful Thank you.
2 Things I have trouble with
1. how would I be able to also change the border color
2. products that have more than variant the buttons says "choose options" and it didn't change color
If someone can help that would be much appreciated.

[@LuxoLungs]

how do i remove the border colour

[@cowboysfan1215]

hey, man been loving the videos! They're really helping me a lot with coding my website. I have a question for you, in my theme, I have a sticky add-to-cart built-in, so my question is how would I change the color of the sticky add-to-cart button? I'm not a coder by any means lol I'm just learning the basics for now, so I would appreciate any help you could give. Thanks brotha!

[@faith8290]

i love your vid man! do you know how i can change the color of the "choose options" button? it appears that the code only worked for the items that don't have different varieties of it! thank you

[@TheZAGGA]

This video was great thanks the colour changed but it hasn’t changed on my quick add section when there’s different sizes it says Choose Options with a white background still any idea how I can change this ? Thanks

[@OnHOWGuy]

You're welcome, yeah because thats not an add to cart button or you mean when there is no different variants it does show add to cart without the changes we did ?
Cheers

[@fokkman]

That was very helpful. Thanks so much!

[@shapleyTeam]

thanks bro that was good and easy and just subscribed do you have a course or recommendation for the best product to sale

[@kedar2710]

Thanks a ton for this!

[@MOVIES247-r8k]

THANK U BRO, GOOD VIBES

[@FX_Taylor_B]

Super helpful, thanks bro. What's up from New Zealand

[@Wahajgroups]

Thanks Brother
Love from Pakistan 🇵🇰

[@Flowerbags]

You are so helpful. Thank you for this.

[@Wandereeer]

This guy is the G O A T ! Thank you :)

[@JenKan-y2e]

Thanks a million! It is super helpful and resolve my puzzle that have bothered me for quite a while! Thanks for your kind sharing!!

[@marv9795]

Great Video! Exactly what I was looking. Thanks

[@MalikBilal-bi8xe]

great work thanks sir,no one was telling me this free of cost

[@OnHOWGuy]

You are most welcome, everything on my channel is free of cost.
Cheers

[@ynettashaifer]

This was helpful and it worked. How do I change the color on the continue shopping button?

[@KirstieRoche]

This was super helpful thank you !

[@rapcitylyrics7571]

Worked! Tysm!

[@swishh7693]

Works as advertised. Thank you!

[@gaming-fiber]

I turn my Store from Zero to Hero
Thanks for Providing the Videos

[@OnHOWGuy]

Glad you did and more is coming.
You're very welcome

[@CreativeVibes2633]

Really helpful video, thanks Bro.

[@biochar.]

Worked like magic! Liked and subscribed❤

[@tomharding1322]

Thanks, but is there a way to set a colour on my homepage, differently to the colour on the product page for the 'add to cart' button?

[@ArturoHerrera777]

thank you so much bro your content is so usefull i apreciate your work!

[@hippadafashion]

It worked on my Copied theme but not my published theme. Dawn.... Interesting. Any thoughts?

[@OnHOWGuy]

Thats strange, it should work on both if it did on one, just make sure you did the steps correctly.
Cheers

[@UntamablePhoenix]

How do I change choose options button to match my color scheme in just added on the add to cart button on craft theme? Plz help want to make them match

[@VladimirIvanov-u7j]

Super useful. Thank u, man!

[@RazelviOyog]

Hi Anas, can you make a video on how to integrate the paypal smart button to product and checkout page? The one that says credit/debit card. This is very useful to those stores that don't have other payment method for cards.

[@katie8151]

This worked but for 2 of the products on the Product Grid, the Add to Cart text colour didnt change! The rest of them did, not sure how to fix this!

[@斯特韦]

thank you so much! it helps a lot ! 👍

[@shapleyTeam]

thanks bro it worked perfectly

[@DannyDeighton]

Thankyou very much bro appreciate that!!!

[@juliusonyt2244]

thank you!

[@ashleighmcteare9484]

Can you make the font Bold and change the colour of the Border of the button?

[@FaizAhmad4249.]

Thanks bro, it was very helpful 👍

[@tonyrusso1440]

Do you know why it does not work with the Pipeline theme?

[@marcosltd]

Thanks!

[@isaiahcho2787]

hi bro, i added this to my site and it dropped the performance from 81 to 60. any explanation on how to fix this?

[@chriswestwood9766]

This video really helped me out thanks

[@OnHOWGuy]

Really glad i could help.
Cheers

[@umasiva8562]

Thank you so much

[@OnHOWGuy]

Any time

[@lifeofmaxwell]

Thanks bro. Really helpful ;)

[@jasonstokes23]

hey! i tried all this and it hasnt worked for me? could you help im using theme impulse

[@bravoopleidingen5605]

Thank you so much!

[@saotaku8035]

Thank you so much brother!

[@xxcrimusxx]

Whats the code for choose options?

[@galteshuva3199]

but it changing on all products pages. How can I do it on only one product page? cause I want different vibe for different products.

[@NadySaptra]

How to add the color setting in customize setting color?

[@3percentmen3]

Thanks Brother!

[@OnHOWGuy]

Any time!

[@Revedent]

How do you adjust the popup colors when you add the item to cart?

[@mindfullmavericks]

I want to ask you something, is it possible to replace the cart icon to an animated cart icon?

[@OnHOWGuy]

Welcome, thats a very interesting request actually.
Never tried it but now im interested, i will look into it and if its possible i will definitely do a video about it.
Cheers

[@noybreporting]

Simply put. Thank you

[@OnHOWGuy]

You're welcome

[@sportsandFlickshub]

Love your content

[@Deeaann5]

you are the best bro

[@howardmathews5572]

Why do you guys still live in 2017 🤔 this is easily done in Custom CSS inside sections now. But anyway, I like the easy to follow style, keep it up!

[@OnHOWGuy]

And you watched the video as well haha, Thank you and appreciate that.
Cheers

[@howardmathews5572]

@@OnHOWGuy I came to know what's the code so I can paste it in the custom CSS field asap lol. But everyone has their style, some like to do it the old-school, professional way, and some are like me: lazy and like to utilize Shopify's latest functions. I think they try and make lives easier for a reason. But still, I find that being familiar with code is useful too! So I think both ways are important.

[@Yahya-gb8zn]

Hi, is it possible to change the add to cart button for only one Product page?

[@OnHOWGuy]

I think so, you want to change the text on it ?

[@lovenpeace4life]

Thanks, it was easy.

[@lolitaglam8870]

Merci Anas 🤩Above not bellow 😅

[@ArmanJahandar]

nice, loved it!

[@direpants1562]

i accidently cliked on format css and now it does not shoe me the ringht things please help me

[@calmcadencez]

thanks

[@hasanammourah-t3b]

thank you

[@OnHOWGuy]

You're welcome

[@itsdaks9882]

thx
bro

[@CaptureCardCompany]

How do you add a emoji to the add to cart button

[@jasonslack7315]

Very informative vid.. I Sub'd.. Unfortunately this didn't work for me.. My code in my liquid theme looked different to yours, I need to change the colour of my 'add to cart' because it's too dark and you can hardly see it

[@OnHOWGuy]

Thanks, hey sorry i just this comment.
What theme are you using ?
Cheers

[@RollnBaked]

helped thanks

[@OnHOWGuy]

You're very welcome, Glad it helped.
Cheers

[@ellecools]

Clear, easy. Thanks!

[@equiluxetack7003]

Hello! Unfortunately this did not work for me. I am using the Broadcast theme. I tried placing the code directly above /body, then above and then beneath . Unfortunately, out of all three tries it did not work. What am I doing wrong?

[@OnHOWGuy]

Hey, sorry i dont have access to premium theme's code so i dont know anything about their structure, my codes are mostly tested on free themes because their code is available for developers.
Cheers

[@hamzabhatti4119]

Ummaaaahhhh you are awesome

[@saotaku8035]

How to change border color?

[@zackankilewitz8600]

Thanks bro

[@zackankilewitz8600]

I did this but it only changed 2 of the boxes.. the other 3 products stay the same..

[@MoeTamneh]

Great tutorial

[@OnHOWGuy]

Thanks, glad you think so.
Cheers

[@sumeshav1]

Thank you Bro 🙏

[@ourYoutube-l2n]

tysm best YT

[@OnHOWGuy]

You're welcome, glad i could help.
Cheers

[@Meentovi591]

"G" keep going asat

[@OnHOWGuy]

Thanks bro, i appreciate it.

[@Justin-ju3iv]

YOU ARE A G MY FRIEND

[@OnHOWGuy]

Thank you brother

[@aaronroberts6327]

w mans it worked

[@inasimulationwelive]

You are ruining my entire store with tour videos

[@OnHOWGuy]

Sorry, Then maybe stop and hire a dev to do the customisation.
Cheers

[@Griffmassyt]

Doesnt work

[@GSIMONIN6]

So you said to click it and scroll down to the description box and NOTHING happened.
and you just said to do it and didnt show.
????

[@saladmuxyidiin1681]

As always w ❤ ✔️

[@OnHOWGuy]

Thanks legend

[@greghuang3281]

Didn't work for impulse theme

[@Jcb-fx]

love u

[@LuisTorres-ms4gj]

it doesnt work for me i have impulse theme

[@hucksonTrigear]

I have impulse too. how come it doesn't work for us?

[@NewsNavigator101]

haven't worked for me

[@atanasatanasov5897]

this did not work for me :(

[@maeueh]

It didn’t worked, and I have the impulse theme.

[@darrellludlow]

Didn't work for me.

[@enzoenzo4205]

❤😊😊😊

[@naturelaxotize]

you did not answer Katie8151, I have the same issue

[@gracelgmo932]

product-form .quick-add__submit,
product-form .product-form__submit{
background: # ;
color: #
}
>/style>
#It was wonderfully helpful! :)

[@LovingGodLovingOthers]

thank you for all your videos!!!

[@yaniv2266]

Thanks!

[@karinn4599]

Thank you so much!!!

[@gdan1890]

how to change border color?