Monday
Dec012008
Embedding Your Zazzle Store in Wordpress
I have just integrated my Zazzle store into this Wordpress blog thanks to Zazzle's Store Builder feature. Take a look at the result on the Sketchee.com Art Prints Shop Page. You can include items from any shop, not just your own, and you make the referral fee on all sales. While there is documentation on the Zazzle site, this article will focus on specifically embedding the store builder in a Wordpress page.
First, you'll want to download the store builder files. You'll have to customize the files with your identifying information. Open the file configuration.php, in the folder include, using your favorite text editor. You'll see some fields in quotes marked to be edited. Your contributor name or contributor handle is the name of your gallery on Zazzle.com. Your associate id number can be obtained by logging into Zazzle. Upload the files anywhere on your site that supports PHP using your favorite FTP program. This could be in your Wordpress theme folder, although I installed mine in a root level folder. You can call it whatever you like, for example I called the folder /storebuilder.
In Wordpress, you'll want to make a copy of the template that you'd like to embed the store into. I made a copy of my Pages template, pages.php, and renamed it shop.php. This is in the wordpress folder under /wp-content/themes in the folder of the current theme. Log onto your site admin panel and navigate to the Theme Editor in Wordpress. In Wordpress 2.6.5 this is located under the Design Tab. Select shop.php and above any other code you will need to insert the following code; the Template Name can be anything you want:
Next, we'll edit the shop.php template to add the shopbuilder code. This can be anywhere on your template. Note that the path must be a full server path as in the example code. There are a ton of customization options to be aware of. The full description of each is available in the configuration.php that we had edited earlier. These variables can also be set there, but it is more versatile to do it from your templates since you could have multiple pages or multiple includes of the storebuilder on one page! The productType variable lets you choose a product (shirts, stickers, etc) by using one of the numbers form configuration.php. If showPagination is true, it will allow your shop page to have several pages of products to navigate through. showSorting lets users choose between sorting by popularity or date added. gridCellSize is the size of the image (tiny, small, medium, large or huge).
Using the theme editor, you'll need to enter a line in the header.php of your Wordpress theme. This should placed between the <head> tags. Note that if you named your /storebuilder directory something different, you'll have to change this to reflect that. You may also want to put this css file in the theme's folder instead and refer to it there; that way it could be modified in the theme editor although you probably won't need to touch it. This contains the styles that the store uses and are already named so not to conflict with your blog styles:
<link id="ext_css" rel="stylesheet" <br/>type="text/css" href="/storebuilder/css/zstore.css"/>
Finally, create a new Wordpress page (Write > Page). You can write a little bit of intro text as the post itself. The most important thing is to scroll down under Advanced Options for the page. Look for Page Template and set that box to the Template Name you created above. You may also want to disable comments for this page if your theme isn't already set to do this. Publish the post.
That is pretty much it. The item links in your store even go to a version of the Zazzle's product page with a smaller header bar to minimize their branding on your store. If you have any difficulty, feel free to post here or at the Zazzle forum.
Update: If all of this sounds too technical or just too time consuming for you, try out the zStore Helper Plugin
First, you'll want to download the store builder files. You'll have to customize the files with your identifying information. Open the file configuration.php, in the folder include, using your favorite text editor. You'll see some fields in quotes marked to be edited. Your contributor name or contributor handle is the name of your gallery on Zazzle.com. Your associate id number can be obtained by logging into Zazzle. Upload the files anywhere on your site that supports PHP using your favorite FTP program. This could be in your Wordpress theme folder, although I installed mine in a root level folder. You can call it whatever you like, for example I called the folder /storebuilder.
In Wordpress, you'll want to make a copy of the template that you'd like to embed the store into. I made a copy of my Pages template, pages.php, and renamed it shop.php. This is in the wordpress folder under /wp-content/themes in the folder of the current theme. Log onto your site admin panel and navigate to the Theme Editor in Wordpress. In Wordpress 2.6.5 this is located under the Design Tab. Select shop.php and above any other code you will need to insert the following code; the Template Name can be anything you want:
< ?php
/*
Template Name: Shop
*/
?>
Next, we'll edit the shop.php template to add the shopbuilder code. This can be anywhere on your template. Note that the path must be a full server path as in the example code. There are a ton of customization options to be aware of. The full description of each is available in the configuration.php that we had edited earlier. These variables can also be set there, but it is more versatile to do it from your templates since you could have multiple pages or multiple includes of the storebuilder on one page! The productType variable lets you choose a product (shirts, stickers, etc) by using one of the numbers form configuration.php. If showPagination is true, it will allow your shop page to have several pages of products to navigate through. showSorting lets users choose between sorting by popularity or date added. gridCellSize is the size of the image (tiny, small, medium, large or huge).
< ?php
// configure Zazzle Store Builder display
$_GET['productType'] = '';
$_GET['showPagination'] = 'false';
$_GET['showSorting'] = 'false';
$_GET['showProductDescription'] = 'false';
$_GET['showByLine'] = 'false';
$_GET['showProductTitle'] = 'true';
$_GET['showProductPrice'] = 'false';
$_GET['gridCellSize'] = 'medium';
$_GET['showHowMany'] = '100';
include "/home/FULLPATH/www/www/storebuilder/include/zstore.php"; ?>
Using the theme editor, you'll need to enter a line in the header.php of your Wordpress theme. This should placed between the <head> tags. Note that if you named your /storebuilder directory something different, you'll have to change this to reflect that. You may also want to put this css file in the theme's folder instead and refer to it there; that way it could be modified in the theme editor although you probably won't need to touch it. This contains the styles that the store uses and are already named so not to conflict with your blog styles:
Finally, create a new Wordpress page (Write > Page). You can write a little bit of intro text as the post itself. The most important thing is to scroll down under Advanced Options for the page. Look for Page Template and set that box to the Template Name you created above. You may also want to disable comments for this page if your theme isn't already set to do this. Publish the post.
That is pretty much it. The item links in your store even go to a version of the Zazzle's product page with a smaller header bar to minimize their branding on your store. If you have any difficulty, feel free to post here or at the Zazzle forum.
Update: If all of this sounds too technical or just too time consuming for you, try out the zStore Helper Plugin
Join our NEW flickr group to share and discuss your art and design work. Your work may even be featured on the blog if you join.
Enjoy this post? You can get new blog posts by email, follow with Google Reader, like our Facebook Fan Page or check out @sketchee on Twitter
21 Comments 1 Reference | tagged Blogging, Wordpress, Zazzle, business 
Reader Comments (21)
Hi Brian,
Just discovered the Sketcheebook podcast. Very cool stuff. I do independent animated shorts (www.youtube.com/jimlujan). Your show is very useful and informative. Just thought I'd say hello.
-Jim
Jim Lujans last blog post..http://www.jimlujan.com/2008/12/alpha-poster.html" rel="nofollow">Alpha-Poster ([site])
Thanks for this! I can finally put my Zazzle products on my blog without resorting to copy and paste all the time! Excellent. I've bookmarked the page so I can try this after work. =D
LisaMarieArts last blog post..http://www.zazzle.com/pardon_whimsical_cat_magnet-147104205549740900?gl=LisaMarieArt" rel="nofollow">Pardon - Whimsical Cat Magnet ([site])
Well after fighting with different templates and many hours, I finally got a page to show. HOWEVER, even though I put all the required info in the actual template, it will only pull the info from the configuration file... thus, I can only do one page. I don't know if it is because I have different instances of the storebuilder files on my server or what.. even tho they are in different folders and I made sure I called them up correctly.
Dooni: Yeah it took a lot of tweaking to smooth out the bugs myself. Try to avoid duplicating anything in the configuration file that you want to control through the template. You may also consider not having different instances of the storebuilder files. I only have the one. If that doesn't help, the people at the Zazzle forum might have some ideas: http://forum.zazzle.com/
Great idea to post this information, but even after following the steps I cannot get this to work. I don't know if it's because I'm using wordpress 2.7 or what, but could you please post examples of the how the code fits in with the shop.php template as a whole? Everytime I enter the code, it shows up on the web site as exactly that and not hidden, bumping my header down and what not. I'm confused as to how exactly the coding as a whole appears on the shop.php page, so if you could show me that code that'd be awesome. Thank you.
Hi Ben, the code above should appear anywhere between the html tags. The most important thing is to make sure you have the < ? php ... ?> tags. Here's a sample shop.php template that should help with the placement:
<?php
/*
Template Name: Shop
*/
?>
<html>
<head>
<link id="ext_css" rel="stylesheet"
type="text/css" href="/storebuilder/css/zstore.css"/>
<head>
< ?php
// configure Zazzle Store Builder display
$_GET['productType'] = '228';
$_GET['showPagination'] = 'false';
$_GET['showSorting'] = 'false';
$_GET['showProductDescription'] = 'false';
$_GET['showByLine'] = 'false';
$_GET['showProductTitle'] = 'true';
$_GET['showProductPrice'] = 'false';
$_GET['gridCellSize'] = 'medium';
$_GET['showHowMany'] = '100';
include "/home/PATH/storebuilder/include/zstore.php"; ?>
</html>
try doing it with no space between the < and the ? before php.
Hi Brian,
I've got this all to work but my store items are all coming up vertically down the page one after the other. Is there a trick to getting them to use the grid? I might not be linking to my zstore.css correctly. Isn't that link supposed to be in the header.php file?
thanks for your great post!
Nick
Nick, I am having the same issue. No matter where I put the line to include the css it doesn't seem to pick it up. For now I just set the images to huge so it doesnt look funny. I am bummed out though. If you figure it out let me know!
Nick, do you have a link to a page where I can see what's happening?
Dooni, I looked at the code on your site. When I tried to load your CSS file at http://www.doonidesigns.net/wordpress/css/zstore.css it wouldn't open. Can you confirm that the file is there?
I just went into my web control panel and it is there.. even though when I click to view I get a blog page saying nothing is there. hmmm Maybe I should move it to a root folder?
Brian,
sorry but my site is still in maintenance mode so i can't give a link just yet. I figured out 2 things that were causing the problem. My first problem was that the code written above that goes in the header wasn't attaching the zstore.css stylesheet to the site. Instead of using the zstore.css file, I copied the code from zstore.css and put it into the main css for my site. I think its safe to assume that all these people having this verticle problem is do to a stylesheet problem or lack there of.
I then had to delete the following so the stylesheet didn't conflict with the rest of my site:
/* Fix for Mozilla browsers for floating elements...best not touch this! */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Seems to work fine now...
Nick: Great I'm glad it was able to be fixed! On my site I have it kept the css file in the theme folder.
Dooni: Let us know if it works after adjusting the css path or if you have any trouble!
I moved the css file into the css folder within the theme.. all fixed! Yippee!! thanks for the help! I am super excited.
Glad i could help contribute...i couldn't have done it without your post. Brian, may i ask how you're able to highlight your comments as an administrator? I would love to add that feature on my site...thanks.
Nick
Nick: It's the Highlight Author Comment plug-in:
http://rmarsh.com/plugins/highlight-comments/
It's pretty simple and straight forward to use.
thanks!
hi there...when entering the code in the shop.php file, you mention to add it between the html tags...what if our template doesn't have html tags?...i'm just using a copied page.php file...i just can't seem get the zazzle items to load in the page...i know my server address is correct as i can test it with a direct url load...any thoughts would be appreciated, thanks.
Thanks! You are the best! This was very helpful.
Hi, Thanks for mentioning the Zstore plugin on your blog. I hope it helps anyone who finds embedding the store builder in WordPress.
Thanks again. :)
.-= Paul Robinson´s last blog ..http://return-true.com/2009/10/could-the-attached-image-soon-be-obsolete/" rel="nofollow">Could The Attached Image Soon Be Obsolete? =-.
excellent post. glad I found it. trying it out this week at some point.