How to Add a Before and After Image Slider in Squarespace
Adding a before and after image slider is a simple way to visually demonstrate transformations on a Squarespace website. This tutorial shows how to create the slider using the Common Ninja Before and After Slider widget and embed it directly onto a page of your Squarespace website.
IN THIS POST YOU'LL LEARN:
How to create a slider using the widget
How to upload and configure your images
How to customize the slider’s look and settings
How to embed the slider in Squarespace
Set Up a Before and After Image Slider in Squarespace
You can create a before and after slider using the Common Ninja Before and After Slider Widget. After opening the widget builder, the setup begins in the General or Content tab where the images and labels are configured.
Start by replacing the default images with your own. You’ll upload one image for the “before” state and another for the “after” state. After uploading, select the images from the media library so they appear inside the slider preview.
You can then update the label text that appears on each side of the slider so visitors understand what each image represents.
Steps for setting up the slider:
Open the before and after slider widget
Replace the default images with your own photos
Add or edit the label text for the images
Save the project so files can be uploaded
FAQ
Q1: Do my before and after images need to be the same size?
A1: It’s best if both images have the same dimensions so the slider aligns properly. Using images with matching sizes usually creates a smoother visual comparison.
Q2: What image format works best for the slider?
A2: Common formats like JPG and PNG typically work well for website images. These formats balance image quality and loading speed for most websites.
Customize the Slider Settings and Design
After adding your images, you can customize how the slider appears and behaves. Most visual settings are controlled in the Look and Feel, Advanced, and Settings tabs.
You can adjust the position of the labels, choose whether captions always appear or only show on hover, and select the image ratio depending on the orientation of your photos.
The design panel also lets you match the slider with your brand colors and adjust text styling.
Customization options include:
Label position (top, middle, or bottom)
Label visibility (always show, hover only, or hidden)
Image ratio for vertical or horizontal images
Divider style between images
Brand color adjustments
Title and caption color settings
FAQ
Q1: Can I preview the slider changes before publishing it on my website?
A1: Yes. The widget builder shows a live preview while you adjust the settings. This lets you see how your slider will look before embedding it on your site.
Q2: Will changing the design settings affect the images themselves?
A2: No. Design settings only control how the slider appears on the page. Your original image files remain unchanged.
Embed the Slider on Your Squarespace Page
Once the slider is configured, it can be embedded on your website using the widget’s embed code.
After saving the widget, copy the code that the tool generates. Then open the page in Squarespace where you want the slider to appear.
To embed the slider:
Edit the page in Squarespace
Add a Code Block
Paste the widget embed code
Save the block and preview the page
The slider will appear once you exit editing mode and preview the page.
FAQ
Q1: Do I need coding experience to embed the slider in Squarespace?
A1: No. You only need to copy the embed code and paste it into a Code Block on your page. Squarespace handles the rest automatically.
Q2: Can I move the slider to a different place on the page later?
A2: Yes. You can reposition the Code Block just like any other content block in Squarespace. This allows you to place the slider wherever it fits best in your layout.
Strategic Ways to Use a Before and After Slider
A before and after slider works best when there is a clear visual difference between the two images. The more obvious the change, the easier it is for visitors to understand the value being shown.
Common uses for sliders include:
Weight loss or fitness transformations
Car detailing or auto body repair results
Esthetician or skincare treatments
Hair or makeup transformations
They can also be effective for organization or decluttering projects.
Examples include:
A messy pantry turned into an organized system
A cluttered closet transformed into a functional space
A disorganized workspace converted into a streamlined setup
Construction and renovation projects are another strong use case because they show dramatic visual progress.
Examples include:
Frame‑to‑finish construction projects
Bathroom or kitchen renovations
Landscaping transformations
FAQ
Q1: Can a before and after slider help showcase my work to potential clients?
A1: Yes. It allows visitors to quickly see the results of your work in a visual way. This can make it easier for people to understand the value of your service.
Q2: Where is the best place to add a before and after slider on a website?
A2: Many people place sliders on service pages or portfolio sections. This helps visitors see real examples of the results you provide.
Final Thoughts
Adding a before and after image slider to your Squarespace website is a simple way to visually demonstrate the results of your work. Using tools like the Common Ninja Before and After Slider Widget, you can create an interactive comparison that lets visitors immediately see the difference between the starting point and the final outcome.
When used with clear, high-contrast images, this type of visual comparison can quickly communicate the value of what you do. Whether you're showcasing renovations, design work, beauty services, or organization projects, a before and after slider helps visitors understand the transformation in a more engaging and memorable way.
This page contains affiliate links
