How to Set Up the Before & After Section in Maison

Page

Full

Desktop:
60px top
60px bottom

Mobile:
40px top
40px bottom

40px top spacing

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:

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.