It's all in the detail.

Choose from internal or external zoom

  • Beautifully optimized for iOS and Android devices.
  • Users love the smooth movement and high quality zoom.

Install | Download

Hover to zoom your Squarespace product images in outstanding detail. Your high-definition images are shown on mouseover, helping customers see every detail in your images.

This Squarespace image zoom script makes it easy to add gorgeous image zoom to your pages. With free and fast support, just contact our team if you need help. This extension is supported by Magic Toolbox and is not affiliated to the official Squarespace product.

New versions are released regularly, so your images will always look gorgeous in the latest browsers.

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 Zoom (free and fully functional demo version).
  4. Upload magiczoom folder to Squarespace server Unzip the file on your computer and SFTP the magiczoom 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/magiczoom/magiczoom.css"/>
    <script type="text/javascript" src="/assets/magiczoom/magiczoom.js"></script>
    <script type="text/javascript" src="/assets/magic-squarespace.js?tool=MagicZoom"></script>
  8. Save Squarespace changes for image zoom to appearClick the Save button at the top of the page.
  9. That's it! Magic Zoom will now be automatically applied to all your product image galleries.
  10. 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.

Customize

    Magic Zoom can be easily customized thanks to our Wizard!
  1. Go to Magic Zoom Wizard Settings.
  2. Select the settings you require > Click Apply settings button.
  3. Choose your own Squarespace zoom settings Click Global Settings tab (under preview example) > Copy <Script> code.
  4. Save Squarespace for image zoom changes to appear Go to: Settings > Advanced > Code Injection. Paste <Script> code in the Footer field > Save changes.
  5. That's it!

Uninstallation

Thanks for trying Magic Zoom on your Squarespace 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.

  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/magiczoom/magiczoom.css"/>
    <script type="text/javascript" src="/assets/magiczoom/magiczoom.js"></script>
    <script type="text/javascript" src="/assets/magic-squarespace.js?tool=MagicZoom"></script>
  3. Delete the magic-squarespace.js file from the assets folder (on your server).
  4. Delete the magiczoom folder from the assets folder (on your server).
  5. Magic Zoom 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 zoom on hover/mouseover effects to your website.