Stunning image lightbox for Shopify

Enlarge on click or enlarge on hover

  • Top out-of-the-box solution for your product images
  • Add captions to images, for persuasive galleries.

Install | Download

Works on these pages:

    • Product details page
    All latest versions
  Rating: 5.0 (1 reviews)

Stay ahead of the competition - make your products look gorgeous with Magic Thumb.

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.

Although we love Magic Thumb, for Shopify store owners we highly recommend our Shopify image zoom app, Magic Zoom Plus!

Magic Zoom Plus is a zoom & enlarge tool which offers the simplest installation thanks to its app form. Get the free trial from the Shopify store and become part of a community where ease is essential. This image zoom app comes with its own Settings page for easy customization so Magic Zoom Plus blends seamlessly with your store's design.

Whether you choose Magic Thumb or Magic Zoom Plus, we're here to help with any questions you have!

Features you'll love...

  • Responsive
  • Fast
  • Built with SEO in mind
  • Image caching
  • Easily customisable
  • Automatically resizes images
  • Scrollable thumbnails
  • All templates supported
  • Instant watermarks for images
  • On-demand loading
  • Constantly updated
  • no jQuery required
  • One-off payment

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 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="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

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!