Welcome, Hunter! 👋 Enjoy 50% OFF annual plans with code PRODUCTHUNT — limited time ⏳
50% OFF annual plans — code PRODUCTHUNT

Before and After Slider for Squarespace

Compare before-and-after visual changes on your Squarespace website to show transformations, illustrate progress, and present clear, impactful results.
4.8 rating
10,000+ reviews
Free plan available
Create Widget for Free
No credit card needed
Before and After Slider for Squarespace

Create your Before and After Slider plugin

Configure your Before and After Slider and add it to your Squarespace website for free!

Screenshots

Before and After Slider for Squarespace
1 / 6

Embed Before and After Slider on Squarespace with the Elfsight widget

Before and After Slider by Elfsight will help you configure amazing promoting pictures for your site. Users will be able to explore all the changes that your products or services introduce. Just upload two pictures to Before and After Slider for Squarespace and they will be demonstrated with a divider which cam be moved to check the change. You can create unlimited pairs of photos, and write captions and labels. The sliding direction offers two options: horizontal or vertical, and you are free to select the most appropriate picture ratio. Your clients will be doomed to order, once they see the real efficiency| of your products!

Make your website more successful for e-commerce objectives with the help of photos of before and after.

Explore the list of the greatest features:

  • Embed any number of Before and After couples of images
  • Insert captions with text formatting options to each photo
  • Two layouts: List and Carousel
  • Horizontal or vertical direction of the divider
  • Click and drag or simply hovering to move the divider
  • Swipe on touch devices

Just try out this demo to see how it works

How do I embed Before and After Slider on my Squarespace website?

Just follow the instructions below to integrate the tool.

  1. Open our free configurator and start forming your own plugin.
    Determine the custom form and characteristics of the plugin and save the corrections.
  2. Get your unique code popping up in the special form on Elfsight Apps
    Right after the generation of your plugin is done, copy the personal code from the emerged popup and save it for further need.
  3. Start using the tool on your Squarespace homepage
    Place the code copied before in your website and apply the improvements.
  4. The Setup is fully performed
    Go your page to see in action how’s the widget running.

If you encounter inquiries or confront some obstacles, do not be afraid to reach out to our customer service staff. Our people will be happy to resolve all the difficulties you may have on the widget.

Is Before and After compatible with Squarespace 7.0 and 7.1?

Elfsight works on all Squarespace versions, including classic 7.0 and the latest 7.1 with Fluid Engine, and it integrates smoothly with any template.

Which Squarespace plans support adding the Before and After plugin?

You’ll need a plan that allows custom code. Squarespace’s Business or higher plans are required for embedding JavaScript plugins – Personal/Basic plans don’t support code blocks or header/footer injections for scripts.

Does the Slider support vertical and horizontal dividers?

Yes, both vertical and horizontal divider directions are supported, allowing you to choose the best orientation for your Squarespace layout.

How can visitors interact with the divider in the slider?

The plugin supports Drag and Click, as well as Hover interaction modes, letting Squarespace visitors move the divider easily.

Can I add clickable links inside image captions?

Yes, captions support links, allowing you to redirect visitors to product pages, services, or case studies on your Squarespace website.

Can I adjust the initial divider position?

Yes, the Elfsight Before and After Slider plugin lets you set the default divider position, controlling how much of the before or after image appears first.

What image formats are recommended for best performance?

The plugin works best with optimized JPG or PNG images, following Elfsight’s size and resolution guidelines for Squarespace pages.

Does Elfsight compress or optimize uploaded images?

No, images are displayed exactly as uploaded, so optimization should be done before adding them to the plugin.

Can I use the Before and After Slider for mockups or designs?

Yes, the plugin supports any paired images, making it suitable for renders, mockups, design revisions, and visual comparisons.

Can I compare more than two images in one slide?

No, each slide compares two images only, so showing multi-stage progress requires adding several slides in sequence.

Is it possible to lock the divider position?

No, the slider is designed for interactive comparison, so the divider remains movable for a better user experience.

Pricing

14-day money back guarantee. Risk-free, you can cancel at anytime.
Elfsight Apps
Platfrorm-indipendent software that suits for any site
from $0 / month
start with free plan
Unlimited domains
Professional customer support and well documented
Free installation help
100% customizable
Price to catch for multiple apps