2 Amazing jQuery Catalog To Sell Products Online

Selling products online is quite a deal by itself, but you can sweeten your customer’s experience with the help of jQuery catalog.

jQuery, as you may be knowing, is a fast and concise JavaScript Library, and is designed to change the way JavaScript is commonly written.

The best point about jQuery is that you need not be a programmer to use the code for use in your website. Based on jQuery library, many coders have written excellent applications, and a vast majority of them are free for use.

In this article we will look at 2 best ways to use jQuery catalog to promote your products in your website for online selling. The codes to be used are available free. In addition you will also get the full HTML codes free. This means even if you’re relatively new to HTML, you can still do the whole thing easily in your website.

Okay, let us look at the jQuery product catalogs, and how to implement them in your website. To start with, we will examine jQuery zoom-in for product catalog followed by jQuery Fancy Zoom for another variation.

jQuery catalog with zoom-in is a great way to economize on space in your website, yet take the full advantage of online display of products. I also like it because of 2 kinds of display that are possible, the standard and the reverse. Take a look at the following image:

The main features are:

• Product image and its description can be arranged side-by-side. The description can include the buy-now link that will add the product to the cart when clicked.
• When the mouse is brought upon the product image, it immediately fills in the adjacent space for description. What also happens is that the mouse pointer transforms into a small rectangular transparent box that moves as the mouse pointer moves, and at the same time the portion of the image within the small rectangular box shows up in full details in the adjacent box. To see it live for actual demo and also for the full HTML code, visit my tutorial on product catalog with jQuery zoom-in.
• The moment the mouse moves away from the product image, the description becomes visible as before.

jQuery Fancy Zoom is a code that creates an overlay image window when buy-now link is clicked. The following image nicely explains the process.

Some features to note are:

• The thumbnail image and description of the product are displayed on a webpage. Several products can be displayed in a similar fashion like the ladies handbags shown in the image above.
• When a thumbnail image is clicked, the bigger image pops up in an overlay window where the bag’s product name and the price are shown.
• The buyer can click on the close sign or anywhere on the page to close the overlay window. She can then click the buy-now link in the display section to proceed to buy the chosen bag.

The full HTML code to implement the fancy zoom product catalog is available in my article on free jQuery online catalog.

Watch the following video for live demo of the 2 types of jQuery catalog for online product display discussed above.