Enter the world of zoom.

Zoom or enlarge, the choice is yours

  • Fast support - contact us with any questions.
  • Mobile - works beautifully on iPad, iPhone, Android.

Install | Download

  Rating: 5.0 (1 reviews)

The greatest image zoom of all is now available for Squarespace!

We are big fans of Squarespace. It's excellent for creating professional looking websites without writing a single line of code. But nothing is perfect and even Squarespace lacks a great image zoom tool.

We have the solution - this gorgeous image zoom addon for Squarespace shows beautiful big images by zooming into images on hover. It also enlarges images on click - something you MUST see to believe. It's a real "wow" factor for visitors who want to see your images in much higher quality.

This JavaScript image zoom, works with or without jQuery, so it works perfectly on any website. With special refinements for mobile devices, you get a great experience on iPhones, iPads and other mobile screens.

Excite your visitors, build confidence and enjoy a more successful Squarespace site. Follow the steps below to add this image zoom script to your site.

(This image zoom extension for Squarespace is provided by Magic Toolbox. As a 3rd-party script, it is supported by Magic 360. With free and fast support, just contact our team if you need help.)

Live demos

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 Plus (free and fully functional demo version).
  4. Upload magiczoomplus folder to Squarespace server Unzip the file on your computer and SFTP the magiczoomplus 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/magiczoomplus/magiczoomplus.css"/>
    <script type="text/javascript" src="/assets/magiczoomplus/magiczoomplus.js"></script>
    <script type="text/javascript" src="/assets/magic-squarespace.js?tool=MagicZoomPlus"></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 Plus will now be automatically applied to all your product image galleries.
  10. Buy Magic Zoom Plus To upgrade your free and fully functional trial version of Magic Zoom Plus (which removes the "Trial version" text), buy Magic Zoom Plus. Then overwrite the demo magiczoomplus.js file with the one from your licensed version.

Customize

    Magic Zoom Plus can be easily customized thanks to our Wizard!
  1. Go to Magic Zoom Plus 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 Plus on your Squarespace site! What did you hope Magic Zoom Plus 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/magiczoomplus/magiczoomplus.css"/>
    <script type="text/javascript" src="/assets/magiczoomplus/magiczoomplus.js"></script>
    <script type="text/javascript" src="/assets/magic-squarespace.js?tool=MagicZoomPlus"></script>
  3. Delete the magic-squarespace.js file from the assets folder (on your server).
  4. Delete the magiczoomplus folder from the assets folder (on your server).
  5. Magic Zoom Plus is now uninstalled.

FAQ

  1. Can I remove bounce effect from mobile devices?

    Yes! To disable the bounce effect from small screen devices, add the following CSS to your magiczoomplus.css file:

    .mobile-magic .mz-figure > img {
    opacity: 1 !important;
    }
    .mobile-magic .mz-figure > img + img {
    transform: scale(1) !important;
    }

    .mobile-magic .mz-figure {
    -webkit-perspective: none !important;
    perspective: none !important;
    }
    .mobile-magic .mz-figure > img {
    opacity: 1 !important;
    }
    .mobile-magic .mz-figure:not(.mz-ready) > img:last-child {
    -webkit-transform: scale(1) !important;
    transform: scale(1) !important;
    }

Customer reviews

  Rating: 5.0 (1 reviews)
Able to anticipate our needs
We received support from your Mr I. Shugurov.

He patiently answered all our queries and with clinical precision guided and helped us through the installation process.

He is so adept at what he does that he was able to anticipate our needs and make recommendations before we even had to ask.

From our experience, Mr I. Shugurov is a true asset of your company.

L.L

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 & image lightbox (enlarge image to full screen) effects to your website.