Customize Your Zazzle Store

I would like to start by saying that I'm certainly not an expert, but I will show you where to find the experts. I will also pass along what I have learned from them. I will showcase their stores on this lens so you can see just what is possible when you utilize Zazzle Store Customization.

The first and most important thing to know is that you can really mess up your store if you are not careful. So, everyone recommends setting up a 'sandbox' store where you can play around with the xhtml code and the css style sheets without destroying the store you already have. Just sign up for a new store, after all it is free, then check the box to make it private. Once you are done you can copy the code and paste it into your existing store. The extent of your knowledge in using xhtml code and/or css style sheets will determine how long it may take you to design your store.

One more important thing to know is that most people use Internet Explorer or Firefox for their web browser. But IE and Firefox do not always display a site the same. So when designing your store it is always important to view it in both browsers.

Below are four changes that I have used personally to customize my storefronts.

One of the most asked about customizations is adding thumbnail images to your Zazzle stores homepage. This is actually not a new feature but is one that can be done without enabling the Advanced Store Customization. Just go to (My Zazzle) then select (Store) then select (Edit basic information). You add the code below in the Description form.

You can see the thumbnails I ended up with in the thumbnail image to the right. If you would like to see it in all it's glory just visit Days of Wonder.

I started off by resizing my design image to 100px X 100px. I then added a 1px border, then added a 5px shadow on a 7 px canvas which gave the image and overall size of 126px X 126px. The canvas gave me the space I needed between the thumbnails. If you don't want to mess with the shadow you could just give your original thumbnail a border that would give you the space you need. Just be sure that the border is the same color as your background.

You have about 640px width to play with, that is why I decided on 126px X 5 images across which gave me 630px total. If you want larger thumbnails just reduce the amount of images in a row. I also have stores that are 4 across, 6 across and one that is just 2 across.

Then upload your image to a free photo service such as Photobucket or Flicker. Or if you have your own website you may serve them from there.

Next copy the code below and add it to the (Description) form in (Edit basic information). To change the (ADDRESS OF YOUR PRODUCT LINE) just go to the product page you wish to link to and copy and paste the address from your browser window between the " ". To change the (ADDRESS OF YOUR IMAGE) just copy the location of your image and paste it between the " ".

<a href="ADDRESS OF YOUR PRODUCT LINE" rel="nofollow"><img src="ADDRESS OF YOUR IMAGE" align="center" /></a>

EXAMPLE

<a href="http://www.zazzle.com/daysofwonder/gifts?cg=196167030247755690" rel="nofollow"><img src="http://i476.photobucket.com/albums/rr122/ShopTillYouRock/Days_Of_Wonder/dow01.jpg" align="center" /></a>

THE ABOVE CODE GET'S THIS IMAGE

EXAMPLE

<a href="http://www.zazzle.com/daysofwonder/gifts?cg=196167030247755690" rel="nofollow"><img src="http://i476.photobucket.com/albums/rr122/ShopTillYouRock/Days_Of_Wonder/dow01.jpg" align="center" /></a><a href="http://www.zazzle.com/daysofwonder/gifts?cg=196312841600417843" rel="nofollow"><img src="http://i476.photobucket.com/albums/rr122/ShopTillYouRock/Days_Of_Wonder/dow02.jpg" align="center" /></a>

THE ABOVE CODE GET'S TWO IMAGES



When you have the number of images you want in a row, just add this to the end of the code <br/> If you need to center the thumbnail up on the page just add <center> at the beginning of the code and </center> at the end. Then you can start over for your next row.

Once you have that first row it is easy from there on. Just copy the first row and paste it below the first. Then go and change the product line address and the photo name for each thumbnail. I always just name my thumbnails example01.jpg example02.jpg so all I have to do is change the number.

One of the easiest tricks in the Beta Advanced Store Customization is adding a custom header to your Zazzle store homepage. I found this in the Zazzle Forums posted by a very talented web designer from the Zazzle store SugarVsSpice. Be sure to click on that link to see their amazing store design.

You can see the header I ended up with in the thumbnail image to the right. If you would like to see it in all it's glory just visit The Vintage Vamp.

To use this code you need to enable: Beta! Enable advanced options in (Store) (Appearance) And it is recommended to do this in your Sandbox store (see Sandbox Store above).

Below is how SugarVsSpice explained how to add the Custom Header.

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.

End of SugarVsSpice's answer.

The reason for using a custom header is that you can make it as tall as you want. Instead of the standard 900px X 200px size I increased my header to 900px X 350px.

I wanted to be able to add a footer image plus be able to add small banners which would link to my other Zazzle stores at the bottom of my Zazzle homepage. I found the answer on the Zazzle forums by a very talented lady named Lisa. To see what you can do with customizing a store you have to visit her store here: LisaMarieArt.

You can see what I ended up with in the image at the right. If you would like to see it in all it's glory just visit The Vintage Vamp.

To use this code you need to enable: Beta! Enable advanced options in (Store) (Appearance) And it is recommended to do this in your Sandbox store (see Sandbox Store above).

Below is LisaMarieArt's answer to how to add a footer.

Here's how to add a custom footer to the bottom of your store. It will appear before Zazzle's footer and after your store content. Check out the curved page bottom here if to see what I mean.

In the Appearance (Advanced) Tab add this line of code to the XHTML box:

<div id="mainBottom" />

It needs to go after the content and sidebar but inside the main container so here's where it goes in the code:

<div class="sidePod">
<z: placeholder name="navpane"></z: placeholder>
</div>
</div>
</div>
<div id="mainBottom" />
<!-- end main -->

I've used a self closing DIV because the image is applied to the background of the DIV. You might want to put some text in there at some point, maybe a copyright notice. If you do just delete the / and then give it a closing tag so it looks like this instead <div id="mainBottom"></div>, then just put your text in between the tags.

Next you need to add the styling to the DIV you've just created so that you can add your image and get it lined up with the rest of the page. Go to the CSS box (in appearance tab) and add this anywhere in the code as long as it comes before </z:csstemplate> which is at the very bottom:

/*-------------------------------------------
| this adds styling to custom page footer
---------------------------------------------*/
#mainBottom {
margin:0 auto;
width:900px;
overflow:hidden;
height:48px;
border:0;
background-image:url(http://INSERT/PATH/TO/IMAGE/HERE)! important;
background-position:top left! important;
background-repeat:no-repeat! important;
}

Obviously your width and height needs to be the same as the width and height of your image, and you need to add the location to your image.

Like I say, applying the image to the background of the div allows you to put text and/or other images in that div. You could use it for links to other shops you have or just for a copyright notice or anything else you want to put down there.

The Zazzle footer likes to cause problems. If you find it overlapping your store content (more common in Firefox) you need to change the bottom padding for the #mainShell in the CSS.

Instead of padding-bottom:40px;

change it to

padding-bottom:0px;

You may also need to add extra height to your #mainBottom div to compensate. I hate code conflicts between IE and Firefox! If there's another way to correct this little problem let me know.

You may need to do some tweaking to line things up depending on how you've customized your own stores but this will get you headed in the right direction.

Also, using a transparent PNG for your image will allow tiled backgrounds (if you have one) to show through. Just make your image high enough to create a gap between your store and the Zazzle footer.

End of LisaMarieArt's answer.

To get the effect I needed I add an extra 80px white border (to match my background color) to the top of my bottom banner. This gave me room to add my small banners across the top of the bottom banner. Then you add your banners or text like this: <div id="mainBottom">YOUR IMAGES OR TEXT HERE</div>

The code ends up looking like this for one banner:

<div id="mainBottom">
<a href="http://www.zazzle.com/zazzledazzles" rel="nofollow">
<img src="http://i476.photobucket.com/albums/rr122/ShopTillYouRock/Zazzle_Banners/zdq01.jpg" align="left" alt="Zazzle Dazzles" </div>

To add more images you just keep moving the </div> to the very last of your code.

I wanted to add product images in the sidebar of my Zazzle Store The Vintage Vamp. So I posted on the Zazzle Forums to find out if anyone knew how to do this. The answer came from a very talented web designer named Bradley. Be sure you visit his two amazing stores Ars Celtica and Retropolis Travel Bureau.

You can see what I ended up with in the image at the right. If you would like to see it in all it's glory just visit The Vintage Vamp.

To use this code you need to enable: Beta! Enable advanced options in (Store) (Appearance) And it is recommended to do this in your Sandbox store (see Sandbox Store above).

Below is the answer Bradly gave to my question.

Your Store/Appearance/Layout window has one or more HTML templates in it. Each of the HTML templates includes some code that puts the sidebar on the page.

It looks like this:

Code:

<div class="sidePod">
<z:placeholder name="navpane"></z:placeholder>
</div>

If you add your own HTML just before that end div tag, your content will show up at the bottom of the sidebar. If you add your own HTML after that end div tag, it'll show below the bottom of the sidebar.

So for example:

Code:
<div class="sidePod">
</z:placeholder>
</div>
test test test

Puts the words "test test test" just below the sidebar.

End of Bradly's answer.

This is one of those places where you will need to check your sidebar in both Internet Explorer and Firefox. I pulled my hair out trying to get it to look the same in both. Below is the code I finally ended up with.

<div class="sidePod">
</z:placeholder>
</div>
<a href="http://www.zazzle.com/thevintagevamp">
<img src="http://i476.photobucket.com/albums/rr122/ShopTillYouRock/The_Vintage_Vamp/featuredposters.jpg" alt="Featured Posters" width="158" height="80" border="0" />
</a>
<br />
<a href="http://www.zazzle.com/join_the_cavalry_large_poster-228046418287193863">
<img src="http://i476.photobucket.com/albums/rr122/ShopTillYouRock/The_Vintage_Vamp/joincalv4.jpg" alt="Join The Cavalary" width="158" height="209" border="0" />
</a>
<br />

This is an example of the first two images in my sidebar. To add more images you would just repeat over again. Be sure you do not add the (align=) tag,

Like I said at the beginning of this lens I'm certainly not an expert. If you have any question I would recommend going to the Zazzle Forums and asking the experts. The group there are a very friendly bunch and are always glad to help you out. You can go directly to the Advanced Store Customization Forum by clicking here clicking here.

There are many more customization tips and tricks that you can find in the forum. The ones I have talked about here are just the ones that I have actually used.