HTML Codes For Selling Products

by Othercat

Here's some HTML codes you can use to make your products look attractive on your articles. All of the HTML codes are explained in detail and each is available to copy and paste.

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.

A Centered Product With A Caption Link

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. 

HTML Code For A Centered Product With A Caption Link

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

 

2 Products Side By Side


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.

HTML Code For 2 Products Side By Side

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

 

3 Rows of products



 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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.

HTML Code For 3 Rows Of Products

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

 

Amazon Spotlight Module from Squidoo

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. 

HTML Code For Amazon Spotlight Module

<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!

 

More Writing Tips

The next time you need a picture for an article, don't waste your money paying for one. Instead, check out one of these websites for free professional pictures.
This article offers advice for writers who are writing for money and looking for ways to increase sales. You'll be surprised what a little creative writing can do!
Your writing isn't making you money, isn't getting traffic and isn't winning any awards. Who cares? That doesn't mean you should give up! Here's 5 reasons why!
Updated: 01/26/2012, Othercat
 
Thank you! Would you like to post a comment now?
4

Comments


   Login
CCG on 07/28/2012

Very nicely done! Helpful and I especially like how you've shared the code for the squidoo box - that is so cool and useful.

mandeesears on 03/29/2012

It's great to have these reminders for the codes! Thanks Cat!

vbright on 01/22/2012

Thanks for the help for making an attractive lens or page!

Angel on 01/21/2012

I am trying to learn all of this now. I will surely bookmark this page for future reference. Thank you for such a great article.

petunia on 01/21/2012

Oh how I love copy and paste, especially with html! Thank you!

You might also like

There is a Google alternative? Really?

When doing a research, don't rely on Google only. To stand out from the crowd...

How The Shift to Mobile Impacts Online Writers' Bottom Line

Google's 2012 Q3 earnings dropped because more people are browsing the web on...


Disclosure: This page generates income for authors based on affiliate relationships with our partners, including Amazon, Google and others.
Loading ...
Error!