The Before & After section in Maison lets customers compare two images by dragging a vertical handle from left to right.
It is useful for:
- Before-and-after transformations
- Room or interior makeovers
- Product results
- Material or finish comparisons
- Styling changes
- Restoration projects
- Different ways to use the same space or product
Maison places two images in the same comparison frame. Customers can drag the center handle to reveal more or less of either image.
Section overview
The Before & After section can contain regular content blocks above the comparison area, such as:
- Subheading
- Heading
- Icon
- Description
- Rich text
- Text
- Button
- Button group
- Image
- Video
- Page
- Custom Sline
- Divider
- Spacer
It also supports one dedicated Comparison image block.
The Comparison image block supports up to 2 Image blocks.
The default section structure is:
Before & After
├── Heading
└── Comparison image
├── Image
│ └── Group
│ └── Title: Before
└── Image
└── Group
└── Title: After
STEPS:
1. Add the Before & After section
To add the section:
- Open the Maison theme editor.
- Open the template where you want to display the comparison.
- Click Add section.
- Select Before & After.
- Add or configure the Comparison image block.
- Add two Image blocks.
- Select your comparison images.
- Click Save.
Maison allows only one Comparison image block inside each Before & After section.
2. Add the two comparison images
Open the Comparison image block.
Add or open the first Image block and select the first image.
Then add or open the second Image block and select the second image.
The section supports a maximum of:
2 Image blocks
By default:
- The first image occupies the left side of the comparison.
- The second image occupies the right side.
- The draggable handle begins at the center of the comparison.
The default preset labels the images:
Before
After
You can replace those labels with any text that fits your use case.
For example:
Dining Room
Living Room
or:
Original
Renovated
3. Understand the comparison slider
The comparison handle starts at approximately:
50%
of the comparison width.
Customers can drag the handle:
← Left | Right →
to reveal more of either image.
The control works with pointer interactions, so customers can use:
- Mouse
- Touch
- Pen or other pointer devices
Maison keeps the handle within the comparison frame, so it cannot be dragged outside the images.
The slider position is also recalculated when the section changes size, helping the comparison remain aligned when the browser or viewport is resized.
4. Adjust the comparison size
The Comparison image block includes a Size setting.
This controls the width and height of the comparison area.
The default Comparison image size is:
| Device | Width | Height |
|---|---|---|
| Desktop | 100% | 600px |
| Mobile | 100% | 400px |
You can adjust these values in the theme editor.
The Maison homepage demo uses:
| Device | Width | Height |
|---|---|---|
| Desktop | 100% | 700px |
| Mobile | 100% | 400px |
For a large editorial comparison, a taller desktop height can give the images more visual impact.
For mobile, a shorter height usually keeps the comparison easier to view and drag.
5. Use images with matching dimensions
For the cleanest comparison, use both images with the same:
- Dimensions
- Aspect ratio
- Camera angle
- Framing
- Subject position
For example:
Before: 2000 × 1400
After: 2000 × 1400
This makes it much easier for customers to compare the differences while dragging the handle.
Maison displays both images inside the same comparison frame using a cover-style presentation.
This means parts of an image can be cropped when its source ratio does not match the comparison frame.
6. Add separate Mobile images
Each Image block includes:
- Image
- Mobile image
Use Mobile image when your desktop image does not crop well on smaller screens.
For example:
Desktop image: wide room photograph
Mobile image: portrait crop focused on the main subject
If no Mobile image is selected, Maison uses the main Image on mobile as well.
For the best comparison experience, the two Mobile images should also use matching dimensions and framing.
7. Add Accessibility text
Each Image block includes an Accessibility field.
Use it to describe the meaningful content of the image.
For example:
Living room before the furniture update
and:
Living room after the furniture update
This text is used as the image alternative text when appropriate.
Keep the description short and meaningful.
8. Make an image clickable
Each Image block includes a Link setting.
You can use this to make the entire comparison image area clickable.
For example, the image can link to:
- A Collection
- A Product
- A Page
- A Campaign
- An external URL
You can also enable Open in new tab.
9. Add labels or text over each image
Each Image block can contain one Group block.
The Group can contain:
- Title
- Rich text
- Text
- Spacer
This is useful for adding labels such as:
Before
and:
After
The default preset places the Group near the bottom of each image.
The first image's Group appears toward the left side.
The second image's Group appears toward the right side.
You can also customize the Group's:
- Layout
- Spacing
- Colors
10. Customize the label Group
The Group block includes:
- Link
- Open in new tab
- Accessibility
- Color override
- Layout
- Spacing
This means the image label can be more than a simple title.
For example:
Before
Original dining room
or:
After
Explore the new collection
You can also assign a Link to the Group itself.
If a Group link is added, Maison places a clickable area over that Group.
11. Customize the comparison handle
The draggable handle is generated automatically by Maison.
It includes:
- A vertical divider line
- A circular center control
- Three vertical indicator marks
The handle becomes larger on desktop than on mobile.
Its colors follow the section's text and background colors, helping it stay visually integrated with the section design.
There is no separate theme-editor setting for changing the handle style in the current version.
12. Add a heading and supporting content
The Before & After section is not limited to the image comparison.
You can add content above the Comparison image block.
For example:
Heading:
One Space. Two Possibilities.
Text:
See how thoughtful furniture can completely redefine a room.
This is the structure used by the Maison homepage demo.
You can also add:
- Subheading
- Description
- Rich text
- Buttons
- Media
- Divider
- Spacer
This allows the comparison to work as a complete editorial or promotional section instead of only an image slider.
13. Configure Color override
The Before & After section includes Color override.
When enabled, you can customize:
- Text color
- Background color
- Background gradient
- Button text color
- Button background color
- Button gradient
These colors also affect the visual treatment of the comparison controls and content.
If Color override is disabled, the section follows the theme's standard color system.
14. Configure Section width
Available Section width options are:
- Narrow
- Page
- Fluid
- Full
The default section width is:
Page
The Maison homepage demo uses:
Full
Use Full when you want the Before & After imagery to have maximum visual impact.
Use Page or Narrow when the comparison should align with surrounding page content.
15. Configure Layout and Spacing
The section includes Maison's standard:
- Layout
- Spacing
controls.
The default layout stacks section content vertically.
The default section spacing is approximately:
Desktop:
60px top
60px bottom
Mobile:
40px top
40px bottom
The Comparison image block also has its own Spacing setting.
Its default setup adds:
40px top spacing
between the content above and the comparison area.
You can adjust these values to match the surrounding sections.
16. Add a Section divider
Enable Section divider when you want a visual divider around the section boundary.
This can help separate the Before & After section from nearby page content.
The setting is disabled by default.
Maison demo setup
The Maison homepage uses Before & After to compare two room presentations.
Its structure is:
Before & After
├── Heading
│ └── One Space. Two Possibilities.
├── Text
│ └── See how thoughtful furniture can completely redefine a room.
└── Comparison image
├── Image
│ └── Group
│ └── Living Room
└── Image
└── Group
└── Dining Room
The main demo settings are:
| Setting | Maison demo |
|---|---|
| Section width | Full |
| Comparison desktop width | 100% |
| Comparison desktop height | 700px |
| Comparison mobile width | 100% |
| Comparison mobile height | 400px |
| Comparison images | 2 |
| Separate mobile images | Not used |
| Image labels | Living Room / Dining Room |
How the Before & After section works
Two Image blocks added
│
└── Maison layers both images in one frame
│
├── First image reveals from the left
├── Second image reveals from the right
│
└── Handle starts in the center
│
└── Customer drags handle
├── Move left → reveal more of second image
└── Move right → reveal more of first image
Recommended setup
For the best result:
- Use exactly two comparison images.
- Use matching source dimensions and aspect ratios.
- Photograph or compose both images from the same viewpoint where possible.
- Keep the main subject aligned in both images.
- Use separate Mobile images when desktop crops do not work well on smaller screens.
- Add short labels such as Before and After when the comparison is not immediately obvious.
- Add Accessibility text to both images.
- Test the handle using both mouse and touch.
- Adjust desktop and mobile comparison heights independently.
- Use Full width for large visual storytelling or Page width for a more contained layout.
Notes and limitations
Please note the following behavior:
- Each Before & After section supports only one Comparison image block.
- The Comparison image block supports a maximum of 2 Image blocks.
- The current Maison version supports left-to-right comparison only.
- There is no Vertical comparison mode.
- The handle starts in the center of the comparison.
- The slider uses pointer dragging.
- Each Image block can have a separate Mobile image.
- Each Image block can contain one Group block.
- Each Group can contain Title, Rich text, Text, and Spacer blocks.
- Images and Groups can have optional links.
- Images use cover-style rendering inside the fixed comparison height.
- The comparison handle style is generated by the theme and does not have separate design controls in the Theme Editor.
- The section is disabled in the Header and custom Overlay groups.
Troubleshooting
If the Before & After section does not work as expected, check the following:
- Make sure the Comparison image block has been added.
- Make sure two Image blocks are added for a complete comparison.
- If only one side appears correctly, check both Image blocks.
- If the images do not align, use matching dimensions and aspect ratios.
- If the images are cropped too much, adjust the Comparison image Size or use source images with a more suitable ratio.
- If mobile cropping looks poor, add a separate Mobile image to both Image blocks.
- If the comparison looks too tall or too short, adjust the desktop and mobile height in Size.
- If labels are missing, check that each Image contains a Group with a Title or Text block.
- If a label is difficult to read, adjust the Group's Color override settings.
- If an image link does not work, check the Image block's Link setting.
- If dragging feels difficult on mobile, make sure no other overlapping block or custom code is covering the comparison handle.
- Remember that the current Maison version does not provide a Vertical comparison layout.
- Save your changes and test the comparison on both desktop and mobile.
Need Further Assistance
If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
How to Set Up Store Locations in Maison
How to Set Up the Blogs Section in Maison