Be bold with this gorgeous image zoom.

Trigger the expand from a thumbnail or even from text!

  • Change the buttons, effects, background, borders, captions and more.
  • Enlarged images can link to URLs, show text, titles, even forms and buttons.

Install | Download

Enlarge your Squarespace images to full-screen. This beautiful image lightbox effect helps users see your images in glorious detail.

Choose between on-click or on-hover to enlarge your images. Customise the plugin to look exactly how you want (over 30 options).

Easy to install, follow the simple steps below. If you need help, our friendly tech support team is here to help. This image expand extension is created and supported by Magic Toolbox - it is separate to the official Squarespace platform.

With 3 different image zoom and enlarge tools to choose from, we'll help you setup your perfect image zoom. Try Magic Zoom and Magic Zoom Plus.

Integration instructions

  1. Please note that you will need to enable developer mode. Connect to your website with SFTP, following the Squarespace SFTP instructions.
  2. Create assets folder on Squarespace server Connect to your server. If an assets folder does not already exist, create a new assets folder in the root directory of your Squarespace website.
  3. Download Magic Thumb (free and fully functional demo version).
  4. Upload magicthumb folder to Squarespace server Unzip the file on your computer and SFTP the magicthumb folder to the assets folder (on your server), keeping the file and folder structure intact.
  5. Upload magic-squarespace.js to Squarespace server Download this file - magic-squarespace.js (right click it and save it to your computer), then upload that file to the same assets folder on your server.
  6. Login to your Squarespace admin panel: https://your-site.squarespace.com/config (replace your-site with your domain name).
  7. Add image zoom code to Squarespace header

    In your Squarespace admin panel, go to: Settings > Advanced > Code Injection and insert following code in the Header section:

    <link type="text/css" rel="stylesheet" href="/assets/magicthumb/magicthumb.css"/>
    <script type="text/javascript" src="/assets/magicthumb/magicthumb.js"></script>
    <script type="text/javascript" src="/assets/magic-squarespace.js?tool=MagicThumb"></script>
  8. Save Squarespace changes for image zoom to appearClick the Save button at the top of the page.
  9. That's it! Magic Thumb will now be automatically applied to all your product image galleries.
  10. 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.

Uninstallation

Thanks for trying Magic Thumb on your Squarespace 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 your Squarespace admin panel: https://your-site.squarespace.com/config (replace your-site with your domain name).
  2. In your Squarespace admin panel, go to: Settings > Advanced > Code Injection and delete following code from the Header section:

    <link type="text/css" rel="stylesheet" href="/assets/magicthumb/magicthumb.css"/>
    <script type="text/javascript" src="/assets/magicthumb/magicthumb.js"></script>
    <script type="text/javascript" src="/assets/magic-squarespace.js?tool=MagicThumb"></script>
  3. Delete the magic-squarespace.js file from the assets folder (on your server).
  4. Delete the magicthumb folder from the assets folder (on your server).
  5. Magic Thumb 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 Squarespace extensions

Try our other great image effects!

These instructions are for Squarespace. Use them to add image lightbox (enlarge image to full screen) effects to your website.