Sartelle / Theme sections
Before / after
Create a touch, pointer and keyboard-accessible image comparison.
4 min read01 / Media
Prepare matching images
Choose Before and After images with the same composition and aspect ratio. Optional mobile images replace the desktop sources below 750 px while Shopify focal points remain respected.
02 / Settings
Control presentation and context
- Initial position
- Set the starting divider percentage.
- Labels
- Edit visible Before and After labels plus the accessible control description.
- Height
- Set independent desktop and mobile media heights.
- Width
- Use contained or full-width presentation.
- Footer
- Add an optional caption and action below the comparison.
03 / Accessibility
The comparison is not drag-only
A native range input handles mouse, touch and keyboard arrow interaction. Its accessible value updates as the divider moves, and keyboard focus is shown around the visual handle.