Before & After

At a glance

Before/after slider so shoppers can compare two images interactively.

Where to find it

Theme editor path: Online Store → Customize → select the relevant page → Before & After
Add to a page: Add via Add section → category Media.

Settings

Content settings

Setting	What it does	Default	Shows when
Heading	Controls “Heading” on the storefront. Open the theme editor to preview live.	Before & After	Always
Use global H2 heading styles	When on, uses the matching style from Theme settings. Turn off to style only this section or block.	Yes	Heading is filled in
Heading font size (mobile)	Sets heading font size (mobile) in pixels for the matching screen size.	26	Heading is filled in and Use global heading styles is off
Heading font size (tablet)	Sets heading font size (tablet) in pixels for the matching screen size.	29	Heading is filled in and Use global heading styles is off
Heading font size (desktop)	Sets heading font size (desktop) in pixels for the matching screen size.	33	Heading is filled in and Use global heading styles is off
Heading font weight	Sets how bold heading text appears.	500	Heading is filled in and Use global heading styles is off
Content alignment	Controls “Content alignment” on the storefront. Open the theme editor to preview live.	center	Heading is filled in

Comparison

Setting	What it does	Default	Shows when
Divider direction	Controls “Divider direction” on the storefront. Open the theme editor to preview live.	horizontal	Always
Image aspect ratio	Controls the image setting “Image aspect ratio”. Upload clear photos for best results.	3 / 4	Always
Handle color	Controls “Handle color” on the storefront. Open the theme editor to preview live.	#FFFFFF	Always

Layout

Setting	What it does	Default	Shows when
Padding top	Adds empty space (padding top) around the section content.	32	Always
Padding bottom	Adds empty space (padding bottom) around the section content.	32	Always

Color scheme

Setting	What it does	Default	Shows when
Color scheme	Applies a color scheme from Theme settings → Colors.	scheme-1	Always

Blocks

Block	Purpose	Limit
Before	Add and configure in theme editor.	1
After	Add and configure in theme editor.	1

Before settings

General

Setting	What it does	Default	Shows when
Image	Controls the image setting “Image”. Upload clear photos for best results.	—	Always
Label	Controls “Label” on the storefront. Open the theme editor to preview live.	Before	Always
Label position	Controls “Label position” on the storefront. Open the theme editor to preview live.	start	Always
Use global text styles	When on, uses the matching style from Theme settings. Turn off to style only this section or block.	Yes	Always
Font size	Sets font size in pixels for the matching screen size.	14	use global text styles is off

After settings

General

Setting	What it does	Default	Shows when
Image	Controls the image setting “Image”. Upload clear photos for best results.	—	Always
Label	Controls “Label” on the storefront. Open the theme editor to preview live.	After	Always
Label position	Controls “Label position” on the storefront. Open the theme editor to preview live.	start	Always
Use global text styles	When on, uses the matching style from Theme settings. Turn off to style only this section or block.	Yes	Always
Font size	Sets font size in pixels for the matching screen size.	14	use global text styles is off

Setting details

Each control from the tables above, explained simply:

Heading

Controls “Heading” on the storefront. Open the theme editor to preview live. Default: Before & After.

Use global H2 heading styles

When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes. This control appears when: Heading is filled in.

Heading font size (mobile)

Sets heading font size (mobile) in pixels for the matching screen size. Default: 26. This control appears when: Heading is filled in and Use global heading styles is off.

Heading font size (tablet)

Sets heading font size (tablet) in pixels for the matching screen size. Default: 29. This control appears when: Heading is filled in and Use global heading styles is off.

Heading font size (desktop)

Sets heading font size (desktop) in pixels for the matching screen size. Default: 33. This control appears when: Heading is filled in and Use global heading styles is off.

Heading font weight

Sets how bold heading text appears. Default: 500. This control appears when: Heading is filled in and Use global heading styles is off.

Content alignment

Controls “Content alignment” on the storefront. Open the theme editor to preview live. Default: center. This control appears when: Heading is filled in.

Divider direction

Controls “Divider direction” on the storefront. Open the theme editor to preview live. Default: horizontal.

Image aspect ratio

Controls the image setting “Image aspect ratio”. Upload clear photos for best results. Default: 3 / 4.

Handle color

Controls “Handle color” on the storefront. Open the theme editor to preview live. Default: #FFFFFF.

Padding top

Adds empty space (padding top) around the section content. Default: 32.

Padding bottom

Adds empty space (padding bottom) around the section content. Default: 32.

Color scheme

Applies a color scheme from Theme settings → Colors. Default: scheme-1.

Image

Controls the image setting “Image”. Upload clear photos for best results. Default: —.

Label

Controls “Label” on the storefront. Open the theme editor to preview live. Default: Before.

Label position

Controls “Label position” on the storefront. Open the theme editor to preview live. Default: start.

Use global text styles

When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes.