Announcing Advanced Store Customization!

by

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….

asc

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

  1. Select “Create a custom look”
  2. Enable the Advanced Store Customization checkbox
  3. Save your settings

1_appearance

After saving your changes, you will see this warning:

2_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.

3_advanced

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).

  1. Layout – This is the HTML markup of all the pages in your store, mixed in with a bit of Zazzle goodness.
  2. Style – This is the CSS of your store. It defines the colors, fonts, backgrounds, and general look of your store.
  3. 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.

4_edit_css

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:

  1. Pantera’s Official Merch Store – One large background image
  2. Mim’s Official Merch Store – Repeating pattern background
  3. My own store – Subtle repeating background
  4. 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!

13 Responses to “Announcing Advanced Store Customization!”

  1. MouseArte Says:

    Fantastic. I’m pretty much a nerd at HTML or CSS but just the ability to put a background on my gallery will help give it a nicer, cleaner look (I hope). Thanks for all the hard work that I know went into giving us this capability.

  2. BlockQuoteProducts Says:

    Cool – let the games begin !

  3. deadhippo Says:

    Great thanks. Hope I will be able to add a bit of javascript cause I really want to add tracking that is more useful to us shopkeepers than Google Analytics.

  4. Maria Says:

    this is great guys but I personally think that you should make it a bit easier to customize the appearance of the background…instead of having us look for where to exactly insert the code…how about something like how myspace has it but ofcourse not exactly. I have dealed with html codes before but only on myspace since it’s really simple there but I rather not move anything in my shop other than uploading a header…lol..I would hate for my shop to get messed up :/. I’m not saying this isn’t good cuz it is only that it need a bit more okay :) and btw Zazzle Rocks! and also I’m so glad they now have doggie shirts! Cafepress has undergarments and other things but it’s just a matter of time till zazzle catches up and tells cafepress to move out of the way…lol. But anyways, back to this editing stuff, guys c’mon you can make it more flexible to use…we believe in you all :)

  5. Arthur Says:

    This is terrific. Thank you so much for adding the ability to customize galleries.

  6. Lynn Says:

    How awesome! I can’t wait to try it out. :)

    Lynn

  7. Joni Says:

    Woohoooo!!!!

    One thing though. What it HTML and CSS?

    *lol*

    *pokes fun*

    Joni

  8. Store Customization Showcase! « Zazzle Tech Blog Says:

    [...] Zazzle Tech Blog a peek under the hood at Zazzle « Announcing Advanced Store Customization! [...]

  9. Mindy Says:

    *sob* I so want this to work but I am having no luck. I copied and pasted, and followed instructions to the very best of my ability. No go. And what I want is so simple, just a custom background and graphic that’s longer than 200 pixels. If anybody can help me, I would be happy to pay them.

    Zazzle store: zazzle.com/yesterdaysgirl

    Thank you :)

  10. Cindy Says:

    Hi
    I just wanted to say this blog was so very helpful, I sure hope I am able to do some of these things, I have tryed so many and no luck as of yet,

    Thanks for sharing ,

    Cindy

    B-Dazzled @ Cindy’s

  11. Segott Says:

    I HATE this new interface!!!!!!!!!! If you want to improve it, then allow me to post what I want to post on the homepage. You eliminated the ‘Featured Products’ and now, I even more limited in what I can do. I should be able to customize my home page, allow which pictures are on it, not be limited to the number shown and in general, given more control.!

  12. Seth Says:

    Awesome documentation!

  13. nelson Says:

    All about customization !..Thank u Ed, really help documentation…I’ll try it..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

Join 671 other followers

%d bloggers like this: