| Adding Sections, Sub-Sections, Subsection Image Links & Breadcrumb Trails to a Zazzle Store - a Major Modification |
Lately quite a few shopkeepers have arrived here from a different print on demand service, and being human, they're inclined to want what they're familiar with - especially if what they're familiar with has been working for them. What works against that desire is the fact that any established system that has grown on its own will not work the same way as the system that these emigrees are used to. Everyone does need to adapt - but one of the recent developments at Zazzle is the advanced store customization system, and that means that the system itself can be adapted.
The customization system offers a lot of power to those who are willing to work at it. And for those who are willing to do that work, it's possible to bend the Zazzle system into something that more closely resembles what stores look like elsewhere.
|
|
I've been working on a customization that will do several desirable things for a shopkeeper. But I have to tell you, right out of the gate, that using this system is more complicated than just putting products into Zazzle product lines and using Zazzle's default navigation. Building, maintaining, and expanding a store like this would require work from you. Before you commit to this you need to fully understand what that work would be, so that you can decide whether the benefits are worth it to you.
This store is a working demo of how this modified system works. If you haven't already, browse through its sections and products to see it in action.
Following these steps succesfully requires a moderate knowledge of HTML - enough to change the text, links and images that are used in this sample code, to modify the names and IDs of images and image maps, and eventually to add rows to an existing table. You will also need to make changes to text in the Content/Advanced area of MyZazzle. The sample code includes a skinned sidebar that will need to be modified with your own custom graphics. |
| How it Works
|
Using this customization, Product Lines are not displayed in the sidebar. They are replaced by custom pages ("Sections"). These Sections are listed in the "infonavigation" module of the sidebar.
Each Section contains links to one or more Product Lines ("Subsections"). Subsections are normal product lines with some custom HTML in their description field. There is no need for them to be children of any other product line.
Figure 1. The content pane area of a Section Page from this demo store
The Breadcrumb for Section Pages is in their HTML custom layout; the breadcrumb for Subsection pages is in their Product Line description. The Subsection image links and their text labels are contained in a table that's part of the custom HTML template. |
| The Advantages
| The Disadvantages
|
1. Hidden product lines
All public products will still show up in the marketplace, and in an "All Products" search. But the only sections that will appear in your sidebar are those you put there intentionally. You can have many public product lines that don't appear in your store's navigation. As many as you want, in fact.
2. Streamlined Thumbnail Pages
Sections will not contain every product in every child section. By default, that's the way that Zazzle product lines work - a parent line displays every product that each of its children contains.
3. Subsections with "Section Images" in their Parent Sections
Sections can contain any number of Subsection graphic links - "section images" - and those links, unlike standard image links in Zazzle stores, will be fully spidered by search engines.
Keywords in anchor text on these image links will weight the relevance of the linked pages.
4. "Breadcrumb Trail" on Section and Subsection Pages
A standard "Breadcrumb Trail" allows shoppers to go back up your Section hierarchy. In the normal Zazzle system, child product lines don't show a breadcrumb trail that leads back to their parent product lines.
This breadcrumb trail reinforces relevant keywords on the page, but doesn't weight its links with those keywords.
5. Section Links in the Sidebar are not Alphabetized
You don't need to rename your Sections, as you do your product lines, to change the order in which they're displayed in the sidebar.
They will use the order in which they're defined.
6. The Sidebar is more Streamlined
You can avoid a mile-long sidebar by listing only your Sections in it: this helps you to place emphasis on the Sections, and results in a more readable sidebar.
| 1. This Requires Work
Adding new Sections requires more work than adding a regular product line - you have to add both a custom page definition and a custom HTML template. This HTML template must contain whatever subsection images you want displayed in that section.
2. This Requires Even More Work
Breadcrumb links must be added by hand in Product Line descriptions.
3. Hosting Images
Subsection images must be hosted remotely - whether on your own domain, or at an image hosting service that allows hotlinking.
4. No Pagination of Section Pages
Section pages don't get paginated - if you want one to span more than a single page, it has to become two Sections. (Subsections are normal product line pages, so they do paginate.)
5. Subsection Links are Only on Section Pages
Subsections will never appear in the sidebar - just in their parent Sections. Some would see this as an advantage (see #6, in "Advantages"), but it's possible that you'll see it differently.
There are fewer disadvantages than advantages in these lists - but you should remember that the disadvantages will make your store expansion more time consuming, so don't underestimate them!
The best way to decide is to start a new store and try these customizations in it. You won't need to place them in one of your product-filled shops until you're certain that this is for you. |
|
|
| How to Do It
|
Setting up an additional store at Zazzle is free. Do that right now, and set it to “Private”. This is where you should experiment with your store layout - don’t put the changes into your public store until you’re sure they all work the way you want!
We call this private store a "sandbox".
Copy the Appearance/CSS, Appearance/Layout, and Content/Content Definitions fields of your public store from Myzazzle. Paste those into the same areas of your sandbox. Now your sandbox has all the Advanced settings from your public store - so when you’re done, you can copy them in the sandbox and paste them back into the public one.
|
If your store is already customized you will not want to blindly copy and paste my sample code. I'll try to give you instructions as we go on how to recreate these changes while preserving your own customization. But that gets tricky, so remember - do this first in your sandbox store, not in your public one! |
| 1. Changes to CSS |
If you have already customized your store:
Most of these CSS entries are based on my Sidebar Skinning tutorial. If you have already changed the appearance of your own sidebar you will want to use your own CSS instead of this, and so you should skip this step.
You will still need to copy and use the .breadcrumb class, though.
Otherwise, add these entries to your CSS:
.breadcrumbmod
{
font-size: 16px;
font-style: italic;
font-weight: bold;
margin-bottom: 10px;
}
#group_1 .sidePod, #group_3 .sidePod {
background-color: transparent !important;
}
/*-------------------------------------------
| Here begins the simple sidebar example
---------------------------------------------*/
/*-------------------------------------------
| webonav: sets inner sidebar area background in a div after sidePod
---------------------------------------------*/
.webonav {
background-image:url(http://www.theretrovert.com/outlink/zaz_examples/navbg.gif);
width:158px;
position:relative;
left:-9px;
top:-10px
}
/*-------------------------------------------
| webobar: resets width of nav bar content in a div after webonav
---------------------------------------------*/
.webobar {
width:140px;
position:relative;
left:13px;
top:0px
}
/*-------------------------------------------
| galleryicon: this adjusts the spacing above the gallery icon; tweak to suit your layout.
---------------------------------------------*/
.galleryIcon
{
margin-top: 8px !important;
margin-left: 44px;
}
/*-------------------------------------------
| Here ends the simple sidebar example
---------------------------------------------*/
.hr {
display: none !important;
display: block;
}
|
Paste them in, then validate and save.
|
| 2. Create the content definitions for your Sections |
If you have already changed the Content Definitions for your store - skip below to 2B.
Otherwise, replace everything in Store/Content/Advanced with this:
<z:pages xmlns:z="urn:zazzle:api">
<z:page id="css" navigable="false" visible="true" template="csstemplate"></z:page>
<z:page id="custom1" title="Custom Section #1" navigable="true" visible="true" template="customatemplate">
<z:content placeholder="contentpane">
<z:module name="productlineinfo" visible="true" />
<z:module name="productsgrid" visible="false" />
</z:content>
<z:content placeholder="navpane">
<z:module name="infonavigation" visible="true" />
<z:module name="gallerystatistics" visible="true" />
<z:module name="productsearch" visible="true" target="products" />
<z:module name="featuredcategories" visible="true" target="products" />
<z:module name="productlines" visible="false" target="products" />
<z:module name="producttypes" visible="false" target="products" />
<z:module name="tags" visible="false" target="products" />
</z:content>
</z:page>
<z:page id="custom2" title="Custom Section #2" navigable="true" visible="true" template="custombtemplate">
<z:content placeholder="contentpane">
<z:module name="productlineinfo" visible="true" />
<z:module name="productsgrid" visible="false" />
</z:content>
<z:content placeholder="navpane">
<z:module name="infonavigation" visible="true" />
<z:module name="gallerystatistics" visible="true" />
<z:module name="productsearch" visible="true" target="products" />
<z:module name="featuredcategories" visible="true" target="products" />
<z:module name="productlines" visible="false" target="products" />
<z:module name="producttypes" visible="false" target="products" />
<z:module name="tags" visible="false" target="products" />
</z:content>
</z:page>
<z:page id="custom3" title="Custom Section #3" navigable="true" visible="true" template="customctemplate">
<z:content placeholder="contentpane">
<z:module name="productlineinfo" visible="true" />
<z:module name="productsgrid" visible="false" />
</z:content>
<z:content placeholder="navpane">
<z:module name="infonavigation" visible="true" />
<z:module name="gallerystatistics" visible="true" />
<z:module name="productsearch" visible="true" target="products" />
<z:module name="featuredcategories" visible="true" target="products" />
<z:module name="productlines" visible="false" target="products" />
<z:module name="producttypes" visible="false" target="products" />
<z:module name="tags" visible="false" target="products" />
</z:content>
</z:page>
<z:page id="products" title="Products" navigable="false" visible="true" template="maintemplate">
<z:content placeholder="contentpane">
<z:module name="productlineinfo" visible="true" />
<z:module name="productsgrid" visible="true" />
</z:content>
<z:content placeholder="navpane">
<z:module name="infonavigation" visible="true" />
<z:module name="gallerystatistics" visible="true" />
<z:module name="productsearch" visible="true" target="products" />
<z:module name="featuredcategories" visible="true" target="products" />
<z:module name="productlines" visible="false" target="products" />
<z:module name="producttypes" visible="false" target="products" />
<z:module name="tags" visible="false" target="products" />
</z:content>
</z:page>
<z:page id="about" title="About" navigable="true" visible="true" template="maintemplate">
<z:content placeholder="contentpane">
<z:module name="about" visible="true" />
</z:content>
<z:content placeholder="navpane">
<z:module name="infonavigation" visible="true" />
<z:module name="gallerystatistics" visible="true" />
<z:module name="productsearch" visible="true" target="products" />
<z:module name="featuredcategories" visible="true" target="products" />
<z:module name="productlines" visible="false" target="products" />
<z:module name="producttypes" visible="false" target="products" />
<z:module name="tags" visible="false" target="products" />
</z:content>
</z:page>
<z:page id="favorites" title="Favorites" navigable="false" visible="false" template="maintemplate">
<z:content placeholder="contentpane">
<z:module name="pagetitle" visible="true" />
<z:module name="favorites" visible="true" />
</z:content>
<z:content placeholder="navpane">
<z:module name="infonavigation" visible="true" />
</z:content>
</z:page>
<z:page id="myfanclub" title="Fan Club" navigable="false" visible="false" template="maintemplate">
<z:content placeholder="contentpane">
<z:module name="pagetitle" visible="true" />
<z:module name="myfanclub" visible="true" />
</z:content>
<z:content placeholder="navpane">
<z:module name="infonavigation" visible="true" />
<z:module name="gallerystatistics" visible="true" />
<z:module name="productsearch" visible="true" target="products" />
<z:module name="featuredcategories" visible="true" target="products" />
<z:module name="productlines" visible="false" target="products" />
<z:module name="producttypes" visible="false" target="products" />
<z:module name="tags" visible="false" target="products" />
</z:content>
</z:page>
<z:page id="fanclubs" title="Favorite Stores" navigable="false" visible="false" template="maintemplate">
<z:content placeholder="contentpane">
<z:module name="pagetitle" visible="true" />
<z:module name="fanclubs" visible="true" />
</z:content>
<z:content placeholder="navpane">
<z:module name="infonavigation" visible="true" />
<z:module name="gallerystatistics" visible="true" />
<z:module name="productsearch" visible="true" target="products" />
<z:module name="featuredcategories" visible="true" target="products" />
<z:module name="productlines" visible="false" target="products" />
<z:module name="producttypes" visible="false" target="products" />
<z:module name="tags" visible="false" target="products" />
</z:content>
</z:page>
<z:page id="promote" title="Promote This Store" navigable="false" visible="false" template="maintemplate">
<z:content placeholder="contentpane">
<z:module name="promote" visible="true" />
</z:content>
<z:content placeholder="navpane">
<z:module name="infonavigation" visible="true" />
<z:module name="gallerystatistics" visible="true" />
<z:module name="productsearch" visible="true" target="products" />
<z:module name="featuredcategories" visible="true" target="products" />
<z:module name="productlines" visible="false" target="products" />
<z:module name="producttypes" visible="false" target="products" />
<z:module name="tags" visible="false" target="products" />
</z:content>
</z:page>
<z:page id="home" title="Home" navigable="true" visible="true" template="maintemplate">
<z:content placeholder="contentpane">
<z:module name="homecontent" visible="true" />
<z:module name="toppicks" visible="false" />
<z:module name="homeproducts" visible="false" />
<z:module name="commentwall" visible="true" />
</z:content>
<z:content placeholder="navpane">
<z:module name="infonavigation" visible="true" />
<z:module name="gallerystatistics" visible="true" />
<z:module name="productsearch" visible="true" target="products" />
<z:module name="featuredcategories" visible="true" target="products" />
<z:module name="productlines" visible="false" target="products" />
<z:module name="producttypes" visible="false" target="products" />
<z:module name="tags" visible="false" target="products" />
</z:content>
</z:page>
</z:pages> |
The changes above will create three custom pages - you can rename them to anything you like by changing "Custom Section #1", "Custom Section #2", and "Custom Section #3" - and each of those custom pages will use a custom HTML template that we haven't created yet. In addition, the sidebar has been rearranged and several changes have been made to what's visible in the sidebar; home page content has been modified; and all pages are using the same sidebar. (By default, Zazzle uses a shorter version of the sidebar on pages like "About", "Fan Club", and so on.)
Product lines are now not displayed in the sidebar. Your custom sections are being displayed there in the "infonavigation" module, and those are the links that shoppers will use to browse your products. These Section links are displayed in the order their content definitions use. You can rearrange them just by moving the content definitions. |
| 2B. If you skipped ahead because you've previously changed your Content Definitions - only! |
You
may want to reproduce some of my changes (like standardizing the sidebar) without using them all. You can make that change by copying your existing navpane definitions and pasting them in your own content everyplace that the navpane appears - that's on every page definition. But you must set "productlines" visible="false" in each navpane definition.
In the "Products" page definition I've made navigable="false". This prevents a redundant link. Though I tried the same with "Home", that has an odd side effect.
Each of my Custom Page definitions is a copy of "Products", with these changes:
1. It calls its own custom template
2. I've set "productsgrid" visible="false"
3. "Navigable" is set to "true". |
| 3. Create the Custom HTML Templates |
If you have already customized the Layout HTML for your store - skip below to 3B.
Otherwise, replace everything in Store/Appearance/Layout with this:
<z:htmltemplate id="maintemplate" live="true" xmlns:z="urn:zazzle:api">
<html>
<head>
<z:placeholder name="headcontent"></z:placeholder>
<z:cssinclude zazzlepage="z.2/css/default.css.aspx" />
<z:cssinclude zazzlepage="z.2/css/cn/contributor.css.aspx" />
<z:cssinclude storepage="css" />
</head>
<body class="oneFourZero">
<a class="skiplink" href="#main">Skip to content</a>
<div id="page" class="contributorPage">
<div id="mainShell">
<div id="pageMantle">
<z:pagelink name="pageMantleLink" target=""><span class="pageMantleSpacer"></span></z:pagelink>
</div>
<div id="pageHeader"></div>
<div id="main" class="clearfix">
<div id="group_1">
<div class="sidePod">
<div class="webonav">
<z:pagelink target="home">
<img src="http://www.theretrovert.com/outlink/zaz_examples/navtop.gif" alt="Alt Text tag for your Shop" width="158" height="62" border="0" />
</z:pagelink>
<div class="webobar">
<z:placeholder name="navpane"></z:placeholder>
</div>
<br />
<img src="http://www.theretrovert.com/outlink/zaz_examples/navbot.gif" width="158" height="21" />
</div>
</div>
</div>
<div id="group_2" class="contentPane">
<z:placeholder name="contentpane"></z:placeholder>
</div>
<div id="group_3"></div>
</div>
<!-- end main -->
</div>
<!-- end mainShell -->
<div class="clearBoth"></div>
</div>
<!-- end page -->
</body>
</html>
</z:htmltemplate>
<z:htmltemplate id="customatemplate" live="true" xmlns:z="urn:zazzle:api">
<html>
<head>
<z:placeholder name="headcontent"></z:placeholder>
<z:cssinclude zazzlepage="z.2/css/default.css.aspx" />
<z:cssinclude zazzlepage="z.2/css/cn/contributor.css.aspx" />
<z:cssinclude storepage="css" />
</head>
<body class="oneFourZero">
<a class="skiplink" href="#main">Skip to content</a>
<div id="page" class="contributorPage">
<div id="mainShell">
<div id="pageMantle">
<z:pagelink name="pageMantleLink" target=""><span class="pageMantleSpacer"></span></z:pagelink>
</div>
<div id="pageHeader"></div>
<div id="main" class="clearfix">
<div id="group_1">
<div class="sidePod">
<div class="webonav">
<z:pagelink target="home">
<img src="http://www.theretrovert.com/outlink/zaz_examples/navtop.gif" alt="Alt Text tag for your Shop" width="158" height="62" border="0" />
</z:pagelink>
<div class="webobar">
<z:placeholder name="navpane"></z:placeholder>
</div>
<br />
<img src="http://www.theretrovert.com/outlink/zaz_examples/navbot.gif" width="158" height="21" />
</div>
</div>
</div>
<div id="group_2" class="contentPane">
<z:placeholder name="contentpane"></z:placeholder>
<div class="breadcrumbmod">
<a href="http://www.zazzle.com/custom_sections">Custom Section Example Store</a> > Custom Section #1</div>
<table border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td height="212">
<img src="http://shop.webomator.com/ars_celtica/custom_sections/subsection.gif" name="section1a" width="200" height="200" border="0" usemap="#section1a" id="section1a" />
</td>
<td>
<img src="http://shop.webomator.com/ars_celtica/custom_sections/subsection.gif" name="section1B" width="200" height="200" border="0" usemap="#section1B" id="section1B" />
</td>
<td>
<img src="http://shop.webomator.com/ars_celtica/custom_sections/subsection.gif" name="section1c" width="200" height="200" border="0" usemap="#section1c" id="section1c" />
</td>
</tr>
<tr align="center" valign="top">
<td>Subsection 1A</td>
<td>Subsection 1B</td>
<td>Subsection 1C</td>
</tr>
</table>
<map name="section1a" id="section1a">
<area shape="rect" coords="0,0,200,200" href="http://www.zazzle.com/custom_sections/gifts?cg=196274937678171717" alt="Section 1A" />
</map>
<map name="section1B" id="section1b">
<area shape="rect" coords="0,0,200,200" href="http://www.zazzle.com/custom_sections/gifts?cg=196253686612867269" alt="Section1B" />
</map>
<map name="section1c" id="section1c">
<area shape="rect" coords="0,0,200,200" href="http://www.zazzle.com/custom_sections/gifts?cg=196010631783689515" alt="Section1C" />
</map>
</div>
<div id="group_3"></div>
</div>
<!-- end main -->
</div>
<!-- end mainShell -->
<div class="clearBoth"></div>
</div>
<!-- end page -->
</body>
</html>
</z:htmltemplate>
<z:htmltemplate id="custombtemplate" live="true" xmlns:z="urn:zazzle:api">
<html>
<head>
<z:placeholder name="headcontent"></z:placeholder>
<z:cssinclude zazzlepage="z.2/css/default.css.aspx" />
<z:cssinclude zazzlepage="z.2/css/cn/contributor.css.aspx" />
<z:cssinclude storepage="css" />
</head>
<body class="oneFourZero">
<a class="skiplink" href="#main">Skip to content</a>
<div id="page" class="contributorPage">
<div id="mainShell">
<div id="pageMantle">
<z:pagelink name="pageMantleLink" target=""><span class="pageMantleSpacer"></span></z:pagelink>
</div>
<div id="pageHeader"></div>
<div id="main" class="clearfix">
<div id="group_1">
<div class="sidePod">
<div class="webonav">
<z:pagelink target="home">
<img src="http://www.theretrovert.com/outlink/zaz_examples/navtop.gif" alt="Alt Text tag for your Shop" width="158" height="62" border="0" />
</z:pagelink>
<div class="webobar">
<z:placeholder name="navpane"></z:placeholder>
</div>
<br />
<img src="http://www.theretrovert.com/outlink/zaz_examples/navbot.gif" width="158" height="21" />
</div>
</div>
</div>
<div id="group_2" class="contentPane">
<z:placeholder name="contentpane"></z:placeholder>
<div class="breadcrumbmod">
<a href="http://www.zazzle.com/custom_sections">Custom Section Example Store</a> > Custom Section #2</div>
<table border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td height="212">
<img src="http://shop.webomator.com/ars_celtica/custom_sections/subsection.gif" name="section2a" width="200" height="200" border="0" usemap="#section2a" id="section2a" />
</td>
<td>
<img src="http://shop.webomator.com/ars_celtica/custom_sections/subsection.gif" name="section2B" width="200" height="200" border="0" usemap="#section2B" id="section2B" />
</td>
<td>
<img src="http://shop.webomator.com/ars_celtica/custom_sections/subsection.gif" name="section2c" width="200" height="200" border="0" usemap="#section2c" id="section2c" />
</td>
</tr>
<tr align="center" valign="top">
<td>Subsection 2A</td>
<td>Subsection 2B</td>
<td>Subsection 2C</td>
</tr>
</table>
<map name="section2a" id="section2a">
<area shape="rect" coords="0,0,200,200" href="http://www.zazzle.com/custom_sections/gifts?cg=196401175370198621" alt="Section 2A" />
</map>
<map name="section2B" id="section2b">
<area shape="rect" coords="0,0,200,200" href="http://www.zazzle.com/custom_sections/gifts?cg=196240258764504920" alt="Section2B" />
</map>
<map name="section2c" id="section2c">
<area shape="rect" coords="0,0,200,200" href="http://www.zazzle.com/custom_sections/gifts?cg=196503220799125210" alt="Section2C" />
</map>
</div>
<div id="group_3"></div>
</div>
<!-- end main -->
</div>
<!-- end mainShell -->
<div class="clearBoth"></div>
</div>
<!-- end page -->
</body>
</html>
</z:htmltemplate>
<z:htmltemplate id="customctemplate" live="true" xmlns:z="urn:zazzle:api">
<html>
<head>
<z:placeholder name="headcontent"></z:placeholder>
<z:cssinclude zazzlepage="z.2/css/default.css.aspx" />
<z:cssinclude zazzlepage="z.2/css/cn/contributor.css.aspx" />
<z:cssinclude storepage="css" />
</head>
<body class="oneFourZero">
<a class="skiplink" href="#main">Skip to content</a>
<div id="page" class="contributorPage">
<div id="mainShell">
<div id="pageMantle">
<z:pagelink name="pageMantleLink" target=""><span class="pageMantleSpacer"></span></z:pagelink>
</div>
<div id="pageHeader"></div>
<div id="main" class="clearfix">
<div id="group_1">
<div class="sidePod">
<div class="webonav">
<z:pagelink target="home">
<img src="http://www.theretrovert.com/outlink/zaz_examples/navtop.gif" alt="Alt Text tag for your Shop" width="158" height="62" border="0" />
</z:pagelink>
<div class="webobar">
<z:placeholder name="navpane"></z:placeholder>
</div>
<br />
<img src="http://www.theretrovert.com/outlink/zaz_examples/navbot.gif" width="158" height="21" />
</div>
</div>
</div>
<div id="group_2" class="contentPane">
<z:placeholder name="contentpane"></z:placeholder>
<div class="breadcrumbmod">
<a href="http://www.zazzle.com/custom_sections">Custom Section Example Store</a> > Custom Section #3</div>
<table border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td height="212">
<img src="http://shop.webomator.com/ars_celtica/custom_sections/subsection.gif" name="section3a" width="200" height="200" border="0" usemap="#section3a" id="section3a" />
</td>
<td>
<img src="http://shop.webomator.com/ars_celtica/custom_sections/subsection.gif" name="section3B" width="200" height="200" border="0" usemap="#section3B" id="section3B" />
</td>
<td>
<img src="http://shop.webomator.com/ars_celtica/custom_sections/subsection.gif" name="section3c" width="200" height="200" border="0" usemap="#section3c" id="section3c" />
</td>
</tr>
<tr align="center" valign="top">
<td>Subsection 3A</td>
<td>Subsection 3B</td>
<td>Subsection 3C</td>
</tr>
</table>
<map name="section3a" id="section3a">
<area shape="rect" coords="0,0,200,200" href="http://www.zazzle.com/custom_sections/gifts?cg=196100965156177880" alt="Section 3A" />
</map>
<map name="section3B" id="section3b">
<area shape="rect" coords="0,0,200,200" href="http://www.zazzle.com/custom_sections/gifts?cg=196355626026082671" alt="Section3B" />
</map>
<map name="section3c" id="section3c">
<area shape="rect" coords="0,0,200,200" href="http://www.zazzle.com/custom_sections/gifts?cg=196707954656536929" alt="Section3C" />
</map>
</div>
<div id="group_3"></div>
</div>
<!-- end main -->
</div>
<!-- end mainShell -->
<div class="clearBoth"></div>
</div>
<!-- end page -->
</body>
</html>
</z:htmltemplate>
|
Validate and save.
This has created templates for the three Sections we defined in Step 2. Note that this HTML contains hard-coded links to the sections in this demo store!
Because that's not what you want, you will want to make some changes.
Figure 1 (again) . The content pane area of a Section Page from this demo store
The Breadcrumb for Section Pages is in their HTML custom layout; the breadcrumb for Subsection pages is in their Product Line description. The Subsection image links and their text labels are contained in a table that's part of the custom HTML template.
These Section page templates are called "customatemplate", "custombtemplate" and "customctemplate".
1. There's a custom breadcrumb at the top of the pane area in each template. You will want to change it to reflect your own Sections and Subsections (both the text and the links should change). The breadcrumb is styled with the "breadcrumbmod" class we added to the CSS. You can play with the font styles at any time, of course, to change the way the breadcrumb is rendered.
2. In each of the templates there is a table with three Subsection Images - you will want to change these to your own Subsection images, hosted remotely.
3. In each of them, there are text labels in a row below the Subsection Images. You will want to change those three to the names of your own Subsections.
4. Each image is associated with an image map. Zazzle does not add the rel="nofollow" attribute to image map links, which is why I've done it this way. You will want to change the links in the image maps to point at your own product line pages. Although you are doing this in your sandbox store you will eventually make these links point at your public store's product lines instead.
For testing purposes, just create a few product lines in the sandbox store and point to those, for now.
But wait! You made your product lines invisible, so you can't easily get at those links! Here's what to do.
Go back to Store/Content/Advanced and find the navpane section of the "About" page definition. Change "productlines" visible="false" back to "productlines" visible="true". Now, on the About page only, your product line links will appear. Copy them, then set "true" back to "false", and they're hidden again.
|
| 3B. Create the Custom HTML Templates - only if you skipped ahead because you've previously changed your Layout HTML |
Each custom template is based on the "Products" template. It includes a breadcrumb and a table that contains the Subsection images. You can copy those from my example above, and paste them into a copy of your own Products template.
There are three custom templates in this example code; they're called "customatemplate", "custombtemplate" and "customctemplate". You will need to make your own customized versions of all three in order to complete this tutorial.
Then modify the images, text and links as described above. |
| 4. Create the Breadcrumb in your product Line Descriptions
|
So what to Zazzle is a Product Line is now, to you, a Subsection of your custom Sections. You should have linked to the product lines in the image links (in Step 3) and the only thing that's missing is a breadcrumb in the Subsections that links back up through the hierarchy of Sections.
You will enter this as the Product Line description for each Subsection. In this demo store, the breadcrumb code for Section 1-A looks like this:
| <div class="breadcrumbmod"><a href="http://www.zazzle.com/custom_sections">Custom Section Example Store</a> > <a href="http://www.zazzle.com/custom_sections/custom1">Custom Section #1</a> > Subsection 1-A</div> |
 | ...So you'll want to change the links and text to match your own store's structure.
There's no reason why you couldn't nest these Subsections. Each one is really just a Product Line with no parent. It's the way you link to them that establishes their hierarchy.
In order to create Sub-Subsections in the example above, you could just add another table of Subsection Images above the breadcrumb; in their own breadcrumbs, you would make this present Section the parent of those new ones.
| Figure 2. A Subsection page with its custom breadcrumb from this demo store.
The custom breadcrumb for Subsection pages is part of their Product Line Description. You can still add a text description above or below the breadcrumb code.. |
Because the breadcrumbmod class is used everywhere we've added a breadcrumb trail you can change the appearance of the breadcrumb at any time just by editing that class in your CSS. |
| So That's a Start. |
Once you've applied these steps to one or more of the custom Sections you have the skeleton of a store without the problems of product lines and child product lines; without an impossibly long sidebar; and with product lines that are "hidden" from your sidebar (though not from the markeplace or an "All Products" search).
The bad news is, that was a fair amount of work. The good news is that adding new Sections and Subsections is easier because they're modified copies of the ones you've made before.
If you've completed this in your sandbox and want to use it in your public store, you'll want to make sure that the breadcrumb and image links in the templates point to the Product Lines in your public store. Taking this public will get a little messy, but if you work out all those links and the product line descriptions in advance, you can:
1. Copy the CSS, Layout, and Content from the sandbox and paste them into the public store
2. Change the product line descriptions in the public store
...and then check everything for errors. Every breadcrumb, every image link, everything. I wish there were a simpler and faster way, but there it is.
You
have
added a lot of hard-coded links to your store, and you need to make sure that every one of them works properly. This is a lot simpler if you're just establishing a new store - if you're retrofitting a large, existing store, you will learn to hate me right about now. |
| Expand Your Store With New Sections and Subsections |
To add more Subsections to an existing Section:
1. Create the new Product Line that will be the Subsection. Add its products.
2. In the template for the existing Section: add the new Subsection image, its label, and its image map - that can be based on any of the existing ones. When you paste copies of existing images and image maps, you will need to give them unique names and IDs. Do all of this in additional rows in the existing table.
Example:
You would
make a copy of an existing image tag, like this:
<img src="http://shop.webomator.com/ars_celtica/custom_sections/subsection.gif" name="section1a" width="200" height="200" border="0" usemap="#section1a" id="section1a" />
...and change each of those parts that are shown in bold to the URL of your image, its width and height, the unique name of the image map it will use, and its unique name and ID.
Then you would make a copy of the existing image map code, like this:
<map name="section1a" id="section1a">
<area shape="rect" coords="0,0,200,200" href="http://www.zazzle.com/custom_sections/gifts?cg=196274937678171717" alt="Section 1A" />
</map>
...and change each of the parts that's shown in bold to the unique name and ID of the new image map (the same as you created in "usemap", above), the width and height of your image, the link to your new Product Line, and the alt text for the link (usually the same as the Product Line name). |
3. In the new Product Line, add the Breadcrumb to the description.
To add a new Section:
1. Copy an existing section definition in Store/Content/Advanced
2. Paste it in below the old one and change its name and the name of the template it'll use to new, unique names.
3. In Appearance/Advanced/Layout, copy and paste an existing Section template. Change the copy's name to the name you invented above. Change its Breadcrumb to match the new hierarchy.
4. In the new Section template: modify the table of Subsection images and labels to point to the new Section's product lines (as shown in the example above).
Remember that you can grab links by turning on Product Lines in the navpane of a single page (like the About page). Once you've copied the links to your new product lines, you can turn the product lines off again.
And if you're disciplined enough to make the content definition the final step, the public will never see what you're doing behind the scenes.
|
| What madman did this? |
I'm Bradley W. Schenck, an artist and web designer who has been tinkering with Zazzle store customization since shortly before the system opened up to the public. I have two other stores at Zazzle (so far). They areArs Celtica and the Retropolis Travel Bureau.
My stores are highly customized but as you'll see, I do not use this system anywhere but here, in its demo store. Why not? I'm just not one of those people who desperately wants to organize a store this way. What I do myself is less complicated than this, but still more difficult than simply using Zazzle's default setup.
So why have I done this? It's just that so many people seem to want this kind of store that I decided to figure out how it could be done. I've learned a few new, valuable things as I worked on it, which is neat, but this system won't be directly useful to me. I made it for you.
I suspect that most of the people who want this kind of store also want it to be automatic, and that very few of them will want to go to these extreme lengths to get what they want. But if you do, and it works for you, think about buying one of the sample products from this store. Their sales will throw a little change in my pocket and boost my volume sales bonus. It's not compulsory, or anything, but it'd make me smile - and show me that this really was useful to someone. |
Sign in 
