Custom layouts for your Zazzle store

Tutorial by SugarVsSpice

I had quite an adventure setting up my store yesterday and figured it might be useful to share what I did. I’ve done HTML and a bit of CSS before but never anything like this so you definitely don’t have to be a pro to do it. The code looks scary at first but the more you fiddle with it the more sense it makes (although admittedly there’s still quite a bit of it that makes no sense at all!)

Heres my store to show you what can be done with these guides;
http://www.zazzle.com/SugarVsSpice

Before you get started
Setup another gallery to be your sandbox (they’re free!)
Make it private; MyZazzle > Store > Store Settings > Basic Information > Store Access; “Make this store private”

If you need to find any code you can use Ctrl+F in Firefox (probably works in other browsers too but I haven’t tried) and be sure to Validate/Preview regularly!

If you don’t have your own website to put pictures on grab yourself a free PhotoBucket account to upload them to.

Ok let’s go…

Background Image
Find this in Appearance > CSS
#mainShell {
width:100%;
background-color:#<z:color name=”PageBackground” />;
padding-bottom:40px;
/* add main background image here, if desired:
background-image:url();
*/
}

Change to…
#mainShell {
width:100%;
background-color:#<z:color name=”PageBackground” />;
padding-bottom:40px;
background-image:url(“http://www.yourdomain.com/background.jpg”);
background-repeat: no-repeat;
background-position: top;
}

I made my background image 1870px × 949px (the same size as the one on the clonewars store, I figured they’d know what they were doing)

If you’d like your background to repeat change no-repeat to either; repeat, repeat-x or repeat-y

Custom Header
Find this in Appearance > CSS…
#pageMantle {
overflow:hidden;
width:900px;
<z:mantleimage />
}

Change to…
#pageMantle {
overflow:hidden;
width:900px;
height:200px;
background-image: url(“http://www.yourdomain.com/header.png”);
background-repeat: no-repeat;
background-position: top;
}

If your new header is taller than 200px just change the height to match.

Remove underline from links and make them bold
Find in Appearance > CSS…
a, td a {
color:#<z:color name=”MainLink” />;
}
/*.controls a.active, DO WE NEED THIS? */
.navPane a.active {
background-color:#<z:color name=”PodBackground” />;
color:#<z:color name=”MainText” />;
font-weight:bold;
}

Change to…
a, td a {
color:#<z:color name=”MainLink” />;
text-decoration:none;
font-weight:bold;
}
/*.controls a.active, DO WE NEED THIS? */
.navPane a.active {
background-color:#<z:color name=”PodBackground” />;
color:#<z:color name=”MainText” />;
font-weight:bold;
text-decoration:none;
}

Rearrange Sidebar
Edit Content > XML
Rearranging things in here will change them on the various pages. Eg I changed…
<z:module name=”infonavigation” visible=”true” />
<z:module name=”gallerystatistics” visible=”false” />
<z:module name=”productsearch” visible=”true” target=”products” />
<z:module name=”featuredcategories” visible=”true” target=”products” />
<z:module name=”productlines” visible=”true” target=”products” />
<z:module name=”producttypes” visible=”true” target=”products” />
<z:module name=”tags” visible=”true” target=”products” />

to…

<z:module name=”productlines” visible=”true” target=”products” />
<z:module name=”producttypes” visible=”true” target=”products” />
<z:module name=”productsearch” visible=”true” target=”products” />
<z:module name=”infonavigation” visible=”true” />
<z:module name=”gallerystatistics” visible=”true” />
<z:module name=”featuredcategories” visible=”true” target=”products” />
<z:module name=”tags” visible=”true” target=”products” />

If you’d like to hide any sections in the menubar just change visible=”true” to visible=”false”

Note that each page has its own code so the list under:

Code:

<z:page id=”home” title=”Home” navigable=”true” visible=”true” template=”maintemplate”>

Will change the order/visiblity on the hompage

Code:

<z:page id=”products” title=”Products” navigable=”true” visible=”true” template=”maintemplate”>

Will change the order/visiblity on product pages and so on.

So for example I have the tags visibility set to “true” on my homepage and “false” on the products page.

Change Dividers on Side menu and Comment Wall
Find in Appearance > CSS…
.hr {
background-image:url(<z:asseturl type=”hr” />);
}

Change to…
.hr {
background-image:url(“http://www.yourdomain.com/line.png”);
}

Zazzle will stretch whatever image you give it to fit accordingly. For mine I made a little line graphic 145px wide.
If you’d like to get rid of the line altogether just remove the link;
.hr {
}

Custom Sidebar
See Ars_Celtica’s fabulous guide here

Add HTML section to the beginning of your homepage
In the CSS add this at the top under <z:csstemplate id=”csstemplate” live=”true” xmlns:z=”urn:zazzle:api”>

*——————————————-
| MY BIT
———————————————*/

.intro {
width:686px;
position:relative;
left:0px;
top:0px;
}

/*——————————————-
| END MY BIT
———————————————*/

In the Appearance > XHTML find:

Code:

<div id=”group_1″></div>
<div id=”group_2″ class=”contentPane”>
<z:placeholder name=”contentpane”></z:placeholder>
</div>
<div id=”group_3″>

and add…

Code:

<div id=”group_1″></div>
<div id=”group_2″ class=”contentPane”>
<div class=”intro”>
</div>
<z:placeholder name=”contentpane”></z:placeholder>
</div>
<div id=”group_3″>

Then you can put whatever HTML you like in between the intro div tags. Be mindful that its XHTML rather than the regular sort.
As far as I could work out the X stands for “Xtra Annoying” as its super nit-picky about your code! Once you get the hang of it its not too bad though. Here are some things that tripped me up…

XHTML tips
- Don’t use any capital letters in the code

- Always end your code blocks so;
<br> = wrong
<br /> = right!
<img src=”http://www.yourdomain.com/image.png”> = wrong
<img src=”http://www.yourdomain.com/image.png” /> = right!
<a href=”http://www.yourdomain.com”>Link</a> = wrong
<a href=”http://www.yourdomain.com” rel=”nofollow”>Link</a> = right!

- Always nest your tags correctly so;
<strong><h1>Text</strong></h1> = wrong
<strong><h1>Text</h1></strong> = right!

- Some text characters upset the code;
& = wrong
&amp; = right!

More info on XHTML: http://www.w3schools.com/xhtml/default.asp

You’ll notice that the intro gets added to every page in your store, but fear not…

Adding the Into to *just* the Homepage
If you go over to Edit Content > XML you’ll notice that each page is set to the same template;

Code:

<z:page id=”home” title=”Home” navigable=”true” visible=”true” template=”maintemplate”>

Change the Home one to:

Code:

<z:page id=”home” title=”Home” navigable=”true” visible=”true” template=”hometemplate”>

Then back to Appearance > XHTML
Copy and paste the entire contents of Layout XHTML below itself, so you have 2 templates.

On the first one change

Code:

<z:htmltemplate id=”maintemplate” live=”true” xmlns:z=”urn:zazzle:api” xmlns=”urn:zazzle:xhtml”>

to…

Code:

<z:htmltemplate id=”hometemplate” live=”true” xmlns:z=”urn:zazzle:api” xmlns=”urn:zazzle:xhtml”>

Remove the divs and any intro text you might have added from the previous step from the 2nd template (maintemplate)
You should be left with the intro on your homepage and nothing on the other pages.

Custom About Page
Same setup as the previous guide. Add another template to your XHTML but call this one “abouttemplate”
Find in Edit Content > XML

Code:

<z:page id=”about” title=”About” navigable=”true” visible=”true” template=”maintemplate”>

Change to…

Code:

<z:page id=”about” title=”About” navigable=”true” visible=”true” template=”abouttemplate”>

Make sure your abouttemplate has the <div class=”intro”></div> in the right place and add whatever XHTML you’d like (See previous; “Add HTML section to the beginning of your homepage”)

Moving from your Sandbox to your live gallery
Once you’re happy with your layout open 3 notepads (or equivilent simple text editor, not a rich text one like word… that could mess things up) and copy the XHTML, CSS and XML into them. Log into your real gallery and paste them all into the right sections.

Ta-da!

Thank you SugarVsSpice for the tutorial

API Set Up

1. Create a new Product Line and set up the product types in your Zazzle gallery that you want people to be able to create products on. Some people leave them completely blank, some put a temporary design on them – like I did http://www.zazzle.com/krwdesigns/products/cg-196666456666313820

2. Put the images on your own website that you want customers to be able to use to create products. I used thumbnail versions on my webpage instead of the full size in order to keep the page load time down.

3. Go to MyZazzle. Go to the Promotion Tools area (look for the link at the bottom of the right hand column – Check out more promotion tools)

4. In the right hand column, select Create-a-Product API. Click Create a Category Link.

5. Click the Select Category button under step 1 – and select the product line you created in your gallery.

6. Check the boxes if you want to allow editing and descriptions, then Generate Link.

7. You will get a link that will take customers from your site to your API section in your gallery. Below the Generate Link area, there is an example they show with some text in red. You need to change the red text for each image you want to allow customers to use for your API products.

So – at my site www.krwgraphics.com/create.htm, I would chenge the red info to match the url of the image on my website, so that it would be the image that would carry over when a customer clicks on it.

For instance, if you look at my webpage, the image of the fairy insidea bubble: I altered the link code to include the url of full size version of that image hosted on my site (http://www.krwgraphics.com/IMAGEINFO.png or whatever it actually is)

Then I attach the API link code to that thumbnail image so it will take customers to my Zazzle gallery and put that image on all the products in that category

Tutorial by KRWDesigns

Adding A New Product Line

1) Once you’ve logged in, click on the Manage my gallery link at the top of your page (directly to the right of your shop title)

2) Click into the Public area of the Products tab (follow the link to this that is in the left column of the Gallery Settings page)

3) You should now be looking at the Public Products page. Directly to the right of this title there is a link to Add new product line. Click on this.

4) An Add New Product Line dialog pops up. The name of your new product line should go in the Name field. Product lines are displayed in your pages in alphabetical order, so if you use some special character as the first letter of the product name (such as an exclamation point, as I did), these will show up on the top of the list. You can either put all your linky code (or any other descriptive information, in the case of a “normal” product line page) in the Description field now, or add this in later – after you’ve already added the new product line page. Once you’re satisfied with the details of your new product line, click the Add New Product Line button to “make it so”.

5) Congratulations, you now have a new product line! You can pretty much think of this as another page just like your top page in that you can add products here when you create them, and/or put whatever kind of descriptive text in here you want – like links to other pages, in this example.

6) If you want to edit the information on this page (either now, or later to add/remove links or other data), you also do that by going through the same Public Products page you got to in steps 1-3 above. Just click on the product line page you want to edit (it will be listed in the left-hand column under All Product Lines).

7) Once you’re in the product line page you want to edit, just click the Edit link directly to the right of the product line page title at the top.

I noticed that these pages are a little trickier to format than the top-level page. I ended up having to add in explicit HTML line-break tags (<br>) to get things to space correctly, but they accept a good amount of HTML (formatting tags, links, rudimentary tables, image tags, etc. – enough for me to accomplish what I was after anyway!)

9) As an “extra bonus” note, you may have noticed that there is also an Add new product line link to the right of the Edit link mentioned in step 7. You can use this to add a sub-product line (just like you did in steps 3-5 above) – that’s right, your product line can contain another product line! This can be a really handy feature for organizing an otherwise cluttered shop setup.

Tutorial by Wilddeej

Adding The Flash Panel To Your Store

First you need your html code … you can find this in the ” promote this gallery ” section .. link on your main page .. top box under your ID … or here just fill in your contributor name .. on the drop down you have a selection of products .. you can choose one kind or just ignore that and have all different kinds … or for a totally personalized panel you can add special tags to the products you want in the panel .. tags that you haven’t used on anything else and tags that no one else is likely to of used either .. then you just enter that special tag in the ” select your products ” area of the flash panel set up.. tick the box for popular or recent .. hit the next button … you can choose what kind of skin you want your panel to have in the drop down on that page .. when you’re happy hit save & finish … you’ll get your code .. copy it ..( using your mouse ..left click on the code .. when it turns blue … right click and select copy ) and then go back to the ” my zazzle ” the gallery tab .. then on the left you’ll see it has ” basic information” click that then paste ( right click on your mouse in the box ..select paste ) the code into the box .. ( you can adjust the size of the panel in the code if its too big for your page SEE BELOW ) hit save changes and you’re done :d

ADJUSTING THE PANELS SIZE

This is the html code for my art store … you will need to generate your own code ( as above ) unless you really really want to promote my store in which case feel free

you can see the size as width=”450″ height=”300″ the height and width can be changed by simply changing the numbers

<embed wmode=”transparent” src=”http://www.zazzle.com/utl/getpanel?zp=117269176739619880″ FlashVars=”feedId=117269176739619880&path=http://www.zazzle.com/assets/swf/zp/skins” width=”450″ height=”300″ TYPE=”application/x-shockwave-flash”></embed><br/><a href=”http://www.zazzle.com/”>create & buy custom products</a> at <a href=”http://www.zazzle.com/”>Zazzle</a>

For a smaller panel I use width=”350″ height=”300″

Just alter the sizes until you’re happy .. best to keep it relatively even