How to Change Buy It Now Button Colour On Shopify (2024) Add Any color

What is up guys, welcome to this new video of Techpress. I'm going to be showing you how to change the button here, color inside Shopify

So the very first thing you want to do is to, I'm going to hit into the X mark, go into your dashboard

Here, really, really easy, just focus into your dashboard of Shopify, focus into your actual theme, and let's focus into customize

So here into customize, what I want to do is to, I'm going to choose actually something really, really easy guys, so you can make sure that we are going to be able to change the color of our actual store

So in my case, we're able to import whatever image you wanted to. I'm going to hit now into select

And as you can see, we have the bros, our latest products, shop all. So if I go back here, I'm going to click here into shop all

And let's say like in a very easy way, you might be thinking that we just needed to click here

Of course, you wanted to cut down into change the color here of our actual button, but there's actually no way that we can do this directly from the actual button, but it's actually really, really easy to do it

So the very first thing I want to do is to, let's say I'm going to go for shop now

There we go. It's how it's going to be looking. Then later on, it says second button label

You can add a second button label if you wanted to. In my case, I don't want to do that at the moment

I'm going to go into my actual theme settings. So here into your theme settings, you wanted to focus now into your colors

So here into your colors, we have accent number one, gradient, accent number two, text color, outline button, and also used for text links

So here I have the background gradient number one. I'm going to change actually this element here

I'm going to go up and here into my colors. I'm going to do exactly the same thing with the actual background for changing the actual element, which is my actual button with the button

Of course, it appears as if this one is an actual outline section

After I have changed all my colors, I'm going to go and scroll a little bit down, choose my button

And here I wanted to disable the one that says use outline button style

So as you can see, everything has now been changed, but the actual button

So you don't have to worry about that. Let's do this manually. So I'm going to hit down into exit

I'm going to close this one, go into the three dots, hit into edit the code

So we wanted to do this manually. I'm going to hit down here into I'm going to try to focus into assets

And here into assets focus into base dot C double S. So I wanted to go into color custom properties

So I wanted to go and scroll all my way down. And here I want to just paste this code

This code I'm going to be leaving you that into the actual description

So what I wanted to do is just to leave it like that. As you can see, we don't have the background color

We have the color and the border color. If you want to check it out, what is the actual main color

What you want to do is to go and open in the tab. Let's go for colors codes

And here as you can see, we do have different color codes generator

So for example, I'm going to click here. And here, for example, I have this one

It says FF5733. So I'm going to copy this element. And here into this background color, I'm going to just delete this number and put this one

And there we go. As you can see, we have now this green color that we have just added

And the black one that we have just created here and to buy it now

So really, really easy to change those colors. So with that being said, guys, we have now reached the very end of the video

Once again, I'm going to be leaving you guys the code of the one that we have just added here manually here into our actual custom theme

So thank you once again for watching this video, guys. And don't forget to like and subscribe

And I will see you on this next video. Transcribed by https://otter.ai