Experience the ultimate Shopify zoom

See images appear in outstanding detail

  • Beautifully optimized for iOS and Android devices.
  • Customizable – change the size, position, colors and effects.

Install | Download

Relied upon by Shopify store owners, Magic Zoom has been the professional choice since 2006 for gorgeous on-hover image zooming effects.

This Shopify app makes it easy to apply these effects to your pages.

With free new versions regularly released, your products will always look gorgeous with Magic Zoom.

Shopify apps

Install Magic Zoom Plus or Magic 360 directly from Shopify App Store!

Magic Zoom Plus for Shopify

Magic 360 for Shopify

Manual integration

Alternatively, you can follow these instructions to install Magic Zoom manually into your Shopify template.

  1. Download Magic Zoom (free and fully functional demo version).
  2. Unzip the file on your computer, keeping the file structure intact.
  3. Login to Shopify and go to Admin Panel > Online Store > Themes > Edit HTML/CSS.
  4. Upload following files from downloaded magiczoom.zip file to the 'Theme Assets' section:
    magiczoom.js
    magiczoom.css
    fonts/magictoolbox-thin.eot
  5. Open the magiczoom.css file and change following URL:

    fonts/magictoolbox-thin.eot

    to:

    magictoolbox-thin.eot
  6. Open the theme.liquid template and insert the following lines before the </head> tag:

    {{ 'magiczoom.css' | asset_url | stylesheet_tag }}
    {{ 'magiczoom.js' | asset_url | script_tag }}
  7. Open the product.liquid template and insert the following lines, replacing the default product image code:

    <a href="{{ product.featured_image | product_img_url: 'original' }}" class="MagicZoom" id="zoom" title="{{ product.title | escape }}">{{ product.featured_image | product_img_url: 'medium' | img_tag }}</a>
    {% if product.images.size > 1 %}
    {% for image in product.images %}
    <a href="{{ image | product_img_url: 'original' }}" rev="{{ image | product_img_url: 'medium' }}" rel="zoom-id:zoom"><img src="{{ image | product_img_url: 'small'}}" alt="{{product.title | escape }}"/></a>
    {% endfor %}
    {% endif %}
    
  8. You've finished - enjoy!
  9. 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.

Please contact us with any questions you have about installing our tools on your Shopify website.

Product variants

Magic Zoom for Shopify
Magic Zoom for Shopify Magic Zoom for Shopify Magic Zoom for Shopify Magic Zoom for Shopify



Black Maroon Obsidian Seaweed

Do your products come in different colours or styles?

Magic Zoom supports Shopify product variants.

Configure products so each variant has its own zoomable image.

If you need any help, get in touch.

Uninstallation

Thanks for trying Magic Zoom on your Shopify 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. Login to Shopify and go to: Admin Panel > Online Store > Themes > Edit HTML/CSS.
  2. Go to: Template section > product.liquid > Restore the previous version of the product.liquid template (use the link above the edit field to access previous version).
  3. Open the theme.liquid template and delete the following lines showing before the </head> tag:

    {{ 'magiczoom.css' | asset_url | stylesheet_tag }}
    {{ 'magiczoom.js' | asset_url | script_tag }}
  4. Go to: Assets section and delete the following files:

    magiczoom.js
    magiczoom.css
    magictoolbox-thin.eot
    
  5. Magic Zoom is now uninstalled.

Customer reviews

  Rating: 0 (0 reviews)

There are no reviews yet. Be the first!

Submit your review


Thank you!
Your review has been received and will be posted soon.
Used only to verify your review is genuine.

Other Shopify apps

Try our other great image effects!