Stir up your ekmPowershop

ekmPowershop is a popular UK e-commerce solution, to quickly create your a professional online shop. Packed with features and no technical knowledge required. Improve it significantly, with one of our beautiful image modules, to make your product images look magnificent.

Magic Zoom Plus for ekmPowershop

The world's finest image zoom for websites.

  • Frequently updated so your website stays fresh.
  • Beautiful experience on desktop and mobile alike.
Supported versions
    All latest versions

98%    of shoppers say its their favourite zoom

Downloads   
420+

Key features


Responsive

Fast loading

SEO friendly

Supports video

Easy to customise

Switchable thumbnails

Friendly support

One-off payment

jQuery compatible

Regularly updated

Lazy loading

Optimised for mobile

Installation


  1. Download Magic Zoom Plus (free and fully functional trial version).
  2. Add following code to the end of the magiczoomplus.css file:

    button.mz-button { 
    font-family: 'Helvetica Neue', Helvetica, 'Lucida Grande', Tahoma, Arial, Verdana, sans-serif !important;
    font-weight: 100 !important; 
    } 
    button.mz-button.mz-button-prev:before { content: '‹'; }
    button.mz-button.mz-button-next:before { content: '›'; }
    button.mz-button.mz-button-close:before { content: '×'; }
    
  3. Upload magiczoomplus.js in the Other files tab and magiczoomplus.css in the Style Sheets tab.
  4. Go to Design > Desktop and click Edit Custom Layout under Product Page Layout.
  5. Add the following code somewhere in the editing template:

    <link href="/ekmps/shops/{your shop id}/resources/Styles/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>
    <script src="/ekmps/shops/{your shop id}/resources/Other/magiczoomplus.js" type="text/javascript"></script>

    The file paths to the .js and .css files above may be incorrect - you can find the actual paths in the tabs Other files and Style Sheets within the File manager section.

  6. Replace the main code image code [ekm:productimage]..[/ekm:productimage] with the following code:

    <a href="[ekm:productimage]width='auto';height='1000';images_layout='[image_1_url]';[/ekm:productimage]" id="mainImage" class="MagicZoom">
    <img src="[ekm:productimage]width='auto';height='450';images_layout='[image_1_url]';[/ekm:productimage]"/>
    </a>
    

    You can use your own values for width and height of the small and large images.

  7. Insert the code below if you want to show additional image thumbnails to swap between multiple images:

    <script type="text/javascript">
    var altimages = {
      1: {
        "thumb" : "[ekm:productimage]width='auto';height='80';images_layout='[image_1_url]';[/ekm:productimage]",
        "small" : "[ekm:productimage]width='auto';height='450';images_layout='[image_1_url]';[/ekm:productimage]",
        "large" : "[ekm:productimage]width='auto';height='1000';images_layout='[image_1_url]';[/ekm:productimage]"
      },
      2: {
        "thumb" : "[ekm:productimage]width='auto';height='80';images_layout='[image_2_url]';[/ekm:productimage]",
        "small" : "[ekm:productimage]width='auto';height='450';images_layout='[image_2_url]';[/ekm:productimage]",
        "large" : "[ekm:productimage]width='auto';height='1000';images_layout='[image_2_url]';[/ekm:productimage]"
      },
      3: {
        "thumb" : "[ekm:productimage]width='auto';height='80';images_layout='[image_3_url]';[/ekm:productimage]",
        "small" : "[ekm:productimage]width='auto';height='450';images_layout='[image_3_url]';[/ekm:productimage]",
        "large" : "[ekm:productimage]width='auto';height='1000';images_layout='[image_3_url]';[/ekm:productimage]"
      },
      4: {
        "thumb" : "[ekm:productimage]width='auto';height='80';images_layout='[image_4_url]';[/ekm:productimage]",
        "small" : "[ekm:productimage]width='auto';height='450';images_layout='[image_4_url]';[/ekm:productimage]",
        "large" : "[ekm:productimage]width='auto';height='1000';images_layout='[image_4_url]';[/ekm:productimage]"
      },
      5: {
        "thumb" : "[ekm:productimage]width='auto';height='80';images_layout='[image_5_url]';[/ekm:productimage]",
        "small" : "[ekm:productimage]width='auto';height='450';images_layout='[image_5_url]';[/ekm:productimage]",
        "large" : "[ekm:productimage]width='auto';height='1000';images_layout='[image_5_url]';[/ekm:productimage]"
      }
    }
    for (var i = 1; i <= Object.keys(altimages).length; i++) {
      if (altimages[i]["small"] != "") {
        document.write('<a href="' + altimages[i]['large'] + '" data-zoom-id="mainImage" data-image="' + altimages[i]['small'] + '"><img src="' + altimages[i]['thumb'] + '" alt=""/></a>');
        document.write(' ');
      }
    }
    </script>
    
  8. That's it.
  9. Buy Magic Zoom Plus To upgrade your free and fully functional trial version of Magic Zoom Plus (which removes the "Trial version" text), buy Magic Zoom Plus. Then overwrite the demo magiczoomplus.js file with the one from your licensed version.

Uninstallation


Thanks for trying Magic Zoom Plus on your ekmPowershop site! What did you hope Magic Zoom Plus could do? How can we improve it? Let us know, we're always improving our tools based on customer feedback.

  1. Replace the following code with the main code image code [ekm:productimage]..[/ekm:productimage]:

    <a href="[ekm:productimage]width='auto';height='1000';images_layout='[image_1_url]';[/ekm:productimage]" id="mainImage" class="MagicZoom">
    <img src="[ekm:productimage]width='auto';height='450';images_layout='[image_1_url]';[/ekm:productimage]"/>
    </a>
    
  2. Delete the following code from the editing template:

    <link href="/ekmps/shops/{your shop id}/resources/Styles/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>
    <script src="/ekmps/shops/{your shop id}/resources/Other/magiczoomplus.js" type="text/javascript"></script>
  3. Go to Design > Desktop and click Edit Custom Layout under Product Page Layout.
  4. Delete magiczoomplus.js from the Other files tab and magiczoomplus.css from the Style Sheets tab.
  5. Magic Zoom Plus is now uninstalled.

Magic Zoom Plus for ekmPowershop

Magic Zoom for ekmPowershop

Choose from internal or external zoom.

  • Works perfectly on any website, with or without jQuery.
  • Load fast and smoothly on any page, with responsive design.
Supported versions
    All latest versions

93%    of users say it boosted their sales

Downloads   
160+

Key features


Responsive

Fast loading

SEO friendly

Supports video

Easy to customise

Switchable thumbnails

Friendly support

One-off payment

Regularly updated

jQuery compatible

On-demand loading

Optimised for mobile

Installation


  1. Download Magic Zoom (free and fully functional trial version).
  2. Upload magiczoom.js in the Other files tab and magiczoom.css in the Style Sheets tab.
  3. Go to Design > Desktop and click Edit Custom Layout under Product Page Layout.
  4. Add the following code somewhere in the editing template:

    <link href="/ekmps/shops/{your shop id}/resources/Styles/magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>
    <script src="/ekmps/shops/{your shop id}/resources/Other/magiczoom.js" type="text/javascript"></script>

    The file paths to the .js and .css files above may be incorrect - you can find the actual paths in the tabs Other files and Style Sheets within the File manager section.

  5. Replace the main code image code [ekm:productimage]..[/ekm:productimage] with the following code:

    <a href="[ekm:productimage]width='auto';height='1000';images_layout='[image_1_url]';[/ekm:productimage]" id="mainImage" class="MagicZoom">
    <img src="[ekm:productimage]width='auto';height='450';images_layout='[image_1_url]';[/ekm:productimage]"/>
    </a>
    

    You can use your own values for width and height of the small and large images.

  6. Insert the code below if you want to show additional image thumbnails to swap between multiple images:

    <script type="text/javascript">
    var altimages = {
      1: {
        "thumb" : "[ekm:productimage]width='auto';height='80';images_layout='[image_1_url]';[/ekm:productimage]",
        "small" : "[ekm:productimage]width='auto';height='450';images_layout='[image_1_url]';[/ekm:productimage]",
        "large" : "[ekm:productimage]width='auto';height='1000';images_layout='[image_1_url]';[/ekm:productimage]"
      },
      2: {
        "thumb" : "[ekm:productimage]width='auto';height='80';images_layout='[image_2_url]';[/ekm:productimage]",
        "small" : "[ekm:productimage]width='auto';height='450';images_layout='[image_2_url]';[/ekm:productimage]",
        "large" : "[ekm:productimage]width='auto';height='1000';images_layout='[image_2_url]';[/ekm:productimage]"
      },
      3: {
        "thumb" : "[ekm:productimage]width='auto';height='80';images_layout='[image_3_url]';[/ekm:productimage]",
        "small" : "[ekm:productimage]width='auto';height='450';images_layout='[image_3_url]';[/ekm:productimage]",
        "large" : "[ekm:productimage]width='auto';height='1000';images_layout='[image_3_url]';[/ekm:productimage]"
      },
      4: {
        "thumb" : "[ekm:productimage]width='auto';height='80';images_layout='[image_4_url]';[/ekm:productimage]",
        "small" : "[ekm:productimage]width='auto';height='450';images_layout='[image_4_url]';[/ekm:productimage]",
        "large" : "[ekm:productimage]width='auto';height='1000';images_layout='[image_4_url]';[/ekm:productimage]"
      },
      5: {
        "thumb" : "[ekm:productimage]width='auto';height='80';images_layout='[image_5_url]';[/ekm:productimage]",
        "small" : "[ekm:productimage]width='auto';height='450';images_layout='[image_5_url]';[/ekm:productimage]",
        "large" : "[ekm:productimage]width='auto';height='1000';images_layout='[image_5_url]';[/ekm:productimage]"
      }
    }
    for (var i = 1; i <= Object.keys(altimages).length; i++) {
      if (altimages[i]["small"] != "") {
        document.write('<a href="' + altimages[i]['large'] + '" data-zoom-id="mainImage" data-image="' + altimages[i]['small'] + '"><img src="' + altimages[i]['thumb'] + '" alt=""/></a>');
        document.write(' ');
      }
    }
    </script>
    
  7. That's it.
  8. Buy Magic Zoom To upgrade your free and fully functional trial version of Magic Zoom (which removes the "Trial version" text), buy Magic Zoom. Then overwrite the demo magiczoom.js file with the one from your licensed version.

Uninstallation


Thanks for trying Magic Zoom on your ekmPowershop site! What did you hope Magic Zoom could do? How can we improve it? Let us know, we're always improving our tools based on customer feedback.

  1. Replace the following code with the main code image code [ekm:productimage]..[/ekm:productimage]:

    <a href="[ekm:productimage]width='auto';height='1000';images_layout='[image_1_url]';[/ekm:productimage]" id="mainImage" class="MagicZoom">
    <img src="[ekm:productimage]width='auto';height='450';images_layout='[image_1_url]';[/ekm:productimage]"/>
    </a>
    
  2. Delete the following code from the editing template:

    <link href="/ekmps/shops/{your shop id}/resources/Styles/magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>
    <script src="/ekmps/shops/{your shop id}/resources/Other/magiczoom.js" type="text/javascript"></script>
  3. Go to Design > Desktop and click Edit Custom Layout under Product Page Layout.
  4. Delete magiczoom.js from the Other files tab and magiczoom.css from the Style Sheets tab.
  5. Magic Zoom is now uninstalled.

Magic Zoom for ekmPowershop

Magic Thumb for ekmPowershop

Automatically fill the screen with enlarged images.

  • Use Youtube and Vimeo videos out-of-the-box or easily add self-hosted videos
  • Provide a seamless mobile experience, with intuitive swipe gestures.
Supported versions
    All latest versions

92%    of users say its the best image lightbox

Downloads   
220+

Key features


Responsive

Fast loading

SEO friendly

Lazy loading

Supports video

Friendly support

One-off payment

Regularly updated

jQuery compatible

Swappable thumbnails

Installation


  1. Download Magic Thumb (free and fully functional trial version).
  2. Go to Design > File manager and upload following files in the Design images tab:
    • buttons1.png
    • loader.gif
  3. In the magicthumb.css replace all appearences of 'graphics/' with '../Design/'.
  4. Upload magicthumb.js in the Other files tab and magicthumb.css in the Style Sheets tab.
  5. Go to Design > Desktop and click Edit Custom Layout under Product Page Layout.
  6. Add the following code somewhere in the editing template:

    <link href="/ekmps/shops/{your shop id}/resources/Styles/magicthumb.css" rel="stylesheet" type="text/css" media="screen"/>
    <script src="/ekmps/shops/{your shop id}/resources/Other/magicthumb.js" type="text/javascript"></script>

    The file paths to the .js and .css files above may be incorrect - you can find the actual paths in the tabs Other files and Style Sheets within the File manager section.

  7. Replace the main code image code [ekm:productimage]..[/ekm:productimage] with the following code:

    <a href="[ekm:productimage]width='auto';height='1000';images_layout='[image_1_url]';[/ekm:productimage]" id="mainImage" class="MagicThumb">
    <img src="[ekm:productimage]width='auto';height='450';images_layout='[image_1_url]';[/ekm:productimage]"/>
    </a>
    

    You can use your own values for width and height of the small and large images.

  8. Insert the code below if you want to show additional image thumbnails to swap between multiple images:

    <script type="text/javascript">
    var altimages = {
      1: {
        "thumb" : "[ekm:productimage]width='auto';height='80';images_layout='[image_1_url]';[/ekm:productimage]",
        "small" : "[ekm:productimage]width='auto';height='450';images_layout='[image_1_url]';[/ekm:productimage]",
        "large" : "[ekm:productimage]width='auto';height='1000';images_layout='[image_1_url]';[/ekm:productimage]"
      },
      2: {
        "thumb" : "[ekm:productimage]width='auto';height='80';images_layout='[image_2_url]';[/ekm:productimage]",
        "small" : "[ekm:productimage]width='auto';height='450';images_layout='[image_2_url]';[/ekm:productimage]",
        "large" : "[ekm:productimage]width='auto';height='1000';images_layout='[image_2_url]';[/ekm:productimage]"
      },
      3: {
        "thumb" : "[ekm:productimage]width='auto';height='80';images_layout='[image_3_url]';[/ekm:productimage]",
        "small" : "[ekm:productimage]width='auto';height='450';images_layout='[image_3_url]';[/ekm:productimage]",
        "large" : "[ekm:productimage]width='auto';height='1000';images_layout='[image_3_url]';[/ekm:productimage]"
      },
      4: {
        "thumb" : "[ekm:productimage]width='auto';height='80';images_layout='[image_4_url]';[/ekm:productimage]",
        "small" : "[ekm:productimage]width='auto';height='450';images_layout='[image_4_url]';[/ekm:productimage]",
        "large" : "[ekm:productimage]width='auto';height='1000';images_layout='[image_4_url]';[/ekm:productimage]"
      },
      5: {
        "thumb" : "[ekm:productimage]width='auto';height='80';images_layout='[image_5_url]';[/ekm:productimage]",
        "small" : "[ekm:productimage]width='auto';height='450';images_layout='[image_5_url]';[/ekm:productimage]",
        "large" : "[ekm:productimage]width='auto';height='1000';images_layout='[image_5_url]';[/ekm:productimage]"
      }
    }
    for (var i = 1; i <= Object.keys(altimages).length; i++) {
      if (altimages[i]["small"] != "") {
        document.write('<a href="' + altimages[i]['large'] + '" rel="thumb-id:mainImage;" rev="' + altimages[i]['small'] + '"><img src="' + altimages[i]['thumb'] + '" alt=""/></a>');
        document.write(' ');
      }
    }
    </script>
    
  9. That's it.
  10. Buy Magic Thumb To upgrade your free and fully functional trial version of Magic Thumb (which removes the "Trial version" text), buy Magic Thumb. Then overwrite the demo magicthumb.js file with the one from your licensed version.

Uninstallation


Thanks for trying Magic Thumb on your ekmPowershop site! What did you hope Magic Thumb could do? How can we improve it? Let us know, we're always improving our tools based on customer feedback.

  1. Replace the following code with the main code image code [ekm:productimage]..[/ekm:productimage]:

    <a href="[ekm:productimage]width='auto';height='1000';images_layout='[image_1_url]';[/ekm:productimage]" id="mainImage" class="MagicThumb">
    <img src="[ekm:productimage]width='auto';height='450';images_layout='[image_1_url]';[/ekm:productimage]"/>
    </a>
    
  2. Delete the following code from the editing template:

    <link href="/ekmps/shops/{your shop id}/resources/Styles/magicthumb.css" rel="stylesheet" type="text/css" media="screen"/>
    <script src="/ekmps/shops/{your shop id}/resources/Other/magicthumb.js" type="text/javascript"></script>
  3. Go to Design > Desktop and click Edit Custom Layout under Product Page Layout.
  4. Delete magicthumb.js from the Other files tab and magicthumb.css from the Style Sheets tab.
  5. Go to Design > File manager and remove following files from the Design images tab:
    • buttons1.png
    • loader.gif
  6. Magic Thumb is now uninstalled.

Magic Thumb for ekmPowershop

About

These instructions are for ekmPowershop. Use them to add effects to your website including image zoom on hover/mouseover; image lightbox (enlarge image to full screen); image slideshows in JavaScript; image carousels; and image magnifiers.