You’re up on the stage, in front of millions, singing “Somewhere Over the Rainbow”, a song that’s been done to death. How do you stand out? How do you make it NOT sound like Karaoke? Easy. Change the tempo, add different inflections, improvise a vocal run…basically, you make it your own, dawg! (ahhhh, he said it!)
The same idea applies to your Zazzle store. Some store owners add pizzazz with header graphics, some add HTML in their description. But most stores have the same basic layout…until now!
Introducing….
Yes, ladies and gentlemen, Zazzle has now opened up the ability to customize your own storefront however you see fit. Edit CSS and HTML directly, add your own pages, display what you want, where you want it.
Download Full Documentation (Recommended)
This blog post will get you started, but for more complete documentation, please download the Advanced Store Customization Guide (1.9Mb, PDF) .
You must be this tall to ride
Be forewarned…this is currently in open BETA, which basically means we are testing this feature and cannot provide official support. To use this feature successfully, it is highly recommended that you have a working knowledge of CSS and HTML, and some familiarity with XML. Keep in mind that by messing around with the direct code behind your store, you could very easily break it and render your store unusable, forcing you to revert to defaults and start over.
So, what can it do?
Well, you can pretty much do almost anything you want with this. I won’t go into detail on how to write CSS or HTML, but let me show you some examples of the power it provides you:
- Retropolis Travel Bureau – Amazing use of CSS
- Clone Wars – This is the official Clone Wars store on Zazzle. It was built using the same techniques that the Advanced Store Customization allows. Check out the header section and the background image. Nifty.
- Star Wars – Same as above…but looks so cool we had to show it!
- Hikingviking – Excellent use of a background image to make the site pop. Also check out the blog and store “tabs” at the top. The blog links out to this store owner’s blog, which happens to look just like his storefront!
- Life Embellished – Nice use of an office theme with a paper background and manila folder content area.
- Nuclear Tees – Great example of a complete change in navigation and store home page
Neat! I want that!
Since this is still in beta, the first thing you’ll have to do is enable the feature. Here’s how.
First, go to http://www.zazzle.com/my/gallery/appearance
- Select “Create a custom look”
- Enable the Advanced Store Customization checkbox
- Save your settings
After saving your changes, you will see this warning:
Hit OK to enable Advanced Store Customization. Once enabled, a new tab labeled “Beta! Advanced” appears. Click on it to see and edit your Layout and Style code.
In the trenches
Advanced Store Customization opens up the guts of your storefront and allows you to change the code that builds it. It handles this by splitting up your store’s code into three editable parts: Layout (HTML), Style (CSS), and Content Definition (XML).
- Layout – This is the HTML markup of all the pages in your store, mixed in with a bit of Zazzle goodness.
- Style – This is the CSS of your store. It defines the colors, fonts, backgrounds, and general look of your store.
- Content Definition – This is the XML markup that lists pages, modules, and other content areas of your store.
Let’s try one of the easiest store customizations…adding a background image to your storefront. It’s pretty easy.
In the Style text box (found under My Zazzle–>Store–>Appearance–>Advanced tab), look for the #mainShell section of code and add the URL to an image in the background declaration:
#mainShell {
position:relative;
width:100%;
padding-bottom:40px;
background:#bbccdd url(“http://www.yoursite.com/inc/yourImage-bkg.jpg”) top center no-repeat;
}
Then hit Validate and Save Changes (or select the Preview button to test first). That’s it! Now your store will have a background image! This is one of the easiest changes you can make, but can quickly add some personality to your store. Here are a couple of examples of stores with nothing more than a background image:
- Pantera’s Official Merch Store – One large background image
- Mim’s Official Merch Store – Repeating pattern background
- My own store – Subtle repeating background
- Harryterry – Fading stars background
That’s about all I can cover in this blog post, but for more complete documentation, please download the Advanced Store Customization Guide (1.9Mb, PDF) . Like I stated earlier, this feature is in open beta, so there will be no official support for it (don’t call customer support for this!), but we have setup a new discussion forum so anyone experimenting with Advanced Store Customization can discuss their experiences, get help, and help others who are trying it out.
With the ability to completely change the look and feel of your store, we’re hoping to see some really creative designs and layouts! Dig in, folks…time to truly make it your own!
Like this:
Like Loading...
Subscribe
