Zazzle Tech Blog

Wow, you Zazzlers out there really blew us away with your amazing talent and creativity! Ever since we released the Advanced Store Customization Beta, our incredible Zazzle Community hit the pavement and worked tirelessly to build their own brands, create innovative user experiences, and perhaps most importantly, help each other out in our forums.

Below is a showcase of some our favorites so far…

Keep up the amazing work…we honestly can’t wait to see what you guys do next!

For more tips, tricks, and advice on this feature, be sure to visit the Advanced Store Customization beta forum. Many folks have already written detailed and very informative tutorials to help you get started.

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

1. Select “Create a custom look”
2. Enable the Advanced Store Customization checkbox
3. 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).

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.

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!

It’s easy to automatically add your new Zazzle products to a Twitter feed. I’ve done this over at twitter.com/hikingviking. Here’s how:

1. Get an account on TwitterFeed, a service that reads RSS feeds and will lob them over to your twitter account. There are probably lots of services like this, but TwitterFeed has been gaining popularity in my circles, and it does the trick pretty well.

1(b). Note that to sign up for TwitterFeed, you will need an OpenId identity. You have one already if you have a Gmail or Yahoo account, or sign up with one of the other OpenId providers; TwitterFeed gives you a list. (Personally, I like ClaimId because I went to Carolina, too.)

2. Once you’re in TwitterFeed, go to “My Feeds” and click “Create a new feed”, and hook up your Zazzle feed to your Twitter account:

3. You need your feed url. Zazzle has lots of information about feeds here. The url I’m using looks like this:

http://feed.zazzle.com/hikingviking/feed?ft=gb&at=238898476793705621

Dissecting this url, we know that:

/hikingviking means I’m pulling products from my “hikingviking” gallery on Zazzle.

ft=gb means I’m pulling the “Google Base” formatted RSS feed, which gives me better access to the raw data about my product. The “title” and “description” fields are the actual title and description I have entered on Zazzle, and not html markup that allows images and links to show up in RSS reader applications.

at=238898476793705621 is how I make sure I will earn referral fees if you click through and buy stuff. Feel free to use my associate ID in your TwitterFeed! Or, you probably want to substitute your own.

The default sort type on feeds is “most recent”, so I am sure that I am picking up the products I have most recently published on Zazzle. TwitterFeed is smart enough to know what’s new every time it checks, so it won’t post duplicate products to your Twitter account.

4. The other options on the TwitterFeed page are up to you. You will have to trust TwitterFeed with your login information to your Twitter account, obviously. Then, I chose to include “title & description”, to shorten my link using TinyURL, and to prefix my post with “New @zazzle -”. That’s it! TwitterFeed runs every hour and will pick up anything new you have published to Zazzle.

I drive a hybrid and pride myself on getting amazing mileage (52MPG lifetime, baby!). To accomplish this, I drive…well…slow. I go under the speed limit and stay in the right lane. Works for me…I’m a laid back guy who takes life slowly and casually.

But there is one place where I welcome a little high speed action. And that’s in creating products on Zazzle! Introducing Quick Product Create!

Yes, now it’s easy to create up to 100 products instantly. Quick Product Create (or QPC) is a simple three step wizard that allows you to create multiple products using selections of related products (all products, dark apparel, paper products, etc.) from the Zazzle Default Products menu, or from one of your own Product Lines that contain matching product templates.

Design for success

The first thing you need is a design you plan to put on many products. Typically, this is in the form of an image (a JPG, GIF, PNG, etc.) Since this one design will be blasted on several products, you should design it with that in mind. Here are some hints:

• Create the image at the highest resolution you can. Since this image will be placed on several products at differing sizes, it’s best to make sure it’s of sufficient size and quality so it will print properly on most products. Visit our image guidelines page for more information on image resolution.
• Think about colors. If your design only works on a dark background, you will have to make sure the products you put it on are dark. One trick I’ve seen many contributors do is to outline a design in either black or white. In other words, a design that only works on a white or light background can work on all backgrounds if a white or light outline is added around it.
• Think about shape. A long rectangular design can look great on many products (full wrap mugs, ties, t-shirts), but may not work well on others (buttons, magnets, stamps). If your design is not suitable for some merchandise, be sure to remove those items from the set of products you publish.

Ok, so I have my design. I’m going to use this “Get outta my grill” image I made a while back.

The original is a high resolution PNG file, so it should work fine for most products.

Place it!

Ok, got my image. Now I need to start the Quick Product Create process by going to http://www.zazzle.com/cr/quick/start. When you start, you see this dialog pop up:

Click the dropdown arrow in Step 1 to see what options you have:

As you can see, there are some default Zazzle Product Lines you can choose from. These currently include:

• All Products
• All Non-apparel
• Apparel only
• Dark Apparel Only
• Light Apparel Only
• Paper Products

If you have previously created a Product Line in your gallery that contains template products, it will show up here as well under My Product Lines. This way you can pre-define a custom set of products that you create often. Rob has written a great post about how to create your own Product Lines for Quick Product Create. Advanced users, read all about it here!

I’ll choose All Products since it contains a nice mix of t-shirts, cards, stamps, mugs, and other products.

Once you select a Product Line, you will see that you can change the default image in Step 2. Click the link that says “Change”, and you will see all your Zazzle images, or you can upload a new one. Here, I’ve selected my “Get outta my grill” image.

In Step 3 you will notice that you have the option to change the default fit/fill mode to one of three options:

1. Use template defaults (uses whatever the product template was designed with. Could be either fit or fill.)
2. Fit (makes sure your entire image is visible in the product’s design area – no cropping)
3. Fill (fills the entire product’s design area. Cropping may occur)

For most cases, using the default should be fine.

Ok…click Create Products…

Shazam!

Now I have a grid of 33 products with my design!

Sweet! Now all I have to do is check to make sure all products look their best. If something needs to be tweaked, there are ways to do that on a per-product basis. For example, the first sticker in the grid looks a bit tight. Looks like my design is getting a little cut off. Luckily, we have controls you can use right above each product:

• Edit options – This opens a dialog with product options (sizes, styles, product views)
• Customize - This brings up a mini design tool in a dialog where I can move things around, add images or text, change sizes, etc.
• Delete - Removes the product from the set of products you are creating with Quick Product Create.

Since the image on the sticker is a bit too big and is getting cut off, I need to shrink it. To do so, I click the “customize” link above my sticker product and shrink the image with the “resize” tool in the mini design tool.

Details, details, details

Now all my products look good and I’m ready to continue, so I click Next. I’m presented with a screen that is very similar to our Post For Sale page. You need to fill out all the information for these products, including title, description, tags, royalty percentage, etc. Required fields have a red asterisk next to them.

Most of these options are pretty self explanatory. However, there is a dropdown labeled “Quick Create Product Options”. Let me explain the options.

Most of the time, you are simply going to select the default option “Products to sell” because that’s what you are doing…creating products to sell.

However, if you want to make products to sell that are templates (so buyers can easily change text or images), you would select the second option, “Templates for sale”. This ensures that all fields marked as a template will remain a template when posted for sale. For more on how to create templates, see my previous post, More than just embroidery…

The third option, “Templates for reuse for quick create” is an advanced option for people who want to create a new set of products to use the next time they use Quick Product Create. This new Product Line would show up in the Step 1 dropdown under My Product Lines. As I mentioned before, Rob’s post explains how to do this.

Tada!

Click Post It and you’re done! All products are now queued up for creation. This takes anywhere from a few minutes to 24 hours. If you have postage or shoes in your Product Line, expect those products to appear in the Product Line closer to the 24 hour limit since those products need to be approved before they get posted.

Helpful hints

• You can have up to 100 products posted at once. If you want more products, repeat the process after you create your first grid of products by clicking on the Create More button at the top of the first page, or at the end of the process you can click the Do It Again button.
• There are checkboxes next to each product created in the grid. Use these to select multiple products that you want to remove from the grid. At the top of the grid, click “Delete selected” to remove them. Use these to select individual products that you want to remove from your Product Line.  To select multiple products, it’s often faster to use the “Select all” link at the top of the page and de-select those products you’d like to keep.
• Always be sure to check your design on all the products in your grid before moving to the next step. You don’t want to post a product where the image is cut off or not positioned properly.
• Quick Product Create puts all products you create in one Product Line. Select an existing Product Line when posting for sale, or create an entirely new Product Line based on the design. For example, with the image I used above, I could create a Product Line called “Get outta my grill!” and post all these products there. Many successful contributors organize their galleries by design.

That’s all I have for now…happy creating!

Trudging Across The Tundra

Sometimes, you have to take a step back and look at where you are before you are able to move forward in any reasonable way. When you have your head down, trudging across the tundra, mile after mile, you forget to look up every so often to see if you are moving in the right direction. Well, we just looked up. And we noticed that there were many places we could optimize in our code…from CSS to HTML to JavaScript.

In this latest incarnation of the Zazzle website, there are more behind the scenes changes than there are…well, things that there are a lot of. We took the time to essentially restructure our pages for performance and scalability, by doing a few simple things: organize page elements to load in a specific order, remove huge chunks of now redundant CSS, and implement a new design that allows us to use less images and HTML.

If You Build It Right, It Will Come Faster

Our first task was to take a look at the overall structure of our pages. This includes everything from what’s in the HEAD section, to where we load in our JavaScript. The important thing to note about this is that by structuring our pages in a consistent way throughout our site, we could now make better decisions about what external files need to be loaded, and where. This also allowed us to make the decision to load most, if not all, of our JavaScript at the very bottom of every document.

So what, you ask? In our old site, we would load in a default CSS file for all pages, and if anything on that page needed special stylings, we would override them with styles from another file specific to that page. Ok, makes sense. And we still actually do that.

But the big difference is that now that the pages are structured in a consistent manner, it’s a lot easier to NOT have to do an override of an override of an override to achieve a particular look since we are only loading in the CSS files that are needed. There were many cases before where we had many CSS files loaded for a page, each performing overrides.

On top of that, the CSS itself has been optimized in many places, mostly due to the simplified HTML markup that makes up the page. Simpler markup means simpler CSS…which leads to much less code. How much less? We estimate that there is approximately 50% LESS CSS than before, and with a much cleaner user interface. Win-win baby!

Loading JavaScript at the bottom of each page also serves two purposes. One, the page HTML loads and displays to the user while downloading instead of waiting for JavaScript to download. Second, it allows us to easily “wire up” scripted elements on the page once the page is complete. The advantage there is that at this point we are certain all elements exist and the JavaScript can run unfettered.

Rounded Corners Are So 2003

There are some things HTML/CSS just doesn’t do well. Rounded corners are one of those things. Our old design used many rounded corners all over the place, which caused us to create something we called a “zBox”. What is a zBox? It’s basically a bunch of HTML and CSS that would render a box container with rounded corners. We made it so easy for us to use that whenever we needed to add a new container to our page, we’d simply call our zBox component.

The only problem was that a zBox contained a significant amount of HTML and CSS, not to mention images that needed to be loaded for the corners. It was not unheard of to have a page with half a dozen or more zBoxes.

With our redesign, we decided to simplify…not only the code, but the entire look of the site. This meant getting rid of the ubiquitous zBox. By simply replacing zBoxes with single DIV containers, we were able to remove huge amounts of markup and images, making each page that much lighter to load.

Here’s an example piece of code for a zBox:

<div class=”zBox” id=”divId”>
<div class=”zBoxTop”>
<div class=”zBoxTopDiv1″></div>
<div class=”zBoxTopDiv2″></div>
</div>
<div class=”zBoxMiddle”>
<div class=”zBoxContentWrapper”>
<div class=”zBoxContent clearfix” id=”innerDivId”>
##content##
</div>
</div>
<div class=”zBoxContentDiv1″></div>
<div class=”zBoxContentDiv2″></div>
</div>
<div class=”zBoxBottom”>
<div class=”zBoxBottomDiv1″></div>
<div class=”zBoxBottomDiv2″></div>
</div>
</div>

And here’s that same container without using zBox:

<div class=”myClass“ id=”divId”>
##content##
</div>

And that’s not even including the CSS and images that are needed! So needless to say, with our new simplified design, we were able to cut tons of unneeded code from the site. It’s like Zazzle went on a diet and looks great!

Even The Skin is Low Fat

With our svelte new design and our consistent page structure, we are now able to provide room for future growth. And where do growths usually occur? Well, on the skin, of course! Yes, gross analogy aside, we will be able to offer the ability to skin parts of our site!

We already provide themes for contributors to skin their entire galleries. This helps contributors create a brand and experience tied to their art and designs. The steps we’re taking with our website technology move towards deep level customizations. Imagine being able to skin the gallery with even more control (like custom CSS!) – just like we’ve started to on Zazzle. The possibilities will be endless!