Follow the real editor
Install a Before/After Slider in Squarespace
A captioned visual walkthrough using screens from our Squarespace 7.1 test site. Pause whenever you need. There is no audio.
Six steps, about 90 seconds. Actual editor screenshots, arranged as a visual guide. The room is an illustrated example. A trial-site preview does not prove compatibility with every template or physical phone.
Read the complete walkthrough
- Prepare the images. Choose matching views and a 16:10 crop. Upload both images and copy their public HTTPS addresses. In the free preview, enter both URLs, meaningful descriptions, and your preferred direction.
- Check the requirements and get the export. Confirm that your Squarespace plan supports JavaScript in Code Blocks. Sign in to your verified Squarespace Tools account. A purchase unlocks the complete export; the personal-use price is $11.99. Copy all of the generated code.
- Add an HTML Code Block. On an unlinked test page, click Edit, then Add Block and Code. Open the Code Block settings. Set Mode to HTML and leave Display Source Code off. Paste the complete export, including its style and script tags. The walkthrough shows an existing test block with two comparisons.
- Save, exit, and try the handle. Size the block to fit your section. Save your changes and exit the editor. A Script Disabled message inside the editor does not establish a broken installation. In the saved preview, drag the handle, then focus it with Tab and use the arrow keys.
- Check both layouts. Use the desktop and mobile previews. Make sure the images, labels, and following section fit. Then check the published page while signed out and on a real phone. The screen shown here is a browser preview, not a physical-device test.
- Keep a way back. Use the checklist and symptom-specific help below. To remove the slider, delete only its Code Block and save. Your source images remain in the asset library. For help, send the tool name, page URL, browser/device, and a description of the problem.