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!

QUICK START GUIDE
I thought it might be handy to have a quick start guide; so you can see the API in action before really needing to understand how it works.

Create a new product and add some text (it doesn't matter what it says, or what type of product it is.) Select the text and click on the "Advanced options" cog button:



Tick "Make this a template object" to open up the template options. Change the "URL parameter name" to "mytext"



Post the product for sale.

Now open some sort of simple writing program (even this forum or an email prog will do) and copy and past the following into it:

http://www.zazzle.com/api/create/at-0000000000000000?rf=0000000000000000&ax=Linkover&pd=888888888888888888&fwd=ProductPage&ed=true&mytext=Magic!

(NB: Don't worry about the colors of the text, it's just to help identify sections for this guide.)

Change both sets of 0000000000000000 to your associate ID (found here)

Now go to the product page of the product you just created and scroll all the way to the bottom until you find the "Product ID." Replace 888888888888888888 with the product ID.

Finally change Magic! at the end of the link to whatever you want.
If you want to use multiple words just use %20 instead of spaces.
Eg "Magical API Text!" would be Magical%20API%20Text!

Copy and paste the completed link into your browsers address bar and go. You'll be taken to your original product but the text has been magically changed!

Congrats! You just made your first create-a-product!

This exact example used brilliantly: http://ed.caggiani.com/hello.html
Taking it a step further: http://www.urbandictionary.com/products.php?defid=3322189
More ways to use it: http://www.zazzle.com/sell/developers/sampleintegrations

The best thing really is to just dive in and experiment. You can't go wrong really! Start by messing with the link you just made. Change the text at the end and see what happens. Once you're confident enough with that carry on reading for my full tutorial and start applying it to images and multiple products at once (that's when it really gets fun!)


FULL TUTORIAL
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" (that one is easy to miss!)



(Feel free to hit "Customize it" on any of my products to see how I have them set up.)


Step 3: Creating your link
Now at this point there are 2 ways to go.
The Template Link adds an image to a single product.
The Template Buffet adds an image to multiple products.

We'll start with the easier Template Link. If you're only interested in the Template Buffet then skip ahead to Step 3b.


Step 3a: Template Link
There are less "moving parts" in links vs buffets, so no need to get down and dirty with the code for this. The wizard on this page works very well.

Enter your Template ID
This is rather misleading, but what it actually wants is the Product ID of the product you'd like to use. The product needs to have a template set up (see Step 2.) Find the Product ID on the product page; it's underneath the product description, just above the creation time stamp.



Once you add your Product ID to the Template ID box and hit "OK" more options will become available...



Enter placeholder data and other options
The product I chose to use is a Mug with custom text and a templated Fawn Pug image.
http://www.zazzle.com/i_love_my_pug_mug-168870002140721116

If I want to, I can change the text here, so when the user clicks on the link it will read something other than "Pug."

Here's the clever bit... I have a selection of pug images of different colors on my website. Rather than making a new mug for every pug color, I can just change the image URL here to tell it to swap in a new image. I add the URL to my black pug here.

When the link is clicked, go to
Design Tool: Takes the user straight into the design tool (so they don't have to click the "Customize it!" button.)
Product Page: Takes the user to the standard product page (have to click customize button to enter the design tool)

Allow personalization (Only optional if "Product Page" is selected)
Ticked: "Personalise it" menu open on right hand side of product page
Unchecked: All templates locked on product page

Tracking Code (Optional)
Add a label here if you'd like to see where your link was clicked. Eg if I'm going to use this link on my own website I could put "mysite" here. Or if I was going to post it on Facebook, I could label it "facebook." If someone then uses the link to buy something I can see if they came from my website or Facebook.

Image Tracking Code (optional)
Add something here that describes the changes the link has made to the product. Eg if it changes my default Fawn Pug to a Black Pug, I'd add "black" here so that I can see which color the customer bought.

Try Link Now
Click here to test the results of your link. If it's correct you can copy the finished Link URL from the box.

Here's my finished link (turns default fawn pug into black pug)


Making more...
I can then go on and create a link for every pug color I have. Each one will link to the same mug, but swap in a different pug color.

If you'd like to add the same image to multiple products at once then you need the Template Buffet. If you're happy with what you've got so far jump ahead to Step 4.



Step 3b: Template Buffet
IMPORTANT: For products to show in the template buffet they MUST be set to "Public" visibility.

With a lot of different products/templates in a category, the Create-a-template buffet wizard can often get rather 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!


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


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 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:



This tells the api which store the products are in (necessary since account merging in Apr 2011) You'll need to change the numbers in red to your own store id.

To find your store id:
1) Go to your Public Products and from the left hand menu click on the store you'd like to use for your API.
2) Copy the number code from the address bar at the top of your browser window. Eg mine is 250969133790454844

&br=true

(Optional) This turns on the category browser on the left hand side. If you don't want it, change true to false. Click the links to see it in action:
See &br=true
See &br=false

&rcg=196123651038034647

This can be added after &br=true to make the category browser show a subcategory rather than all the categories in the entire shop. Just change the red text to the category id you'd like to use.

As there currently isn't a product type drop down menu included in the template buffet I recommend creating a sub category for every product type and then using this to turn the left hand menu into a product type browser.

So within my Boston Terrier category I create sub categories; Apparel, Bags, Binders, Envelopes etc and manually move all the T-Shirts to "Apparel", bags to "Bags" and so on. This has the advantage of letting you leave out product types that you don't have (eg Rack Cards) and create ones you do (eg Photo Frames and Gift Tags.)

Here's it is in action




(Optional) These let your customers quickly interact with any template objects within the buffet. Click the links to see how they look:
See &ed=true
See &ed=true&eds=Inline
If you don't want either of these options, just leave them out altogether.




(Optional) Displays the products sub titles on the template buffet page. Leave it out if you'd rather not see them.

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




(Optional) Add a label here if you'd like to see where your link was clicked. Eg if I'm going to use this link on my own website I would change "TRACK" to "mysite." Or if I was going to post the link on Facebook, I could label it "facebook." If someone then uses the link to buy something I can see if they came from my website or Facebook.




(Optional) This label is particularly handy because it lets you see which image was bought by the customer. Without it all I see is they've bought a Boston Terrier product. By adding a label for each Boston color I can see in my royalty history which EXACT color they've chosen. So for my Red Pied Boston I'd change "IMAGE" to "red-pi"





When your customer clicks on a product in your buffet would you like them to go to the product page, or straight into the design tool (as if they've just pressed the "customize it" button.) Pick one or the other (don't use both.)
See &fwd=ProductPage
See &fwd=DesignTool
(Click on a product to see the difference)



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 attach them to the end with &s. So if I had set up some template text with the URL parameter "dogbreed", I could add:

&dogbreed=Boston%20Terrier

(Just change any spaces to %20)


Putting it all together
Once you've constructed your link you just have to add some simple html to make it work. Here's my completed one:



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 4: 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! If you're still confused the best thing to do is to just have a go. It will start making more sense when you see it working with your own images.

I've kept it simple here with just 1 image getting changed at a time, but you can have multiple templates active at a time. You don't even have to use images, just changing the text will work too (great for slogan products!)

You can even link in p h p and get Flash to feed into the buffet like I did for my Catoonizer! (Don't ask me how that works though, I had to hire a coder to get that one set up!)

Happy APIing!


GENERAL TIPS
- If you want to experiment without worrying about your customers seeing what you're up to then you can set up a hidden category to publish your API products into, or a whole new private store.

- If something doesn't work, check that the URL parameter name(s) is correct. It is the label that tells the API what text/image you are talking about.

- I recommend adding the URL parameter names at very end of creating your design. That way you won't accidentally copy and paste one and have the same param name on 2 different texts/images.

- If you actually WANT two text/image objects to change in tandem (eg the same text/image on both sides of a mug) then just give them the same URL param name.

- If you're working with images make sure you declare your domains first. All you have to do is add the domain name of where the images are stored. For instance I keep all my images on my website, so I declared www.cartoonizemypet.com and cartoonizemypet.com (I'm not sure exactly if both with and without the www are necessary, but just in case I have both)

- For products to show in the template buffet they MUST be set to "Public" visibility.

If I think of anymore tips I'll come back and post them!


Further Reading
Official API Documentation
Example API stores
Lets see your Template Buffet Stores!
Protecting API images from being stolen
Learning simple HTML

Thanks!

Looking forward to seeing what people do with this guide. Remember to post your links here!

Ooo fab! That part of my tut was a bit sketchy because I don't really know that much about them myself, just what I discovered Googling about. Wish I'd known about your lens back then! Added a link to it in the first post, so it can help others, thanks!

I saw that and reTweeted it too ! CONGRATS !

As far as my store is concerned the best thing has been less time creating products, leaving more time to design. My guinea pigs category is the perfect example. There are 228 different piggies and each one is on 178 products. Without the API I would have had to add products for every single color, that's 40,584 products!!
With the API I only had to create 534 (3 x 178) products, one set for each of the hair types (smooth, long and scruffy.) QC is great and all, but 228 goes through to make 40k worth of guinea pig products? No way would I have even considered it!


Other benefits:
- When someone writes and wants a new color, all I have to do now is draw it, upload and add the right link on the page. This can take a matter of minutes, rather than having to put everything through QC and make 178 new products every time.
- If I discover a mistake on one of my images, (eg there's a line out of place,) all I have to do is replace the image on my server. The products can remain unchanged.
- Managing tags, descriptions and prices is much easier. Changing for one, changes it for all.
- If you run it on an external website, each template buffet link acts as a referral link, giving you an extra 15%!
- I no longer groan when Zazzle brings out a new product. It was horrible before because I knew I'd spend the next weeks/mths adding them for everything. Take the new envelopes; I'll probably add 2 designs for each pet; a hearts one and a regular one. That's 16 envelopes per guinea pig, which would have been 228 more goes through QC to make 3648 envelopes. Now I just do it 3 times to make 48 and I'm done!


Here are some other ideas off the top of my head:
- An "add your photo here" store; where the customer can instantly add their picture to every single product.
- A store full of family crest products where adding a new design is as easy as uploading a picture and adding a link.
- Business cards and letterheads that your customer can fill out and then browse through them all.

Fran, this is wonderfully done! Thanks for putting all this together. Your site looks great and the degree of customization possible is amazing.

This might be a bit off topic, but wondering if you did this all in WP?

oops, sorry! WordPress. Or did you actually create a regular website?

Thanks for the link; I'll check it out

This is a great thread, thanks for posting it.
I've been really lost and frustrated with trying to make templates but I think this will really help.