HTML Codes For Selling Products

When selling products online, you need to make sure that your products look attractive on your article. The easiest way to do this is with HTML codes. Below you'll find many examples of attractive ways to display your products. Under each example, you'll find the HTML code for you to copy and paste. Then just follow the easy steps to add your own info and you'll have an attractive article.

Suddenly Slim Retro One Piece Swimsuit

This is great for when you want to spotlight one product. The larger picture shows the details and the link to the product is conveniently located right under the picture. And all this space below? Well, this is where you write your product review. 

<p align=center><img src="http://www.pic.jpg"width="200px" > <br>Caption</p>

• Replace blue text with the url to your pic. 
• The orange number controls the width of your picture. Change it higher or lower to make your picture bigger or smaller. 
• Replace green text with your referral link.

Kasparov Circular Tabletop Chess Set

Legendary Celtic Warriors Chess Set

I like the side by side products. Sometimes, I even do two rows of these so I have 4 pictures. It looks cool and if you don't want to write anything, you don't have to.

<p style="float: right; width: 250px; margin-left: 20px; margin-bottom: 10px; font-size: 9pt; font-style: italic; text-align: center;"><br /><a href="http://www.link.com"><img src="http://www.pic.jpg"width="250px"; style="margin-bottom: 5px;" />Caption</a></p><p style="float: left; width: 250px; margin-right: 20px; margin-bottom: 10px; font-size: 9pt; font-style: italic; text-align: center;"><br /><a href="http://www.link.com"><img src="http://www.pic.jpg"width="250px"; style="margin-bottom: 5px;" />Caption</a></p>

• Replace the red text with the affiliate url to your product. 
• Replace the blue text with the image url. 
• Replace the green text with your affiliate link. It should look something link this <a href="http://www.domain.com" target="_blank">Product Name</a>

If you have a bunch of similar products you want to showcase, this is the code you want. This is a beautiful, eye catching way to  offer multiple similar products without having to write a description for each. What I normally do is to write a general description underneath or on top and then tell the reader to click on the ones they like.

<a href="http://www.link.com"><img src="http://www.pic.jpg" alt="XXX" width="190" /></a> <a href="http://www.link.com"><img src="http://www.pic.jpg" alt="XXX" width="190" /></a> <a href="http://www.link.com"><img src="http://www.pic.jpg" alt="XXX" width="190" /></a><br /> <a href="http://www.link.com"><img src="http://www.pic.jpg" alt="XXX" width="190" /></a> <a href="http://www.link.com"><img src="http://www.pic.jpg" alt="XXX" width="190" /></a> <a href="http://www.link.com"><img src="http://www.pic.jpg" alt="XXX" width="190" /></a><br /> <a href="http://www.link.com"><img src="http://www.pic.jpg" alt="XXX" width="190" /></a> <a href="http://www.link.com"><img src="http://www.pic.jpg" alt="XXX" width="190" /></a> <a href="http://www.link.com"><img src="http://www.pic.jpg" alt="XXX" width="190" /></a>

• Replace the red text with the affiliate url of each product.
• Replace the blue text with the url to each picture.
• Replace the green XXX with the title of your picture.

This html code is sized to be 570 wide. If you want to place this code on Wizzley, you need to down size each picture from 190px to 180px.

HTML Sterling Silver Computer Language Charm

Amazon Price: $14.95 (as of 01/21/2012) BUY NOW

This .925 sterling silver charm is made in the USA and measures 6 mm (1/4 in) by 19 mm (3/4 in).

Squidoo writers will probably recognize this one because it's very similar to the Amazon spotlight module. I like the nice clean look of this. I've found it works for just about any product and the code is easy to personalize. 

<img src="http.www.pic.jpg" style="float: left; margin: 0px 20px 20px 0px;" />your text affiliate link<br /> <b>Store Price:</b> $00.00 (as of 01/01/2012) <b style="border: 1px double #ff6600;background-color: #ff9900;"><a href="http://www.link.com"><span style="color:#ffffff; font-size: 12px;">BUY NOW</span></a></b> <b style="font-size: small; font-weight: normal;"><i>description of your product</i></b>

• Replace the blue text with the url to the picture.
• Replace the green text with the text affiliate link.
• Replace the red text with the affiliate url of the product

Now you just have to go back and change the store name, price and date. Sometimes I write "Lowest Price" instead of "Store Price". Since the price and date have to be manually updated, I recommend leaving the date off. But make sure to check frequently to make sure the price stays correct.

The description of your product is totally optional but we all know that more quality content makes for a better article!