Magic Thumb for Shopify

Features you'll love...

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 Thumb manually into your Shopify template.

1. Download Magic Thumb (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 all the files from the magicthumb folder to the 'Theme Assets' section.

5. Open the theme.liquid template and insert the following lines before the </head> tag:

   {{ 'magicthumb.css' | asset_url | stylesheet_tag }}
   {{ 'magicthumb.js' | asset_url | script_tag }}

6. 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" data-gallery="instructions-0" data-options="lazyZoom: true; expand: window; zoomMode: off; hint: off; rightClick: true; cssClass: dark-bg;" 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' }}" data-image="{{ image | product_img_url: 'medium' }}" data-thumb-id="thumb-id:zoom"><img src="{{ image | product_img_url: 'small'}}" alt="{{product.title | escape }}"/></a>
   {% endfor %}
   {% endif %}
   

7. You've finished - enjoy!
8. 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.

Product variants

Black Maroon Obsidian Seaweed

---

BlackMaroonObsidianSeaweed

---

Do your products come in different colours or styles?

Magic Thumb 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 Thumb on your Shopify 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. 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:

   {{ 'magicthumb.css' | asset_url | stylesheet_tag }}
   {{ 'magicthumb.js' | asset_url | script_tag }}

4. Go to: Assets section and delete the following files:

   magicthumb.css
   magicthumb.js
   buttons1.png
   loader.gif
   zoomin.cur
   zoomout.cur
   

5. Magic Thumb is now uninstalled.

Other Shopify apps

Try our other great image effects!

Magic Zoom

Magic Zoom Plus

Magic 360