Zazzle Blog

Fran from the Zazzle store CartoonizeMyPet, setup a website using the Zazzle API.  Read her story below to learn how to do an API yourself, and check out her Zazzle store CartoonizeMyPet!

I vowed that after my website was up, I’d write a tutorial on how to set up the templates buffet. Well it’s up, buffet and all: www.cartoonizemypet.com. So here we go:

If you haven’t already, please read the official guide. If the Create-a-Product API works for you, great! But if you find yourself staring at the screen wondering what you’ve done wrong, then this is the tutorial for you.

Step 1: Declare your domains
Before you do anything you should declare your domains. Just enter the domain name of where your API images will be stored. That’s the base domain name, not the folder location. So even though my images are in their own directory on my website, I put www.cartoonizemypet.com in the box.

Step 2: Create your Templates
Create some products with the image you’d like to change in them. On the image, tick the “Make this a template” box.

The “Product page label” is the name that will appear above the template on the product page. The “URL parameter name” is important because it tells the API what the image is. Make sure you keep this name identical for all the images you’d like to change at the same time. So for instance; I have all my Boston Terriers as ‘boston’, Labradors as ‘lab’ and so on.

One nifty thing you can do to really make your product page look smart, is uncheck the “Allow editing on product page.” This will stop the image appearing to the customer as a template, but still allow it to be registered by the template buffet!

If you’re creating the template products individually make sure you have the “This product is a template” box checked on the “Product Info and Pricing” page.

If you’re making your templates via Quick Create have “Templates for sale” chosen in the “Quick Create Product Options”

Feel free to hit “Customize it” on any of my products to see how I have them set up.

Step 3: Preparing your link
With a lot of different products/templates in a category, the Create-a-Product API can often get very confused. I found it much easier to just deal with the URL itself. Now don’t panic, it looks scary but once you pick it apart it’s really very simple. Let the dissection begin!

http://www.zazzle.com/api/create/at-
238606341631845955?rf=238606341631845955

Change the numbers in red above, to your own associate ID

&ax=DesignBlast&cg=196123651038034647

This tells the api which category to use. Replace the red text above with your unique category id. To find the right number, go to the category you’d like to use for your template buffet (in your actual store, not in My Zazzle) and copy the numbers at the end of the url. So for my Boston Terriers I went to the category and copied the category id at the end of the url:

&br=true

This turns on the category browser on the left hand side. If you don’t want it, just leave this bit of code out altogether.

&continueUrl=http%3A%2F%2Fwww.cartoonizemypet.com%2Fshop%2Fdogs%2Fboston-terrier%2Findex.shtml

This is the url of the link back that appears at the top of the page. Put in whatever link you’d like, but replace every /, with %2F. So my link above will go to:
http://www.cartoonizemypet.com/shop/dogs/boston-terrier/index.shtml

&rut=Go%20Back%20to%20Pet%20Selection

This is the text that will represent the link. Again you can put whatever you like, just change any spaces to %20.

&fwd=ProductPage&boston=http%3A%2F%2Fwww.cartoonizemypet.com%2Fshop%2Fpix%2Fdogs%2Fboston-terrier%2Fred-pi.png

Now comes the fun bit! Make the word in red the “URL parameter name” you assigned in Step 2, and the green url the location of the image you’d like to change it to. As before, make sure you change any / to %2F.

If you’d like to change more than one thing at once just add them to the end with &s. So if I had set up some template text with the URL param “bostontxt”, I could add:

&bostontxt=Boston%20Terrier

(Just change any spaces to %20)

Step 4: The completed link
Once you’ve constructed your url you just have to add some simple html to make it work. Here’s my completed link:

Code:

<a href=”http://www.zazzle.com/api/create/at-238606341631845955?rf=238606341631845955&ax=DesignBlast&cg=196123651038034647&continueUrl=http%3A%2F%2Fwww.cartoonizemypet.com%2Fshop%2Fdogs%2Fboston-terrier%2Findex.shtml&rut=Go%20Back%20to%20Pet%20Selection&fwd=ProductPage&boston=http%3A%2F%2Fwww.cartoonizemypet.com%2Fshop%2Fpix%2Fdogs%2Fboston-terrier%2Fred-pi.png&#8221; rel=”nofollow”><img src=”red-pi.jpg” alt=”Red Pied Boston Terrier” title=”Red Pied” /></a>

Check that it works and then create a different one for every image you’d like to swap in! Here’s my completed Boston Terrier category.

Step 5: Protecting Your Images
As you’ll be hosting your print ready files on your server, there’s a danger of people following the link back and pinching them. To protect your images folder I recommend using a .htaccess file. To do this you’ll first need to check that your hosting company allows it (in my experience, they often do. If you haven’t got hosting yet I recommend BlueHost)

Create a simple .txt file in Notepad (or equivalent) with the following:

Order deny,allow
Deny from all
Allow from zazzle.com

<Files .htaccess>
order allow,deny
deny from all
</Files>

Save the file and upload it to the images directory on your server (make sure your images are in their own directory because otherwise this file will stop people seeing your website.) Once uploaded – change the filename to .htaccess (yup with the dot at the front and no file extension at the end). This will prevent anyone but Zazzle from accessing the folder.

For more information on using .htaccess files see BlackQuoteProducts great lens on them!

Conclusion
I hope this has helped shed some light on the the template buffet! It really is fantastic once it’s working. This is my first run through of this tut so please let me know if anything doesn’t make sense so I can improve it. Happy buffeting!

This entry was posted on July 14, 2010 at 10:00 am and is filed under General News. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.