Huge sums of money have been spent testing the colour of the Buy It Now buttons.
The Buy it Now button autopopulates as black or white on many Shopify themes, and black or white buttons are generally considered to be non-converting colours. (That is to say, they discourage buyers from clicking. To be more to the point, they’re ghastly – avoid them!)
A buy button also needs to contrast with the colours around it, so although black contrasts with white, a black button does not convert well. And while red is a highly converting colour, it won’t convert if the background is also red. You might think red is bad because you stop at red traffic lights and think green is good because you go at green traffic lights, but those opinions are not supported by evidence.
Numerous studies have tested green buttons against red buttons and found that red converts better than green.
In fact, red or orange buttons convert well, and both convert better than green. Go to Amazon and look at the colour of their buy buttons. The tone of the orange colour has changed over the years. It might seem a small change, but rest assured, Amazon has spent a fortune testing the button colour.
Blue is another colour which tests fairly well. Green does too, but neither of these convert as well as red or orange.
One thing is certain, clear or white tests horribly as does back, so avoid these.
So then, how do you change the colour?
Change the colour of the Buy it Now button.
Select Online Store from the menu and click Customize.
Look for the brush icon at the far right of the page, near the top.
Click on the brush icon.
Click on Colors.
To make sure you can see the Buy it Now Button while you are doing this, go to the top of the page where it says, “Home page.”
Click in the box and a dropdown box will appear.
Select Products.
Then select Default product.
Now you see your Buy it Now button.
Accent 1 on the default theme is the colour used for the Buy it Now button. Change the colour to change the colour of the Buy it Now button.
If your current button is black, look to see whether Accent 1 or 2 is black – that is the one you will need to change.
You can select a colour by clicking on it or you can copy/paste a hex code. (If you don’t know what a hex code is, go to the end of this blog post.)
Now look across to the right of the screen and see if your button is red.
If you go back to look at the colours, “Solid button label” is generally the colour of the text on the Buy It Now button.
If you used a lighter shade of red, you would change the text to black.
Black is a good text color as it converts well. However, only use it if it contrasts well with the colour of the button.
To find out how to change the colour of the text, keep reading.
IMPORTANT! When you change colours, it will change the colour of other sections in your store. Make sure you double check.
Change colour of Add to Cart button.
On the Dawn theme (the default Shopify theme) and with most other themes, you cannot change the colour of the button with one of the above settings and will need to do the following.
Select the hex code of the button colour you want it to be. Swap that hex code for the hex code F45E5E below. (If you don’t know what a hex code is, keep reading as I explain it at the end of this blog post.)
This the orange hex code with black text,
You will add this to base.css. Copy and paste.
.product-form__submit { background: #F45E5E !important; color: #ffffff !important; }
This is how to find the base.css.
Go to your dashboard and click Online Store.
Click the 3 dots to the left of “Customize.”
Click Edit Code.
This appears.
Scroll down until you find Assets.
Click on Assets, and you will see base.css
Click on base.css and this appears.
Scroll to the very bottom of that page.
I am going to get you to copy and paste the following, but first!!
Every time you do something with css, take a screenshot of what it looks like BEFORE you do anything, and also copy and paste it to a safe place. That way, if you do stuff up something, it will not matter! You can put it back the way it was.
Remember!!
Select the hex code of the button colour you want it to be - I havr supplied you with the Amazon orange. Swap that hex code for the hex code F45E5E below.
Select the hex code of the text colour you want it to be. Swap that hex code for the hex code 000000 below. 000000 is black – if you want the text to be white, leave this as it is.)
At the very end of that page, click in the next empty line and copy and paste.
Click SAVE.
Remember to copy all of it. See the . before product and the ;} after important? Copy those too – the whole thing!
This is the Amazon organge hex colour.
. .product-form__submit { background: #FFA31C !important; color: #000000 !important; }
And when you go back to your Add to Cart button, you will see it is now a colour!
Don’t worry if it doesn’t show at first in your customize section – go to your live site to check.
What is a hex code?A hex code is a way to represent a color in RGB format. It combines the amounts of red, green, and blue in a color. It appears as 6 letters/numerals/combo of letters, numerals.
There are several free sites where you can upload an image, click on any colour in the image, and it will at once generate a hex code for you.
