Adding a button to your listing

This allows you to create a clickable button in your listing  A button like this! That you can use to direct customers somewhere.
To use it as a way a customer could purchase a product from you – you could make the button link to a “paypal.me” link that will direct the customer straight to paypal to pay you.  Or use it to click to email you to place the order and you can invoice the customer manually. You could also use it to direct customers to a facebook post, your etsy/ebay store or anywhere else you like.

Click here to see an example of a product using a button


To make a button you need to use the button shortcode.  To do that you need to type in this code below  (the codes are done as an image because otherwise you couldn’t see it, so you’ll have to type it in the same as you see in the image)

Change the “http://www.clothpadshop.com” part with where you want the button to go to. You MUST include the  http://  part.   You can change the “Buy Now” part with whatever you want to say instead.

Change the Red bit to your url (eg your paypal.me link) and you can optionally change the purple part to say something else.  It will look like this on the page:

Buy Now

If you want to make the button into an email button.  Instead of a website link, you need to put in a mailto code (mailto: “you@youremail.com”) with your email address.  That will look like this (obviously use your own email address, not this one!)

Email Me  or    obsidian@obsidianstar.com.au

Now this might not work for everyone, because what it does is load a blank email using the person’s email client (if they have one) – so if the customer doesn’t have an email client installed on their computer, then clicking it won’t do anything.  But it is an option for you if you don’t have a facebook page or website to direct people to.  If you put the button text as your email address, then if the button doesn’t work for the customer, they can see your email address to use to email you.


Now… if you want to be extra fancy and change the colour (hmm, let’s say…. PURPLE!or  CPS Teal ) that’s pretty easy to do as well.

When you’re making the button, you need to also put in the code for the colour.   There are 2 ways to do this.  Either using set colours, or choosing the exact colour you want.

To use the set colours, you need to add the code for the colour  – using the name of the colour from the options below.  (You need to spell it “color”, the British spelling of “colour” won’t work)

Red Orange Green Aqua Teal Purple Pink Silver

 

If you want a specific colour then you need to use a “hex” colour code for the colour you want.

Click here for information on how to find a colour code

Go to https://htmlcolorcodes.com  Drag the little round icon around until you find the exact colour you like – you can slide the marker up and down the rainbow column on the right to change the colour.   Once you have the exact colour you want, look up the top where it says “HEX” and copy that code – including the # symbol.  That is the hex code for that colour.   Copy and paste that code into your button code

The code for a custom colour is a little different, you need to type in bg_color=  (You need to spell it “color”, the British spelling of “colour” won’t work) and then put the hex code inside speech marks – don’t put any spaces between all that.  For example:  bg_color=”#673c9e”  Which will look like this:

(note: don’t copy and paste the code, because for some reason the ” marks are coming up the wrong way around and that will paste with the code and make your button not work properly – so type it in yourself)

The Cloth Pad Shop teal colour to match the website buttons is #5885A1  Matching CPS

The button will then save with extra code to make it whatever colour you chose – Pretty!

 

You can also add a paypal logo under the button to help customers know you’re taking them to paypal

Buy Now