Embedding Your Zazzle Store in Wordpress

21 Comments »

December 1st, 2008 by Brian E. Young

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.

photo credit: jelene

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

21 Responses:

From Jim Lujan
December 18th, 2008 at 3:30 am
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..Alpha-Poster ([site])
From LisaMarieArt
December 22nd, 2008 at 4:02 am
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..Pardon – Whimsical Cat Magnet ([site])
From Dooni Designs
December 23rd, 2008 at 8:57 am
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.
From Brian E. Young
Twitter: Sketchee

December 27th, 2008 at 5:11 pm

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/
From Ben
December 30th, 2008 at 6:27 pm
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.
From Brian E. Young
Twitter: Sketchee

December 31st, 2008 at 1:13 am

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>
From Dooni Designs
January 1st, 2009 at 2:15 pm
try doing it with no space between the < and the ? before php.
From nick
January 5th, 2009 at 6:29 am
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
From Dooni Designs
January 5th, 2009 at 7:57 am
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!
From Brian E. Young
Twitter: Sketchee

January 5th, 2009 at 10:34 am

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?
From Dooni Designs
January 5th, 2009 at 10:48 am
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?
From nick
January 5th, 2009 at 1:05 pm
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…
From Brian E. Young
Twitter: Sketchee

January 5th, 2009 at 4:03 pm

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!
From Dooni Designs
January 5th, 2009 at 5:18 pm
I moved the css file into the css folder within the theme.. all fixed! Yippee!! thanks for the help! I am super excited.
From nick
January 5th, 2009 at 7:51 pm
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
From Brian E. Young
Twitter: Sketchee

January 6th, 2009 at 3:00 am

Nick: It’s the Highlight Author Comment plug-in:

http://rmarsh.com/plugins/highlight-comments/

It’s pretty simple and straight forward to use.
From nick
January 6th, 2009 at 2:37 pm
thanks!
From Casey
June 27th, 2009 at 11:42 pm
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.
From Jenni
August 9th, 2009 at 12:14 pm
Thanks! You are the best! This was very helpful.
From Paul Robinson
October 16th, 2009 at 3:20 pm
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 ..Could The Attached Image Soon Be Obsolete?
From amir
Twitter: amirebrahimnia

March 15th, 2010 at 2:00 pm
excellent post. glad I found it. trying it out this week at some point.