Add To Cart Button Tutorial – The Best Converting Buy Now Button To Use

Hi Guys,

Here is how to make the Belcher Button.The best converting buttonĀ  online today when it comes to turning prospects in to customers!

Best Converting Add To Cart Button To Use!

In case you are not in the scoop, this button was developed and tested by a chap named Perry Belcher, who is one of the ‘online’ guru’s in the internet marketing niche. It has been proven to be one of the most highest converting ‘Add To Cart’ buttons in use and can hugely increase your conversions. On that note, when you use the text ‘Add To Cart’ written on your sales button instead of Buy Now, you will sell more. WAY MORE ;)

That said, lets get on with the tutorial on how to make the darn thing shall we……..

If you just want to get the PSD files and don’t really care on how to make the thing (time is precious) you can Download The Working PSD Source Files Here

Step 1

Open up a new a document in photoshop (standard 72 D.P.I and RGB Format)

Add To Cart Button

Which will give you a box with these proportions

Add To Cart Button PSD

Step 2

The next step is to place a dotted box like below, unfortunately there is no easy way to do this in photoshop that follows the angle of the path so I made this in illustrator in a matter of minutes,

Feel free to download the working psd file so you can get the dotted red line by clicking Here
Add To Cart Button PSD

Step 3

Using the ‘rectangle tool’ which is the ‘grey box’ in the main tool bar, draw a rectangular box to similar proportions as below. It does not matter what colors you have activated as we will apply various layer styles in a minute to give it some color and features. Place it in the center on the vertical and just above the horizontal center.

Add To Cart Button PSD

Step 4

Open up the layer styles for the rectangle and then select the ‘Gradient Overlay’ option as below and apply the following layer styles. The exact colors do not really matter here, just try and get them as close to this as you can.

Apply a gradient like so…

Add To Cart Button PSD

Add To Cart Button PSD

And then apply a red stroke!

Add To Cart Button PSD

Keep playing around until you have something like this.

Add To Cart Button PSD
Step 5

Lets add the text. This can be anything but I strongly urge you to use the text ‘Add To Cart’ it has been proven to be the best converting buy now text around. Using the text tool write the words Add To Cart and align it in to the center of the button like so
Add To Cart Button PSD
Apply the following attributes (Arial Size 30pt)

Add To Cart Button PSD

Add To Cart Button PSD

Step 6

Drop in the following payment methods. Use any that you want to accept, just google image them and crop them to a suitable size. You can download the files to get the images used in this tutorial by clicking here

Add To Cart Button PSD

Step 7

Ok lets add the main text, this is a great area to explain what they will be purchasing or joining.

Add To Cart Button PSD

Write down your headline and then apply the following attributes.

Add To Cart Button PSD

Step 8

Lets add the text ‘Regular Price’ as it is a strong feature to add as it gives the prospect the value of a good deal.

Add To Cart Button PSD

In this example we used the following attributes

Add To Cart Button PSD

Now lets enter the price but make it a little smaller then before

Add To Cart Button PSD

Setting it to 14 pt is perfect

Add To Cart Button PSD

Make a new layer and draw a simple strike through it to give it the feel of a ‘Slashed Price’. Prospects love that !

Add To Cart Button PSD

Step 9

Now keeping to the same size lets add the Today’s Price, use the blue that you used in the Add To Cart Text as below

Add To Cart Button PSD

Add To Cart Button PSD

Step 10

The last thing to do is reiterate the call to action, that is ‘Add To Cart’ still use the same size text here as illustrated below. We will place the words “Add To Cart” yet again just to make sure it gets deep in to the readers mind.

Add To Cart Button PSDAdd To Cart Button PSD

End Result is here.

Download Source Files Here

Join Us For More Cool Stuff Here

  • oh,my god ! I found this article a long time. Thant's good article. I like reading this article like
    http://www.watches-user.com/guess-watches-guess... ! I will always come here reading. thanks a lot.
  • Great tutorial - simple to follow, even if you're not skilled with Photoshop. Thanks for providing some files to help get me started.
  • brandondrury
    Thanks for including the PSD file! No one has time to go through Photoshop tutorials. Even when I do mine always end up looking like a 3rd grader made them!

    I'm glad you had the insight to realize that!

    Thanks,
    Brandon Drury
  • Saraj
    Sick! thanks very much
  • GuyDub
    Thanks Guys

    Keep them coming

    Dont forget to download the psd files to save time!
  • SkullAttack
    Coooooool

    Thx man 5 stars
    *****

    So going to use that on my sales pages
  • PhotoshopNerd
    Thanks great tutorial very clear and easy to follow.

    I never new the words 'Add To Cart' generate more sales then using the words 'Buy Now'

    Very fascinating stuff thanks Guy

    Amy
  • Eddy
    Thanks Guy Top Tutorial and certainly going straight on my site!
blog comments powered by Disqus