Adding a comparison slider to your website

Learn more about utilizing the comparison slider on your website

Written by: Madeline B. Last updated: 24th June 2025

The comparison slider section in B12 lets you display two images side by side with a draggable slider — perfect for before-and-after examples or product improvements. This interactive element helps you showcase visual transformations or comparisons clearly and professionally.

Follow the steps below to add a comparison slider to any page on your website.

1. Log into your B12 editor

2. In the left-hand editing panel, select Website > Pages

3. Find the page where you want to add the slider on the left-hand editing panel, select it—in this example we've chosen the Homepage

4. On the left-hand editing panel, select the Add section button

5. Under Section categories, select About

6. Under the section subcategories, select About

6. Search for “Comparison” tag or scroll to find the Comparison slider

7. Once you've selected the comparison style, click Continue—the section will then appear on the page

8. Add your images in the left-hand editing panel

In the new section:

• Click on the Images fields in the editing panel

• Upload your Before and After images or select the two images you want to compare

9. Be sure to click Publish in the upper lefthand corner of your editor to ensure your edits are live

(Optional) Customize or move the section

You can:

• Adjust section settings like spacing, layout, or text

• Move the section up or down on the page

For more details, refer to:

• Adding a new section to a page

• Rearranging sections, navigation links, and other collection items