ECommerce Insights Blog

Stay on top of it all and get ahead with useful articles, how-tos, tips and tricks on e-commerce.

How To Add Highslide JS In Your Magento Store

Flexible Product Detail Page

Highslide JS is a media, image and gallery viewer written in JavaScript which is widely used for its functionality and simplicity. Adding Highslide JS in your Magento store is easy as you only have to follow few steps. Typically, Magento store owners only use Highslide JS or any other gallery JS to display their product images as a gallery, lightbox etc. but you can use Highslide to showcase your product images on your store’s front page or CMS pages. Possibilities are endless; all you have to do is think carefully before implementing Highslide JS in your Magento store. Before you proceed any further i strongly recommend that you backup everything (handy if something goes wrong). It is wise to disable your cache prior to Highslide installation (you can enable caching once everything is working as per expectation).

Download latest Highslide stable version

You should download the latest stable version of Highslide from here.

Copy Highslide Core files to your Magento Store

Copy highslide-full.js& graphics folder under /skin/frontend/default/{yourtheme}/js/
Copy highslide.css under /skin/frontend/default/{yourtheme}/css/
Edit /app/design/frontend/default/{yourtheme}/layout/ and add the following XML after line 53 inside the block:


Hit save and upload the file.

Edit media.phtml file found under
/app/design/frontend/default/{yourtheme}/template/catalog/product/view/ In this file we are going to add the call to Highslide JS just under copyright information.

Now, let’s just add the full content of media.phtml under a specific div starting at line 56 and ending below the last < ?php endif; ? > around line 101. (this doesn’t include the JavaScript you have added at the top).

Remove the class product-image-zoom from the p tag that wraps the main product image on line 63.

should now become

Update link to the large product image around the main image code (around line 65):

$_img = ''.$this->htmlEscape($_product->getImageLabel()).'';

The above link should become like this

$_img = ''.$this->htmlEscape($_product->getImageLabel()).'';

Thumbnail links should be updated too

From this

$_img = ''.$this->htmlEscape($_product->getImageLabel()).'';

To this

$_img = ''.$this->htmlEscape($_product->getImageLabel()).'';

You can safely delete the following code as we are not using it anymore

__('Double click on above image to view full picture') ?>

<?php echo $this->__('Zoom Out') ?>
<?php echo $this->__('Zoom In') ?>

You are done; your product page is now using Highslide JS which is far better than what’s come as default media gallery. I would love to hear your comments on using Highslide JS in your Magento store. Please leave me a comment and let me know.