Image comparison section
The Image comparison section of Local shows two images with a slider that customers drag to compare before and after.
Applies to: Local 4.2.1 and later. Added in: Local 2.1.0. Last checked: 2026-10-13 against Local 4.2.1.
The Image comparison section shows two images on top of each other with a handle that customers drag to reveal one or the other. Use it for before and after pictures: a cleaned surface, a renovated room, a product with and without a filter. The changelog calls it the "Before/After slider" (Local 2.1.0).
Where to find it: Online Store → Themes → Customize → Add section → Image comparison
Layout
- Layout sets the direction: Horizontal (default; the handle moves left and right) or Vertical (the handle moves up and down).
- Invert layout on mobile devices switches to the other direction on phones, for example horizontal on desktop and vertical on mobile.
- Desktop height and Mobile height set the height as a share of the screen: Small 50 percent, Medium 65 percent (default), Large 80 percent. Both images are cropped to fill it.
Colors
Color style sets the look of the handle and the labels: Dark (default) for light images, Light for dark images.
Image blocks
The section takes two Image blocks: the first is the image underneath, the second covers it up to the handle.
- Image is the picture; Mobile image (optional) replaces it on phones.
- Label is a short tag on the image, for example "Before" or "After". Leave it empty to hide it.
Use two images of the same size and framing, so the handle shows the change and nothing else.
Why does only one image show?
Because the section has only one Image block. Add a second Image block (the limit is two), or check that both blocks have an Image set.
All Image comparison settings
Every setting, with its type and default.
Accepts these blocks: Image.
Image comparison section: Heading
Where to find it: Image comparison → Heading
The Image comparison section uses the standard Heading settings, listed in General section styling.
Heading (text field, default: "Before & After").
Subheading (formatted text, default: "Compare your best offers").
Text alignment (dropdown, default: Left). Options: Left, Center.
Show section link (checkbox, default: off): Adds a text link next to the section heading. Fill Link text and Link too.
Link text (text field). Shown only when Show section link is on.
Link (link). Shown only when Show section link is on and Link text is set.
Open link in a new window (checkbox, default: off). Shown only when Link is set and Show section link is on and Link text is set.
These settings differ from the standard ones or exist only here:
Heading (text field, default: "Before & After").
Subheading (formatted text, default: "Compare your best offers").
Image comparison section: Layout
Where to find it: Image comparison → Layout
Layout (dropdown, default: Horizontal): Sets the direction of the handle: Horizontal moves it left and right, Vertical up and down. Options: Horizontal, Vertical.
Invert layout on mobile devices (checkbox, default: off): Uses the other direction on screens narrower than 768 px.
Desktop height (dropdown, default: Medium): Sets the height as a share of the screen height: Small 50, Medium 65, Large 80 percent. Options: Small, Medium, Large.
Mobile height (dropdown, default: Medium): Sets the height on screens narrower than 768 px, as a share of the screen height: Small 50, Medium 65, Large 80 percent. Options: Small, Medium, Large.
Image comparison section: Colors
Where to find it: Image comparison → Colors
Color style (dropdown, default: Dark): Sets the look of the handle and labels: Dark for light images, Light for dark images. Options: Dark, Light.
Image comparison section: Section design
Where to find it: Image comparison → Section design
The Image comparison section uses the standard Section design settings, listed in General section styling.
Background color (color, default: transparent).
Background gradient (gradient).
Heading text color (color, default: transparent): Sets the color of the text outside the cards, mostly the section heading.
Descrease top margin (checkbox, default: off): Sets the space above the section to the grid gap of Theme settings → Layout → Horizontal space, instead of the full space between sections. Shown only when Remove top margin is off.
Remove top margin (checkbox, default: off): Removes the space above the section, so it touches the section before it. Shown only when Descrease top margin is off.
Image comparison section: SEO
Where to find it: Image comparison → SEO
The Image comparison section uses the standard SEO settings, listed in General section styling.
Heading tag (dropdown, default: H2): Sets the HTML tag of the heading for search engines. It does not change how the heading looks. Options: H1, H2, H3, H4, span.
Image comparison section: Visibility
Where to find it: Image comparison → Visibility
The Image comparison section uses the standard Visibility settings, listed in General section styling.
Section visibility (dropdown, default: Show always): Shows the section on every screen, only below 768 px (mobile) or only from 768 px (desktop, tablets included). A hidden section is still in the page. Options: Show always, Show only on mobile, Show only on desktop.
Image block
Where to find it: Image comparison → Add block → Image
Up to 2 Image blocks per section.
Image (image): The first Image block is the image under the handle; the second covers it up to the handle.
Mobile image (optional) (image).
Image block: Text content
Where to find it: Image comparison → Add block → Image → Text content
Label (text field, default: "Label"): Sets a short tag on the image, such as Before or After. Empty hides it.