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

Custom Color Codes

Although the zazzle design tool is the best .. the lack of color choice for backgrounds etc isn’t that great .. but using your own custom color isn’t difficult

First we need to have the ability to generate a color code .. if you have a programme such as photoshop .. paintshop pro etc .. you can use the color selector to get just the right shade you require

Photoshop users just need to use the color picker .. then double click the color box on the left then copy the color code from the box ( see below )

if you don’t have any programmes don’t worry … you can still create your own custom colors .. heres a great site that generates the code for you .. you can even mix your own color and it gives you the code .. once you have your code .. you need to apply it to your product .. on the zazzle design tool … choose ” background” you will see at the bottom of the color selection theres already a code in the box .. delete that code and paste in your custom code ( see below )

IMPORTANT : do not include the # from any image codes just the numbers and letters .. and to apply the code make sure you press the enter key on your key board …

Thats how to apply a custom color to a product .. you can do the same to custom design your store .. simply go to your “my zazzle ” .. gallery tab ..then on the left click on appearance

tick the create a custom look option .. then select from the sections of the gallery you want to apply custom color to .. generate your code and paste into the hex box hit the enter key

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

Create Posters

The zazzle design tool is second to none .. its an awesome bit of kit helping you produce the best products

To create a poster with or without a frame is easy

Step One

Upload you artwork .. you can do this via the design tool itself or the zazzle uploader .. which is still in beta and works only for windows .. there is a help file to get the requirements .. of course this isn’t just for posters .. but is ideal for larger file uploads

Step Two

Your poster will now look something like this …but not with my artwork

You can see the arrows are pointing to two very large blank white areas .. it doesn’t make for a great poster / print … so what do we do?

STEP THREE

Click on the PRINT OPTIONS tab

Then select the AUTO SIZE

This will resize the back area to the size of your artwork … it will also give you the dimensions

OPTIONAL STEP FOUR

If you haven’t included a border when you created your work you still can… If you want a border area to your poster … simply go to the customize tab ( next to the print options tab ).. and hit the minimize button ( red arrow ) … then select a background color ( black arrow )

Become an Associate Earn Money

Anyone whether you’re a zazzle artist / designer or just someone who wants to promote their favorite products off zazzle can sign up for an associate account

Of course if you do sign up for an associate account .. please please consider promoting my products and stores .. any sales generated through any of your associate account links will earn you 15% of the full purchase price … ( please note ..postage stamps are different.. and the purchase price is divided between zazzle .. the postal service and the designer .. the referral percentage is 15% of what the designer earns ) this can add up to a very good amount .. you can get payed at the beginning of the month after your earnings reach $25 .. you can be payed by check or paypal ..

Where You Can Find Your Associate Number?

The black arrow is the account tab where you will find your associate details … the red arrow is pointing to the associate account number

You can if you want just create a simple text link with your code included it would look something like this

This one will be a click able embedded link

<a href=”http://www.zazzle.com/STORE ID?rf=YOUR ASSOCIATE NUMBER”>SOME TEXT DESCRIPTION</a>

This one will just be a link you can view

http://www.zazzle.com/STORE ID?rf=YOUR ASSOCIATE ACCOUNT NUMBER

If you want a link to a certain products page simple change the STORE ID area to the product page URL

How do links work?

Simply select an item / store you want to promote AFTER getting your associate account set up

a cookie will be included in each link you generate and add to your site … if someone clicks on that link .. a cookie is attached to their computer .. it lasts 30 days unless they delete their cookies .. if in the time that person purchases something from anywhere on zazzle not just the item you’re promoting .. and they still have your cookie attached to their computer you earn the 15% … that simple

How Do I Link To A Product?

when you go to a product page on zazzle .. ( heres one of mine ) you will see a link to this link .. see arrow … just click and select what type of link you want …

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

Using The Lock Feature

To secure your url .. copyright .. image …etc .. on your products you can use the lock feature …how you do this is very simple

on the design tool click on advanced options and tick the lock box

You will now have a small lock next to the title of that element … only you can unlock it when you’re signed in

MULTIPLE LOCKS ON SAME PRODUCT

To lock multiple elements on one product … you simply lock each element in turn

Tie Tricks

When tiling a tie … if the image that has been tiled is too small for your liking .. go to ” edit ” top right of design tool .. select ” select all ”

then on the top box on the design tool that has your image .. use the maximize button and all the images will increase in size simultaneously .. alternatively you can also decrease the size

Ties And Color selection

When you’re creating a tie .. remember that the only part of the tie that has the design on it is the very front that you see in the design view … the back and the folded back area will not have any image .. the back will stay white no matter what … but the tail end you can match to your image(s) that you have on the front .. theres a few options to achieving a great tie design

1: create a tie with a PNG transparent graphic so the background color of the tie will be a solid color

2: Select a matching color from the main design color and have that as the tail color .. so when its tied the knot matches … to get the exact color .. if you have a design programme such as photoshop etc .. use the color selector tool on your image .. then copy the color code of that matching color .. paste it into the background color pop up where the hex code is .. and hit the enter key on your keyboard and the color should match perfectly

heres a HEX code chart .. with some great color options

Card and Image Templates

IMAGE TEMPLATE Photo placement area

for a card etc with a photo placement template with a frame .. simply create the frame with a transparent area where the image the customer uploaded photo will show .. then you need a back placement image you can create your own .. when you come to create the card (or whatever) upload the placement image first then the frame .. click on the placement image in the design tool .. click on advanced options .. then tick the “make this a template” option .. name it something like .. photo here .. or whatever you want .. it should now be a photo template .. post for sale .. and if you want to test it first post as hidden and give it a try before you edit it and post to public

To add a photo template to something like a t-shirt .. create a template back with something like image here on it .. upload to the product and create the template the same way as the card using the advanced options

these work on all products

To add text to the item simply type what you want to show on the item .. click on the text box on the design tool.. click on advanced options .. give the template field a name and tick the box