Use the widget builder below to create your free Before and After Slider widget for Squarespace. Select a template and click “Continue with this template” to get started.

Do you want to add the Before After Slider to Squarespace and others? No problem.

How to Add a Before/After Photo Slider to Your Squarespace Website

1. Choose a template: All of the templates are responsive. Names of available templates are Simple comparison, Retouch Slider, List of Works, and Product comparison. Select a preferred template and click the “Continue with this template” button.
2. Add comparison sets: Click on the “Add Set” button and update both images for the before and after. You can also add labels, captions, and multiple image sets.
3. Layout settings: Choose a layout that best suits your content. The ‘List’ layout is great for displaying a series of comparisons in a linear fashion, while the ‘Carousel’ layout is perfect for a more dynamic presentation. You can also set the width in px or % to fit your Squarespace website’s design.
4. Settings: This section includes setting up the image ratio, slider’s direction, labels’ position, divider’s settings, interaction behavior, and full-screen mode.
5. Customize appearance: You can customize the Squarespace before and after slider widget’s look by changing the background, labels, captions, and controls. Custom CSS and JavaScript fields are also available for further styles and scripts.
6. Get embed code: Once you have finished designing the before and after photo slider, click the “Add to website for free” button and sign up on the following page to save your widget. In there, you can copy the HTML code.
7. Add Before/After slider to your website: Copy the image comparison widget’s embed code and use it on your website.

The Image Comparison Slider’s HTML Embed Code

Your Image Comparison Slider’s embed code includes two parts: External JavaScript file and HTML div tag with class attribute which is unique to your created widget. You can easily embed the before-and-after slider into your Squarespace website by using the “Embed” block. Here’s how:

1. Edit the page where you want to insert the before and after image slider on Squarespace.
2. Add the Embed Block to your page.

3. Paste the generated code into the Code Snippet section.

4. Save your changes and preview the widget on your Squarespace page.

How to Manage Your Before and After Slider Widget

Once you have created your before and after widget for Squarespace, you can easily manage it on your account. In your dashboard, search for “Before And After Slider” app under list of apps. As you can see from the following screenshot, you can create more Before/After Slider widgets, edit existing ones, and get HTML embed code.