Before and After
Renders an interactive before/after image comparison slider. Two image layers are stacked — the "before" image sits beneath, and the "after" image is clipped using a CSS clip-path that updates as the user drags a range input handle. Each image layer can show an optional caption label anchored to its respective corner. The snippet reads block data and the initial slider position from the parent section; it only accepts two direct parameters. An error message is shown if fewer than two blocks are present.
Parameters
| Parameter | Description |
|---|---|
| height | CSS class suffix appended to the wrapper and image elements to apply the section-defined height. |
| loading_attr | Image loading attribute passed to both before and after images (lazy or eager). |
Section Settings Read
| Setting | Description |
|---|---|
| section_after_position | Initial horizontal split position of the slider as a percentage. Sets both the CSS --after-placement custom property and the range input's starting value. |
Block Types
The snippet processes two block types from section.blocks. Both share identical settings.
Before Block
Renders the background image layer. The caption label is pinned to the bottom-left of the slider.
| Setting | Description |
|---|---|
| image | Desktop image for the "before" state. |
| block_mobile_image | Alternative image shown on mobile. When set, the desktop image is hidden on mobile and vice versa. |
| heading | Caption label displayed over the bottom-left corner of the image. Hidden when blank. |
| block_text_size | CSS size class for the caption label. |
| block_text_weight | Font weight for the caption label. |
| block_text_case | Letter case for the caption label. |
| block_text_family | Font family for the caption label. |
| block_text_color_styles | Color style for the caption label; when not default, applies the heading color. |
| block_color_scheme | Shopify color scheme applied to the image layer. |
After Block
Renders the clipped foreground image layer. The caption label is pinned to the bottom-right of the slider.
| Setting | Description |
|---|---|
| image | Desktop image for the "after" state. |
| block_mobile_image | Alternative image shown on mobile. When set, the desktop image is hidden on mobile and vice versa. |
| heading | Caption label displayed over the bottom-right corner of the image. Hidden when blank. |
| block_text_size | CSS size class for the caption label. |
| block_text_weight | Font weight for the caption label. |
| block_text_case | Letter case for the caption label. |
| block_text_family | Font family for the caption label. |
| block_text_color_styles | Color style for the caption label; when not default, applies the heading color. |
| block_color_scheme | Shopify color scheme applied to the image layer. |