Before and after - Kwebby Documentation

Before and after on the storefront — Before and after, highlighted with the demo content

Where to find it

Home page. In the theme editor choose Home page, then select Before and after.

How it works

Shoppers drag the slider, press it, or use the arrow keys to compare the two images.
Both images are cropped to 5:4. Starting position sets how much of the before image shows when the page opens.
In right-to-left languages the before image sits on the right.

Before and after in the theme editor — In the theme editor: 1 the section in the sidebar · 2 its settings · 3 the section in the preview

Edit it

Upload a Before image and an After image taken from the same spot, so they line up.
Edit the Before label and After label, and add a Caption if you like.
Edit Eyebrow, Heading, Text, Link label and Link, for example Find a boutique.
Choose Images position on desktop: First or Second.

Settings

Images

Setting	What it does
Before image	Image: upload one or choose from Content → Files.
After image	Image: upload one or choose from Content → Files. Use two photographs taken from the same spot, so the slider lines them up. Both are cropped to 5:4.
Before label	Text. Default: Before.
After label	Text. Default: After.
Starting position	Slider from 0 to 100 %, in steps of 5. How much of the before image shows when the page opens. Default: 50 %.
Caption	Text.

Text

Setting	What it does
Eyebrow	Text. Default: Lifetime care.
Heading	Text. Default: Cleaned, re-polished and checked, free for life.
Text	Formatted text.
Link label	Text. Default: Find a boutique.
Link	Link: a page, product, collection or web address.
Images position on desktop	Options: First, Second. Default: Second.
Color scheme	Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 1.