Install Highslide on Magento

Highslide is hands down the best JavaScript media and gallery viewer available, and now you can use Highslide on your Magento store!

Follow the simple steps below and you will be using Highslide in no time.

NOTICE: Backup everything before you start editing!

Preparation

  1. Download the latest version of Highslide from Highslide.com
  2. Login to your Magento admin and disable the cache under System > Cache Management
  3. Unzip the Highslide package and upload highslide-full.js and the graphics folder to:
    /skin/frontend/default/YOURTHEMENAME/js/
  4. Upload highslide.css to:
    /skin/frontend/default/YOURTHEMENAME/css/
  5. Open your theme's page.xml file located in:
    /app/design/frontend/default/YOURTHEMENAME/layout/
  6. Add: the following XML after line 53 inside the <block type="page/html_head" name="head" as="head"> block:
  7. Save and upload page.xml

Installation

  1. Open media.phtml in:
    /app/design/frontend/default/YOURTHEMENAME/template/catalog/product/view/
  2. Add the Highslide JS call and config script to the top of media.phtml just below the Magento license information (around line 33):
    	
    	
  3. Wrap the full output of the file in Highslide gallery <div> starting at line 56 and ending below the last <?php endif; ?> around line 101. (exclude the JavaScript you just added at the top).
  4. Remove the class product-image-zoom from the <p> tag that wraps the main product image on line 63.

    Becomes:
  5. Add a link to the large product main image around the main image code (around line 65):

    Becomes
    
    
    
  6. Remove the now unnecessary HTML and JavaScript for the image zoom. Lines 69 – 82:
    		
    	
    	
  7. Update the links around the thumbnails to call Highslide (Line 95):

    Becomes:
  8. That should do it! Save and upload your media.phtml file and refresh your product page. You should now have a beautiful Highslide gallery.

Manual installation too tough? Try our Highslide Plugin for Magento!