Before and After Slider for Squarespace

Check your plan and prepare the images

Confirm that your Squarespace subscription supports JavaScript or iframe Code blocks. An iframe is not a way around this requirement: Squarespace restricts that format too. The official Code blocks guide linked below lists the current requirements.

Choose a pair of images with the same viewpoint, such as a room before and after renovation or an original and retouched photograph. Keep important details within the same frame so the divider reveals the change clearly.

Create your Squarespace image comparison

Open the Before After Photo Maker - BAGen slider editor. Upload both images or enter public image URLs, customize the labels, and set the initial divider position. Choose a maximum width that suits the section where you plan to place it.

Select Save & get code and sign in when prompted. Save the comparison and copy the Script snippet. This is a Before After Photo Maker - BAGen-hosted slider embedded into Squarespace, not a native Squarespace block. Your Before After Photo Maker - BAGen plan controls limits and branding.

Place the slider in a Squarespace Code block

1. Add a Code block

   Edit the target page, choose the section, and add a Code block. Use HTML mode rather than a Markdown, Image, or Text block.

2. Paste the complete snippet

   Paste the Script code copied from your saved Before After Photo Maker - BAGen comparison. If the Code block offers Display Source, turn that off so visitors see the comparison instead of the code.

3. Set the block size

   Give the block enough width and vertical space for your images. In a Fluid Engine layout, check both the desktop and mobile arrangements so the surrounding content does not overlap the comparison.

4. Save and test outside editing mode

   Save your changes and open the public page in a new tab, preferably while signed out. Drag the slider on desktop and touch it on a phone. Squarespace may disable embedded scripts inside its editor.

Keep the slider markup in the page where the comparison belongs. You do not need site-wide Code Injection for this setup. If you choose Before After Photo Maker - BAGen's iframe option instead, paste that complete snippet and check the block height against the image aspect ratio.

Fix a blank, clipped, or non-interactive slider

1. Blank inside the editor

   Check the saved public page first. An editor warning or disabled script preview does not establish that the live embed is broken.

2. Code appears as text

   Check that you used a Code block in HTML mode with Display Source off. Then verify that your subscription permits the script or iframe.

3. The slider is cut off

   Increase the block's height in the desktop and mobile layouts. If you used an iframe, check its height and aspect ratio as well as the Squarespace block dimensions.

4. The images do not load

   Confirm that the saved Before After Photo Maker - BAGen slider still exists. For external image URLs, check that both are HTTPS links and accessible to a signed-out visitor.