Before and after

Add it to any template with Add section, under Storytelling.

Settings

Images

Setting	What it does	Default
Before imageImage		None
Before labelText		Before
After imageImage	Use the same dimensions as the before image so the two halves line up.	None
After labelText		After

Comparison

Setting	What it does	Default
DirectionMenu	Vertical wipes from top to bottom, and the labels move with it. Options: Horizontal, Vertical.	Horizontal
Starting positionSlider	How much of the before image shows when the section loads. From 0% to 100%, in steps of 5%.	50%
Show drag hintCheckbox	Wiggles the handle once when the comparison scrolls into view, so shoppers see it can be dragged.	On
Handle styleMenu	Options: Paw, Arrows, Bars, Slim.	Arrows
Handle colorMenu	Options: Card, Primary, Accent.	Card
Show labels on imagesCheckbox		On
Label styleMenu	Options: Pill, Plain. Shown when Show labels on images is on.	Pill
Label positionMenu	Options: Top, Bottom. Shown when Show labels on images is on and Direction is Horizontal.	Top
Label positionMenu	Options: Left, Right. Shown when Show labels on images is on and Direction is Vertical.	Left

Layout

Setting	What it does	Default
Content positionMenu	Content comes from the blocks below. Above and below give the comparison the full width. Options: Beside, Above, Below.	Beside
Media positionMenu	Options: Left, Right. Shown when Content position is Beside.	Right
Comparison widthMenu	Options: Equal, Medium, Wide. Shown when Content position is Beside.	Medium
AlignmentMenu	Options: Left, Center, Right. Shown when Content position is not Beside.	Center
Aspect ratioMenu	Options: Adapt to image, Square (1:1), Portrait (4:5), Landscape (4:3), Wide (16:9), Cinematic (21:9).	Landscape (4:3)
Aspect ratio on mobileMenu	Crops the media to a different shape on phones, keeping an image's focal point in view. Options: Same as desktop, Square (1:1), Portrait (4:5), Landscape (4:3).	Same as desktop
Corner radiusMenu	Options: None, Small, Medium, Large, Extra large.	Extra large

Section style

Setting	What it does	Default
WidthMenu	Options: Contained, Full width.	Contained
ColorMenu	Options: Default, Muted, Primary, Accent, Custom.	Default
BackgroundColor	Shown when Color is Custom.	None
Background gradientGradient	Shown when Color is Custom.	None
Text colorColor	Leave blank to auto-pick black or white for contrast. Shown when Color is Custom.	None
Vertical spacingMenu	Options: Theme default, None, Small, Medium, Large.	Theme default

Other blocks you can add

Setting names and defaults on this page match Pawsome 1.0.3, as they appear in the theme editor in English.