How to add Zazzle products to Weebly

Thanks to a question in the Zazzle forum I was reminded to create a tutorial on How to add Zazzle products to Weebly. It's fairly easy but I wanted to show a step by step guide with screenshots. Pretty close anyway . I'll skip over creating an account and start with a new page. Weebly uses a drag and drop interface and also allows some HTML via their Custom HTML element.

Since Weebly has updated their designer there is no longer a Column Element. Columns are now created when you drag elements beside each other. This will save some steps when creating pages with lots of content.

Step 1: Create a new page

Log into your Weebly account and choose to Edit the site you wish to add Zazzle products to. If you haven't already you can now add a new page.

Step 2: Add the HTML Element

Now you can drag and drop the Custom HTML elements into your page. If you would like side by side images or other content drag more elements and place them next to the previous one. This is so much easier than coding side by side divs :). TIP: Each time you drag in an element the page will reload. Wait for it to finish loading before dragging in another. Now let's head over to Zazzle and get the products to add.

Step 3: Get Zazzle Product Links

This step is included for those just starting out with Zazzle. Open Zazzle in another tab or page so we can come continue working on Weebly. Make sure you are logged into Zazzle. If not the links you get will not include your referral id. Find the product you want to promote and hover your mouse pointer over the Share button then click Link on the little pop up.

On the page that pops up Right Click in the box of code and copy it. You don't have to pick an image now size as we can change that later.

Step 4: Edit Link Code in a text editor

This is an optional step but pasting your code into a text editor can make things much easier especially if you are going to add multiple products. If you are on Windows you can use Notepad but something like Programmer's Notepad is nice as it highlights HTML tags. I am running Ubuntu and using gedit.

Although there is more we can do with this code there are two main things I want to show you. First we want to add the nofollow value to our links. I won't go into all the reasons you may do this. The main one we are interested in is that lots of affiliate links can make a site look like a spam site to Google and other search engines. Nofollow can be added to the beginning or end of your links. Here is one example:

<a href="http://www.zazzle.com/american_flag_bald_eagle_sticker-217758562260420632?gl=tjustleft&rf=238927292395046421" rel="nofollow">

In the screenshot below I only added nofollow to the first link. There are four links in Zazzle's product code so make sure you nofollow each of them when using the entire code. It is a good habit to get into doing this on all affiliate links you include on webpages and blogs. If you are posting a link to a site like Twitter it is done for you.

Earlier I said we can pick the size for our image. A cool thing we can do with Zazzle image links is change the size by changin the three digit number before .jpg. Look back at the screenshot above and you will see I set the image to 200px. That is a good size when using four columns on Weebly. Another cool thing Zazzle has done is if you change the size to around 500 or more the image will include a watermark. In your face image thieves!

Step 5: Adding the Zazzle product code to Weebly

Now the moment we've been waiting for. Step by step also means long winded! Copy the code we just edited. Now go back to your Weebly page and click on the text that says Click to set custom HTML. It should now be highlighted. Now right click there and paste your code.

Once you paste the code it will look like this:

Now just click an empty space and your image and links will appear. Here is what I have after doing this in all four columns. In this example I dropped another Custom HTML element above the columns and added a heading and text.

Step 6: Publish your page

Sorry I didn't take a screenshot for this step. Once you are happy with your page look for the publish button towards the top right of the page and click it. Now you can share your new page and hopefully make some good sales. I hope this tutorial has helped you. If it has please share it with others. If you have any questions feel free to ask them in the comments.

Here's an extra tutorial to show how to Change the background color of Zazzle product links to match your website theme. Don't worry. It's short