Works on these pages:
- Product details page
Features you'll love...
- Responsive
- Fast
- Built with SEO in mind
- Image caching
- Easily customisable
- Automatically resizes images
- Scrollable thumbnails
- All templates supported
- On-demand loading
- Regularly updated
- jQuery compatible
- One-off payment
Shopify apps
Install Magic Zoom Plus or Magic 360 directly from Shopify App Store!
Manual integration
Alternatively, you can follow these instructions to install Magic Zoom manually into your Shopify template.
- Download Magic Zoom (free and fully functional demo version).
- Unzip the file on your computer, keeping the file structure intact.
- Login to Shopify and go to Admin Panel > Online Store > Themes > Edit HTML/CSS.
- Upload following files from downloaded magiczoom.zip file to the 'Theme Assets' section:
magiczoom.js
magiczoom.css
fonts/magictoolbox-thin.eot -
Open the magiczoom.css file and change following URL:
fonts/magictoolbox-thin.eot
to:
magictoolbox-thin.eot
-
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 }} -
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 %}
- You've finished - enjoy!
- 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.
Product variants
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.
- Login to Shopify and go to: Admin Panel > Online Store > Themes > Edit HTML/CSS.
- 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).
-
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 }} -
Go to: Assets section and delete the following files:
magiczoom.js magiczoom.css magictoolbox-thin.eot
- Magic Zoom is now uninstalled.
Customer reviews
Submit your review
Your review has been received and will be posted soon.
Other Shopify apps
Try our other great image effects!