Product videos are a compelling way to increase customer interest.

According to this InternetRetailer.com article, Shoeline.com increased conversion rates by 40% after adding 100 videos showing how a shoe looks on a model’s foot.

We’ll show you how to add links to YouTube videos that pop up when the user clicks a link. To do this, we’re going to use a script called Thickbox. Thickbox opens a modal box displaying the content, immediately drawing the user’s attention to the video.

We’re going to do this in three main steps:
1. Download and install Thickbox on your site.
2. Modify the skin template to use Thickbox.
3. Modify the product description to add a link to the video.

Downloading and Installing Thickbox
Your first step will be to acquire the software. Go to http://jquery.com/demo/thickbox/ and scroll down underneath the “Overview” section to find the “Download” tab.

There are three files to download:

1. thickbox-compressed.js
2. thickbox.css
3. loadingAnimation.gif

You can safely ignore the other downloads listed, but remember where you save these three files on your machine.

Next you will need to apply the files to your AspDotNetStorefront site.

Copy the files to the following locations:

• Copy “thickbox-compressed.js” to the “jscripts” folder.
• Copy “thickbox.css” to the “styles” folder of your skin folder (“skins/skin_1” in the root directory).
• Copy “loadingAnimation.gif” to the “images” folder.

Now that the files have found their new homes you can need to modify the template to use them.

Modifying the Template

Enabling Thickbox requires some changes to the skin template. The template is named “template.ascx”, and you can find it in your skin directory (“skins/skin_1” in the root directory).

First Thickbox requires you to enable jQuery on your site. jQuery is a fantastic cross-browser Javascript framework that makes Javascript development much less painful.

We’ll use Google’s AJAX Libraries API to get jQuery, so there’s nothing to download or install on your site.

Add the following inside the head tag of the template:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"><!--mce:0--></script>

You will also need to include the Thickbox script itself:

<script src="jscripts/thickbox-compressed.js" type="text/javascript"><!--mce:1--></script>

Thickbox also depends on a stylesheet. Insert the following inside the head tag:

Your template now loads everything Thickbox needs to function. The last step will be to modify your product descriptions to link to the videos.

Modifying the Product Description
Now you can finally add a link to the video!

Go into the AspDotNetStorefront Admin section and open up a product for editing. Find the “Description” tab and switch the editor to HTML mode and paste in the following code, replacing “Link Text Here” with the text you want displayed:

<a class="thickbox" href="#TB_inline?height=380&amp;width=425&amp;inlineId=videoPlayerContainer">
Link Text Here
</a>

Next we will need to insert the video embed from YouTube. Paste the following at the bottom of the description:

<div id="videoPlayerContainer" style="display:none;">Embed Tag Goes Here</div>

Now find the video you want to embed from YouTube. On the right hand side, underneath the description, there will be a text box labeled “Embed”. Copy the text out of this box and replace the text “Embed Tag Goes Here” in the code above.

Update the product and navigate to your product page. When you click the link, you should be presented with your video in a box floating over the page content.

Tags: AspDotNetStoreFront, e-commerce, Video, youtube

This entry was posted on Monday, May 4th, 2009 at 12:29 pm and is filed under AspDotNetStoreFront, Social Networking, Tips & Tricks, Video. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.