How to Show Off Zazzle Products Using Text Modules

Featuring Zazzle Products in Horizontal Rows

Calling all Zazzle Associates! Here's a simple way to feature attractive picture links to your own or other Zazzlers' products. Products can be grouped in horizontal rows of two or more products or with one large picture link spotlighting one product.

By putting the Associate link codes provided by Zazzle into text modules, you can even use Zazzle products to illustrate your lenses and make money doing it. The new Squidoo Zazzle modules are great for featuring newer products, but I like to have more flexibility in product choice, size and placement. This lens will show you how, even if you're not familiar with html code.

Step by Step Instructions

for creating eye catching lenses featuring any Zazzle product, whether old or recent.

First Things First, Let's Start with Zazzle

In order to reap the benefits of this kind of lens, you must have a Zazzle Gallery AND also be an Associate of Zazzle. It's easy to join Zazzle and it's free. Just create a couple of products using their editor and post them for sale. Then all you have to do is follow the instruction below to become an Associate.

How to become an Associate1. Create one or two products and post them for sale.
2. From your Zazzle Gallery, on the top of the page, click on "Sell", then "See More".
3. On the column on the left, click on Zazzle Associate Program. Read about the Associate Program.
4. To become an Associate, click on the green "Become an Associate" box in the upper right part of the screen. Then follow the instructions to become an associate.

Now You Are a Zazzle Associate

Each associate has an associate number that is embedded in the code of each product that they create and/or link to. You can also get associate benefits for your entire gallery by placing an (*) asterisk behind your gallery name, (eg.: naturegirl7*). Once you have signed up as an associate, you can find your associate information in the Gallery section of "My Zazzle". Zazzle makes it easy to get the code to showcase products in Zazzle lenses that will give a Zazzle associate the full 15% referral fee.

Squidoo's new Zazzle module and Zazzle lens builder is a quick and easy way to promote recently created Zazzle products, but at the time of this writing, it was not clear how or if you would get the 15% referral fee. Also, by using one or more text modules to feature and promote your (or others) Zazzle products, you can create eye catching lenses with attractively arranged rows of picture links of any products and be assured of receiving the full referral fee if anyone clicks through your lens to purchase something on Zazzle. You can also combine the text modules with the new Zazzle modules and any other module you choose.

Here's How to Create a Link to Promote a Product in a Squidoo Lens:

1. Make sure that you are logged on to Zazzle. This is VERY important, because if you are not logged on your associate number will not be placed in the code and you will not be reminded to log on in this section.

2. Search Zazzle to find appropriate products or use some of your own products. You will get the 15% either way.

3. Click on the product that you want to promote (link to).

4. You will find the link to click on the right, under the product description and customizing options. In the picture below, it is under the white "$5 off All Shirts" box :

zazzle product Keds

5. When you click the link button, you should then see this. A yellow/orange arrow points to the link:

zazzle link with arrow

Copy the code in the Option 2: Copy and Paste HTML section into a word pad or word file. I use the default (medium) size because I can either size it up or down by changing one number. I'll show you how to do that later. It is best to keep a word file of all of the codes and text of your lenses. That way if anything unforeseen happens online, it will be simple to copy and paste portions of your lens back into place.

6. Repeat the process for each product that you want to promote, leaving a blank line between each to make it easier to work with them.

7. After you've copied the code for each, you're ready to prepare them for your lens.

Manipulating the Code

I know, HTML Code can be scary, but we'll take baby steps here. Just think of HTML code as another language. Each symbol and sequence of letters and numbers tells the computer what you want it to do. The code that you copied into your word file gives you more than you really need, so we're going to delete some of it.

Take a look at the picture below. The text that we need to delete first is in red and I have circled it in yellow as well. The first short line that starts with div would be deleted by Squidoo anyway because it is not used by Squidoo. The last, long section is an advertisement for Zazzle saying: "Design your own shoes online with www.Zazzle.com (new line) View other Color Keds Shoes". We don't need that so it's out of here.

zazzle product link code to delete

Here's how the product link would look if we copied the whole thing in just like it was:

Fairy Rose Kids Keds Shoe by naturegirl7
Design your own shoes online with www.Zazzle.com
View other Color Keds Shoes

Identifying the Code

I have identified what each part of the code means in the example below. Take a look and you can see the "opening" and "closing" part of each string of code.

zazzle product code explained

The picture below shows how the code should look after you've deleted the extra parts. The code should start with: (a href) and ends with your gallery name followed by the close link code (/a). Do you see it? This code will show a medium sized picture with the words: Fairy Rose Kids Keds Shoe by naturegirl7 under it. The picture, Fairy Rose Kids Keds Shoe and naturegirl will link (with my associate number) to the product or gallery.

zazzle product code pic with product name

Here is how the product link looks with the unnecessary parts deleted:

Fairy Rose Kids Keds Shoe by naturegirl7

Now go back to your word file and delete the extra code from each product. Don't forget to save your work.

Sizing Picture Links, Centering and Making Rows

Now we're going to make a few small changes and additions to the code to make it look great on the text module of your lens. The picture links look so much more professional if they are centered. The code to center is simple. One thing to remember about code is that you must tell the computer what to do by writing the special code before the text and then you tell it when to stop doing it by placing the stop code (/p) at the end of the text. It's like training a dog. Give the command and then say "ok" when you want it to stop.

The code I use to center text or an object can be seen in orange below. This code will also leave a blank line before and after the centered object.

Take a look at the example below. The centering code is orange. The size code number (325.jpg) is deep red.

zazzle product code centered

This size works well for one picture link per row as you can see below.

One large Product Picture Link with product and by artist name underneath

The size of the picture link is "325", which is medium. I often enlarge it to "425" to really show the product off.

Fairy Rose Kids Keds Shoe by naturegirl7

You can also adjust the size of the picture and display two or more products per row. Some products like stickers and stamps can be displayed with more than three pictures on each row. Here are three different options for size and arrangement. They can be displayed singly (like the one above), two per line or three per line. The size of the object determines how many will fit on a line.

To get rows, you need to string the code together with either no spaces or only 1 space (not returns or breaks (/br) between each product's code.

For the multiple displays, you will use only the picture code. I use this style for my own products and place the "Designs by naturegirl7" link centered at the top of the module. Take a look at the examples below.

Two Picture Links per Row

Notice that the code number (in dark red, before ".jpg") has been changed from 325 to 235. For some products you will need to change it to 200. Any number between 200 and 235 should fit 2 per row. Also notice that the close centering command is after all of the product codes. This will center everything between the opening command and the closing command. You can string any number of product code like this and it will arrange them in rows of two.

zazzle 2 products per row

This is how it will look:

Three Picture Links per Row

If you want three per row, you change the size code to 190. You can string the code for any number of products together like this and it will put them in rows of three.

zazzle 3 products per row

Here's how it will look on the lens page:

Hats - Four Per Row

Hats look nice with 4 on each row. Change the size from 325 to 130.

Visit our Zazzle Gallery to see more Hats.

Stickers - 5 Per Row

For smaller products like stickers, you may want more per line. To do this just change the size number (325) to 100 and there will be 5 products on each row. It will look like this:

Visit our Zazzle Gallery to see more Stickers.

Design Pointers

When arranging product pictures in rows, it looks better to keep like products in the same row. It's much easier if you use a text module for each different type of product. You can mix them up and I do that when I want to feature several Zazzle products with the same theme for a particular lens, but for Showcase type lenses, it's better to organize the products by type.

Zazzle posters, postcards and even stickers make great illustrations. I use the first example with the single large picture and the name of the product and creator. I've found that by adding the word "Buy" in front of the name (like AllPosters does) will alert the reader that this illustration is for sale.

Zazzle also has rss feeds available. Just add an rss module and go to Zazzle to get the address and add it to the module. Every time you create new products they will be featured on the Squidoo lens.

The new Zazzle module can also be added to this Squidoo lens. Zazzle modules also show the most recent work of the gallery and search terms that you specify.

Naturally Native Gallery RSS Feed

To show an RSS feed of your most recently created products, go to your gallery and click on the RSS Feed Box (orange box with white stripes) in the url address window at the top. When you get the new page where you can subscribe to the RSS feed, copy the url (http:) address from the window and paste it into the "What URL would you like to pull RSS from?" window in the Squidoo RSS module. Select the number of items (headlines), select "everything available" under excerpt and select "yes" to display html.

Fetching RSS feed... please stand by

HTML for Dummies

Simple and easy to understand instructions. Great for a beginner.

HTML, XHTML, and CSS All-in-One Desk Reference For Dummies (For Dummies (Computer/Tech))

by: Andy Harris, Chris McCulloh

Amazon Price: $23.09 (as of 12/16/2009)

Teach Yourself Visually Books

I like all the "Teach Yourself Visually" books. All the explanations are accompanied by screen shots of the code and also full color pictures of the result of the code.

Teach Yourself VISUALLY HTML and CSS (Teach Yourself VISUALLY (Tech))

by: Mike Wooldridge, Linda Wooldridge

Amazon Price: $19.79 (as of 12/16/2009)

How to Show Off Zazzle Products Using Text Modules

Featuring Zazzle Products in Horizontal Rows

Contents at a Glance

Contents at a Glance

Step by Step Instructions

First Things First, Let's Start with Zazzle

Now You Are a Zazzle Associate

Here's How to Create a Link to Promote a Product in a Squidoo Lens:

Manipulating the Code

Identifying the Code

Sizing Picture Links, Centering and Making Rows

Two Picture Links per Row

Three Picture Links per Row

Hats - Four Per Row

Stickers - 5 Per Row

Design Pointers

Naturally Native Gallery RSS Feed

HTML for Dummies

Teach Yourself Visually Books

Other Books and Things to Help With HTML

1

2

3

4

5

Please pick your widget size and display. Then click "Make the Widget" to get the code that's just right for you.

Voila: Just copy and paste this code into your own site. Have fun!

Oopsey! Please login to Squidoo in order to add this module to your lens.

Adobe Photoshop Elements 7

HTML Books on eBay

Lenses About HTML

Our Zazzle Lenses

Zazzle's Talented and Creative Artists

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47