Original 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!) 
Here is SugarVsSpice store to show you what can be done with these guides;
Zazzle SugarVsSpice Customized Shop
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:
Will change the order/visiblity on the hompage
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:
<div id=”group_2″ class=”contentPane”>
<z:placeholder name=”contentpane”></z:placeholder>
</div>
<div id=”group_3″>
and add…
<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
& = 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;
Change the Home one to:
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
to…
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
Change to…
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