September 23, 2012

Change the background color of Zazzle product links to match your website theme

Today a Zazzle shopkeeper posted a comment on this blog that led me to create a new Zazzle tutorial for you.

Anonymous said... hi, great advice, is there a way to change the background colour of the products? my t-shirts come up great using your methods but they have a white background which doesn't match my website theme. Thankyou

This is a great question and yes you can change the background color of Zazzle product links to match your website theme. To show how it's done I will use the Retro Town blog as an example. The background used is a Cream/Beige color.

If I add a Zazzle product link as is to the blog it will not look very good but if I make a small addition to the code the image will match the page nicely.

To match this we need to know the HTML (HEX) color code. We can find the code by digging through our site's theme template or even easier by using a color picker program. I use Colorname which runs on Linux systems. There are many free colorpicker programs (googled it for you) so you should be able to find one that runs on your operating system. Usually they have an eydropper tool which lets you click on the part of an image you want to find the color code of.

Now I know that Retro Town has the color code F0F7B7 what next? Below is a Zazzle product code without the divs. Notice the .jpg at the end of the image part of the code.

<a href="http://www.zazzle.com/50s_retro_travel_speaker-166486872903902484"> <img src="http://rlv.zcache.com/50s_retro_travel_speaker-p166486872903902484envro_325.jpg" alt="50&amp;#39;s Retro Travel Speaker" style="border:0;" /> </a>

To this add (without spaces) ?bg= plus your color code, in my case it's F0F7B7.

<img src="http://rlv.zcache.com/50s_retro_speaker-p166486872903902484envro_325.jpg?bg=F0F7B7

That's all there is to it! If you have any questions or my instructions are confusing just ask in the comments and I'll be glad to help.

June 26, 2012

The Lord's Prayer in Chinese Christian Shirt

This beautifully designed Christian shirt By PhotoPatch has the Lord's Prayer in Chinese calligraphy beside a branch of Cherry Blossoms. Matthew 6:9-13




See more Bible Verse Gifts and Cherry Blossom Gifts



June 21, 2012

Patriotic Bald Eagle T-shirts

The national bird of the United States of America, the Bald Eagle, has come to be known as a symbol of freedom. In just two weeks we celebrate American Independence. In honor of Independence day Zazzle artist have used the Bald Eagle in their Patriotic t-shirt designs.











See more Bald Eagle T-shirts


June 15, 2012

Why should I nofollow my affiliate links

This post is a response to a comment by a reader.


"Joy said... Thank you for the fantastic tutorial! May I ask about the "no follow" attribute? Is there a link to what that is about? I made an attempt at looking it up in google and my head is spinning. :-) I'm curious as to why it is a good idea and when to use it. (I get the "no follow" thing for comments that could be spammy or paid for links, but I'm new and not understanding putting a no follow on my product links. Thanks again for the super helpful tutorial. I'm going to start implementing it as soon as I have an idea of how I want everything organized."


Thank you Joy! Another reason for adding nofollow to links has to do with Pagerank. Very basically pagerank is a measure of the importance or authority of a page. Part of how this importance is figured is by how many other pages are linking to it. A link to a page is like an endorsement. The higher the rank of the page giving the link the higher the value of the endorsement.

When you link to a page not only are you giving it an endorsement you are also giving it part of the rank of the page you are linking from. Why it is done this way I'm not entirely sure. In the case that a page is just sending out links to any old site especially if the sites aren't very good I could understand the page loosing some authority.

In the case of marketing your Zazzle products or any other affiliate marketing your site will have many links pointing to another site. All those outbound links can drain your authority/pagerank. This is where nofollow can help. It basically tells search engines not to rank to that link. So it's sort of like a patch or putty keeping your page from leaking all over the place :).

Some may think Well I want to pass on authority to my Zazzle shop. However you really want that authority for your website that you are using to promote your products. The reason being if your site has no authority/rank or it's all being leaked out then it will be harder to show up in search. If your page isn't showing up in search, especially the first page, then all the hard work is for nothing.

Customers may find your designs in the Zazzle Marketplace but not at the volume you need. This is why we put our efforts into marketing outside of Zazzle. It is hard enough to get our sites to show up high in search results. We don't want to make it harder will all our product links leaking the life out of our site. This is not to take away from Zazzle whom we love. Zazzle is doing a great job on their end to show up in search. Take a grocery store for instance. They aren't creating the food. They are selling product from another company. If their shelves were just lined with pictures of food with a map to the manufacturer they would just be in the business of promoting the manufacturer for free.

I hope this helps you Joy and everyone else. If I missed anything in these very basic explanations just let me know where you need help. Also remember that the web and search algorithms are ever changing so all this may not apply in the future.

May 29, 2012

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 smile. 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.


weebly create page screenshot



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.



screenshot weebly add columns

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.



Zazzle product link screenshot


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.

zazzle copy link

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.


edit zazzle code

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!smile

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.


You must click the html element before pasting the code

Once you paste the code it will look like this:


weebly html after pasting

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.


Zazzle products in Weebly four column

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 smile

April 4, 2012

40% OFF T-Shirt Sale

Another great T-Shirt Sale from Zazzle! Use Code: FINDSHIRT4ME during checkout for your discount. Ends Sunday April 8, 2012 at 11:59pm PT.
Shop Now
Funny Haggis zazzle_shirtBald Eagle Silhouette zazzle_shirt

March 26, 2012

30% off Sale on White T-shirts at Zazzle

30% of the white t-shirt net sale price will be deducted when one or more qualifying white t-shirts are purchased. The net sale price is the price of the product (excluding shipping and taxes). The coupon code SHINEONSPRNG must be entered during checkout to receive the offer. Offer is valid through March 29, 2012 at 11:59 PM PT. Shop Now

March 5, 2012

Funny Anti-Daylight Saving Time T-shirt

Funny anti daylight saving time t-shirt at Zazzle

Pictured above is a wonderful nurse that did home visits to help me care for my Grandfather before he passed away last year. A couple of weeks ago she gave me a surprise by ordering the shirt she is wearing from my main Zazzle shop. I made the design a few years ago after my Grandfather told me how much he hated Daylight Saving Time. He really liked it smile.

Tux Smash clock mugTux-anti-daylight-saving-time mousepadTux-smash-clock shirtAnti Daylight Saving Time-Penguin Smashes Clock shirtTux Smash Clock-Anti Daylight Saving Time printPenguin Anti Daylight Saving Time T-shirt zazzle_shirt

Funny Anti Daylight Saving Time Poster



Thanks to Tshirts for the comment. After reading I found a mistake in my design settings that would cause White in this design not to show on dark colors. A new shirt has been added with the proper settings. If you would like a Black shirt just click the one shown above. If you want a different style it can be chosen from on that shirt's page.