I actually had a hard time thinking about what new feature to write about. I was going to talk about the already wildly popular Quick Product Create, but Patrick beat me to it on our regular blog. And who knows, maybe I’ll delve deeper into that on a later post.

So what I bring you today is an improvement to our embroidery offering…DST uploads and a colorizing user interface!

Ummm…what?

Ok, back up. What is a DST and what’s this colorizing thingy? Let me explain…

Embroidery requires images called “stitch files” that contain information about when to change thread colors and how to physically stitch a design. Our embroidery machines take these files and know how to sew it onto a product.

Up until now, we’ve used stitch files that contain all that information as well as what color threads to use. To convert a JPG or bitmap image to one of these stitch files, you need a professional conversion done (commonly known as “digitization”).

DST files are stitch files, but they are lacking one key piece of information we need: color data. Without knowing what color thread to use during a thread change, it’s rather difficult to make it look right. The good thing about DST files, however, is that they are a very common embroidery format with a large supporting community of embroidery experts all over that there Interweb

Red and yellow and pink and green…

We knew we wanted to support this common format, but we had to build a way for users to tell us what colors to use for each thread change in the file. Enter the colorizing UI (insert dramatic music here)!

When a user uploads a DST file, Zazzle chooses default colors for each thread change in the file…just so it contains something. The results are usually less than optimal. But by going to My Zazzle –> My Images and clicking on the image, there is a link to re-color the file:

Clicking that link brings up the colorizing UI:

The colorizing dialog shows the original stitch file image with the default colors on the left, and a set of color swatches on the right. Each color swatch represents a thread change in the stitch file. It is not uncommon for a stitch file to have multiple thread changes using the same color as a previous thread change. In other words, it is possible to assign duplicate colors to different swatches.

Clicking on a swatch brings up a palette of possible colors. These colors represent the thread spools our machines have access to.

Keep in mind that each image can only have a total of 10 colors including black and white.

So at this point, all you have to do is click each swatch and choose the appropriate color. The image updates in real time. Here’s how this file looks after some tweaks…

Much better! When finished, just click “Create copy with these colors” to create a copy of this stitch file. Every time you modify the colors of a stitch file, a new file gets created in My Images. This way you can have multiple colorized versions of the same design!

This process is not limited to newly uploaded DST files. If you’ve already had some of your existing designs converted for embroidery, you can also re-color those as well without having to pay for a second conversion!

Release O’Plenty

Wow. What a release! If you haven’t noticed already, we’ve just pushed out one of the biggest releases in Zazzle history. Not only are we now doing real embroidery, but we’ve packed this release full of candy-coated goodness! Unfortunately, we’ve hit a couple performance snags, but we’re getting those resolved very quickly – keep your eye on the Zazzle Forums for updates on that front.  For a quick overview, read our main blog post entitled Embroidery AND New Features. In this post, I’m going to get into some detail on some new features of the Zazzle Design Tool.

I’m such a tool(bar)

One of the first things you might notice is the look of our toolbar. We’ve reorganized it to show more options in a familiar menu style.

There are now Select, Edit, and Align options in the toolbar. These features help you select design elements, copy and paste them, and align them relative to each other. Next time you create something, check them out!

Also, if a product contains more than one design area (front and back of a t-shirt, multiple areas of a shoe, etc.) an Area selector appears on the left. This is a quick and easy way to select the different areas of a product to design on. And the best part is that now they contain easy to understand icons.

Oops, I messed up again

One thing a lot of people do is customize an existing design. You see a cool design and want to add your name, or you want to nudge the image a bit higher. If a contributor has allowed customization, anyone can do these things.

Of course, when you start messing around with a design, you may end up with something that doesn’t quite look like you pictured it. What to do?

REVERT! Yes, now there is an option to revert any design to its original state before you started changing things. Revert is located just under the Post for Sale button.

Templates made easy

So here’s the big one. The top banana. The Big Kahuna. El Jefe. Yes, ladies and gentlecontributors, we now have an easy way to make templates! Zoinks!

“You mean we don’t have to double-click somewhere and add cryptic brackets anymore?”

Correct. There is now a template UI!

You can make a product become a template by simply defining which image(s) or text object(s) can be replaced by the buyer.

Example:
Add an image to a product. You will notice an “Advanced options” link on the image object.

Click the Advanced options link to show all advanced options.

One of the options is a checkbox labeled “Make this a template object”. Checking that box will display all the options available for defining this template image placeholder.

When you select “Make this a template object”, you have access to four options:

1. Product page label – This is the label that the customer will see on the product page. Use something descriptive here, like “Your picture” or “Your logo”.
2. URL parameter name – If you are using the Zazzle API to pass data to this product from an external source, this is the parameter name the API will use. Avoid spaces or special characters. You can safely ignore this field if you are not working with the API (see the Zazzle API documentation for more information).
3. Inner fit/fill mode – For images.If your template allows the buyer to replace your placeholder image with one of her own, this setting determines how the buyer’s image replaces yours. The options are none, fit, or fill.
   
   none – If you set Inner fit/fill mode to none, the buyer’s image simply replaces your placeholder image, and may be larger or smaller than the placeholder.fit – Selecting fit will resize the buyer’s image to fit inside of your placeholder image object’s dimensions. This will ensure that their image is not cropped.
   
   fill – Selecting fill will resize their image to fill the entire dimensions of your placeholder image. If the buyer’s image is wider or taller than your placeholder, this may result in zooming and cropping of the customer’s image.
4. Allow editing on product page – Keep this checked if you want to enable EZ Templates on your product page. Unchecking this option is usually only done when working with the Zazzle API.

Once you have filled out all the options, click Post for Sale. You are then presented with the normal Post it for Sale page. Notice the checkbox labeled “This product is a template”. This tells you that the product contains template objects, and that it will be posted for sale as a template. Only uncheck it if you decide at this point to not allow customer personalization of this product; otherwise keep it checked.
Congratulations! You have just created a template product!

Lock it up!

Sometimes, you may want to create a template product but have items that are not changeable by a customer. Now you can simply check the box labeled “Lock this image” or “Lock this text object”. This will essentially lock the item and not allow any editing of it whatsoever (can’t delete it, move it, resize it, etc.)

That’s all there is to it, folks!

 
 
On Monday, August 18th, we launched our redesigned Zazzle website. Guess what we snuck in there for ya…the Zazzle Store Builder! Yes, now it is possible to put Zazzle products on your website with just a couple of quick text edits!

How easy is this?
All you have to do is enter your gallery name and your associate ID in a configuration file…and voilà! Instant store front! But it can go way deeper than that…over 20 different configurable parameters deeper. Here’s a taste:

• Google Analytics support
• Product line filter
• Product type filter
• Keyword filter
• Display product thumbnails in 5 different sizes
• Sorting and pagination controls
• Enable local caching
• Display product titles, descriptions, prices and contributor link
• Change the image background color

All these parameters and more can be set in a simple configuration text file. No programming required. But if you know a little CSS and HTML, you can do so much more.
 
Oh, and did I mention we are releasing this as Open Source? Yup. If you are a PHP programmer, feel free to dissect this, make it better, add features, create services…the possibilities are as open as you are!

 
Why do we need this?
Some of you may be asking “But Ed, why do we need to have an external web site when I have a perfectly good gallery on Zazzle.com?” The answer is simple. By driving your own traffic to your gallery on Zazzle, you will make more money! A potential customer that visits your Zazzle Store Builder site and clicks on a product thumbnail will be taken to that product in your gallery…with your associate referral ID tagging along for the ride! That means that anything that user buys from Zazzle during that session funnels a percentage to you. And there’s a good chance they’ll buy YOUR product since that’s how they got to Zazzle in the first place. Which means double whammy! Referral AND royalty!
 
And another cool thing is that customers who click over to your gallery from your Store Builder site will be treated to the zBar (a much smaller Zazzle header), putting YOUR brand where it matters most…right in front of the customer that YOU brought to Zazzle.

 
What are the requirements to set this up?
All you need is a web host that supports PHP, and about 10 minutes! We provide documentation (pdf: 3MB) to guide you during setup, and there is now a Tools Forum where you can ask questions or help others if you are wise in the ways of geekdom

 
How does it work?
So what’s the magic behind the Zazzle Store Builder? Simple. RSS feeds. Zazzle’s new gallery RSS architecture lent us the opportunity to build a pretty robust application that gives you, the store owner, the power to design your own store front just the way you want it.

 
Ok, where can I download this?
I can go on all night about the Zazzle Store Builder. But you should really just download it and try it yourself. It’s FREE, so you have nothing to lose…and so much to gain!
 

I gotta tell you…playing around with Zazzle’s text tool is fun. There are so many cool fonts to choose from that I don’t think I’ve ever actually seen them all. I always end up finding one I like before I explore deeper.

But therein lies a problem…with so many fonts to choose from, it takes a long time to test each one out to see if it works in your design. Add to that the fact that you would find a font, select it, the font chooser would go away, your design would get updated, and THEN you make the decision whether it works or not. If it doesn’t, you start all over and open the font chooser dialog again. Phew.

Well, be weary no longer, folks! There’s a new font selector in town, and he’s kicking picas and taking names! I call him FontZee. (Hey, why not? We have Maggie the magnifier!)

Bask in FontZee’s glory:

So what’s so great about it?

• Fonts are organized better…each font category now lists how many fonts it includes
• Select a font and see it update on your design immediately! This is the big one for me. Now I can scroll through and select a font, immediately decide whether it works, choose another one, etc.
• Recently used fonts are now saved in the dialog
• The font dialog actually loads a bit faster

See, people? It’s the little things that make me happy!

^{The name FontZee is not official, nor does Zazzle promote the use of it. It is simply a product of this editor’s sick mind, and any similarity to any person, living or dead, is purely coincidental. The end.}

These new features are so cool, I just have to cross post here in the Tech Blog! Line things up accurately…check! Space things out evenly…check! Follow the link for details…

Please form an evenly spaced single line

To keep things on the tech topic, here’s a little CSS tip on how to center a block element inside another block element. Here’s a CSS class:

.centerme {
  margin-left: auto;
  margin-right: auto;
  width: 140px;
}


And here’s the HTML:


<div style=”width: 400px”>
<div class=”centerme”>This is text inside a DIV tag.</div>
</div>


The idea here is that we are setting the left and right margins of the parent DIV to be equal (auto), and the inner DIV, with a width of 140px, automatically gets centered. Neat.

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!

When we started our LicensePlateShirts gallery on Zazzle, we actually used the Zazzle API to create an external website where customers could choose a state, then type whatever text they want to appear on that state’s license plate. They would then click over to Zazzle’s design tool with the license plate and custom text already loaded. (See http://www.license-plate-shirts.com/)

This approach works well, but contains a few drawbacks. First, there is a huge time commitment in designing and coding up a website. Even if you already have a website, you’ll need to write some code to add your products. Also, once the user lands on Zazzle, they are dealing with a single product design, and how to change to a different design (another license plate, for example) is not obvious.

Show Me the Buffet
So how do we make it easier for both contributors and customers? For contributors, we need to remove the difficult barrier of writing web code. And customers need to be able to customize an entire buffet of products at once, without jumping through hoops.

Enter project “Template Buffet”…the internal code name for this new feature. Here’s how it works:

1. A contributor creates a set of template products (see documentation)

2. The contributor creates a new gallery product line and publishes these template products in that category.

3. From the Create-a-Product API page, the contributor selects to create a category link. In three easy steps, the contributor generates a web address to this product line. (Visit LicensePlateShirt’s category link)

4. Navigating to this address takes customers to a simple page that shows all the products, and allows easy customization.

No programming needed by the contributor, and no back and forth by the customer to get the right design on the right product. Dinner is served.

Overheard in a Zazzle internal email thread about new button objects. Had to share…

Annette: What's a better unambiguous name for z2 Buttons? 

Ed: How about HTMLButton (since that's really all it is) 

Chris: How about ButtonButton, since it uses a BUTTON tag? 

Ben: How about BenButton since I'm so vain? 

Annette: BenButton.GetLint() 

Ben: That would return Lint.Empty  

Rich: if (aBenButton.GetLint() != Lint.Empty)

          throw up; 

Ben:if (aBenButton.GetLint() != Lint.Empty) {

          aBenButton.NeedsToBathe = true;

          throw up; 

        }

This is a very cool implementation of our creation API! Says-It.com let’s you choose from various people, backgrounds, etc, and add your own pearls of wisdom.

Then choose from a list of Zazzle products, like mousepads, t-shirts, mugs, keychains and more. Easy…breezy…beautiful!

For more info on our creation API, check my previous post.

Howdy Zazzle tech geeks! I know it’s been a while since we’ve posted on the tech blog, but you know how it is when we have a major release to work on (can anyone say new print design tool?)

Well, I just thought I’d chime in quickly here and remind some of you about our cool API tools. With these tools, you can create links from your own websites to customized versions of your own products. So, for example, you can create a template of a greeting card, with a nice border, frilly graphics, and cute accents, and someone can come to YOUR website and enter some text (or an image), and voila! They will be taken to the greeting card design with their info filled in! YAY!

Think of the possibilities, my friends.  Check out our API documentation and start thinking way outside the box!