Let the illusion of image zoom become reality

Enlarge on click or enlarge on hover

  • Easy to change any of the 30 options.
  • Darken or lighten the background to get the right feel.

Install | Download

  Rating: 5.0 (1 reviews)

Stay ahead of the competition - make your products look gorgeous with our Magic Thumb Shopify App. Over a third of top online stores use an effect like Magic Thumb to display their product images, including industry giants like Amazon. It’s intuitive, good looking and efficient.

Our Shopify Image lightbox has been in development for the last 9 years and is meticulously refined to meet the needs of today’s Shopify retailers. With numerous transition effects and easy styling you can make Magic Thumb look exactly how you want it to. Enable lazy loading to make your Shopify store load in a blink of an eye.

Your clients will love exploring your product photos with Magic Thumb, regardless of the device or browser they use. Improve your Shopify store UX and increase conversions - download Magic Thumb today! Try it for free for as long as you want, and if something goes wrong – we’re always there to help.

Shopify apps

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

Magic Zoom Plus for Shopify

Magic 360 for Shopify

Live demos

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 magicthumb.css file and change the file paths of the images. For example, change this line:

    background: #fff url(graphics/loader.gif) no-repeat 2px 50%;

    to:

    background: #fff url(loader.gif) no-repeat 2px 50%;
  6. 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 }}
  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="MagicThumb" 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="thumb-id:zoom"><img src="{{ image | product_img_url: 'small'}}" alt="{{product.title | escape }}"/></a>
    {% endfor %}
    {% endif %}
    
  8. You've finished - enjoy!
  9. 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.

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

Product variants

Magic Thumb for Shopify
Magic Thumb for Shopify Magic Thumb for Shopify Magic Thumb for Shopify Magic Thumb for Shopify



Black Maroon Obsidian Seaweed

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.

Customer reviews

  Rating: 5.0 (1 reviews)
Excellent app & support
Excellent app with so many options and combinations to choose from. A "must have" for any eshop owner. Also, technical support was fast, efficient and to the point ! Thank you so much !!!

coloraddicted.com

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!