Add Cloudzoom for Magento Product Details Page

Product detail is one of the most important page on your Magento eCommerce site as it directly affects the customer’s buying decision. If well-designed and well-constructed, it will get you more conversions. Aside from crafting compelling product descriptions, showing off your product screenshots in perfect details and clear view angles is the key to a highly convertible Magento product detail page.

To help you with this, today’s tutorial will show you how to use Cloud zoom to add the “zoom in” feature to your Magento product detail page.

Step 1. DOWNLOAD PACKAGE

Click here to download the package.

Step 2. IMPORT FOLDER CLOUD ZOOM

Unzip the package after you’ve downloaded it.

Access to \skin\frontend\gem\default\js to copy the folder js and paste it to the respective folder in your website.

For example, if you are using our Crafts theme, let’s copy and paste the folder cloud zoom to \skin\frontend\default\jm_crafts\js

Step 3. COMPARE FILES AND ADD NEW VALUES

From the download package, access to \app\design\frontend\gem\default\template\catalog\product\view
Open file media.phtml

Then open the file media.phtml from \app\design\frontend\default\jm_crafts\template\catalog\product\view

Compare the 2 files.

Step 4. COPY NECCESSARY CODES

# CODE 1 – include file js:

Paste this code into the file media.phtml to call js file

<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/jquery.elevatezoom.js');?>"></script>

# CODE 2- declare images size for zoom cloud

Find the code line from media.phtml of Crafts:

$baseconfig =  Mage::helper("jmbasetheme")->getactiveprofile();

then paste these code under the code line

if ($baseconfig) :

    $productlimagewidth = $baseconfig["productlimagewidth"];

    $productlimageheight = $baseconfig["productlimageheight"];

else :

    $productlimagewidth = 775;

    $productlimageheight = 440;

endif;

# CODE 3 – code php

Paste this code into the file media.phtml to add code php

<?php $galleryImages= $_product->getMediaGalleryImages();?>



<p class="product-image product-image-zoom img-desktop" style="<?php echo 'width:'.$productlimagewidth.'px; height:'.$productlimageheight.'px;'; ?>">

  <?php

        $main_image_name= strrchr($_product->getImage(), '/');

    if (count($galleryImages)>0){

        foreach ($galleryImages as $_image){

            $thumb_image_name= strrchr($_image->getFile(), '/');

            if($main_image_name == $thumb_image_name){

            $mainImageUrl = $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize($productlimagewidth, $productlimageheight);        

                $_img = '<img id="image" src="' . $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize ( $productlimagewidth, $productlimageheight ) . '" data-zoom-image="' . $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize (1000,1000 ) . '" alt="' . $this->htmlEscape ( $this->getImageLabel () ) . '" title="' . $this->htmlEscape ( $this->getImageLabel () ) . '" />';

                break;

            }

        }

  }

  if (!isset($_img)):

      $mainImageUrl = $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize($productlimagewidth, $productlimageheight);

      $_img = '<img id="image" src="' . Mage::getModel('catalog/product')->getImageUrl($productlimagewidth, $productlimageheight) . '" data-zoom-image="' . $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize ( 1000, 1000 ) . '" alt="' . $this->htmlEscape ( $this->getImageLabel () ) . '" title="' . $this->htmlEscape ( $this->getImageLabel () ) . '" />';

        echo $_helper->productAttribute ( $_product, $_img, 'image' );

    else:

        echo $_img;

    endif;    

    ?>

</p>

#CODE 4- Declare script

Paste this code into the file media.phtml to declare script

<script type="text/javascript">// <![CDATA[

        (function($) {

            $("#image").elevateZoom({

                scrollZoom                 : false,

                borderColour             : "#eee",

                tintColour                 : "#eee",

                zoomWindowWidth     : 450,

                zoomWindowHeight     : 450,

            });

        })(jQuery);

    // ]]>

    </script>

# CODE 4: Declare css

Paste this code into the file media.phtml to declare style css

  <style>

        .zoomContainer .zoomLens { width: 50px !important; height: 50px !important; }

    </style>

Step 5. SAVE THE FILE AND YOU ARE DONE

Now you can see how it works in the frontend

Are you using Cloud zoom for your Magento eCommerce site? How does it work for your site?