In the theme editor: CustomizeHome pageAdd sectionBefore and after

Before and after

Two pictures of the same thing with a line between them that customers drag, for example before and after a treatment or a process.

Use two pictures taken from the same angle and size, so only the change moves. The line also works with the keyboard.

Settings

Before image: ImageUse the same framing as the main image, so the line compares two states of the same thing.
After image: Image
Before label: TextEmpty: “Before”.
After label: TextEmpty: “After”.
Image focus: Choice: The image's focal point, Center, Top, BottomDefault: The image's focal point
Image shape on a computer: Choice: Portrait (4:5), Tall (2:3), Square, Landscape (3:2)Default: Portrait (4:5)
Image shape on a phone: Choice: Same as on a computer, Portrait (4:5), Square, Landscape (3:2)Default: Same as on a computer

Show a button: On or offDefault: On
Button text: TextLeave empty to show the default text.
Button link: LinkLeave empty to open the all products page.
Glass button: Slider, 0 to 90 %Default: 0 %0: a regular solid button. Above 0: dark translucent glass with a thin light edge, for a button on a picture. Higher is darker.

Image side: Choice: Automatic: opposite the section above, At the start (right, in Hebrew), At the end (left, in Hebrew)Default: Automatic: opposite the section aboveWhere the image sits next to the text, on a computer or a tablet. Automatic: when the section above also has an image beside text, the image goes on the other side, so consecutive sections alternate; otherwise it sits at the start (right, in Hebrew).
Order on a phone: Choice: Image first, Text firstDefault: Image first
Text alignment: Choice: Start, Center, EndDefault: Start
Text position next to the image: Choice: Top, Middle, BottomDefault: MiddleOn a computer or a tablet.

Settings every section sharesWindow, Scrolling, Spacing, Colors, Text styling

The window, scrolling, spacing and color settings work the same way in every section. Read how they work.

Attach: Choice: Separate window, Attached to the window above, Attached to the window below, Attached above and belowDefault: Separate window
Image corners: Choice: Rounded, SquareDefault: Rounded

Next section covers it on scroll: On or offDefault: OffScrolling down, this section stays in place under the header and the next section rises over it. Scrolling back reverses it. Off in the editor, for visitors who asked for reduced motion and on very short screens.

Custom spacing for this section: On or offDefault: OffOff: the section spacing from theme settings, under Layout. On: the values here, above and below this section. On phones most sections use 65% of them.
Space above: Slider, 0 to 120 pxDefault: 40 px
Space below: Slider, 0 to 120 pxDefault: 40 px
Content width: Choice: Narrow, Standard, Wide, Full widthDefault: Standard

Color scheme: Color schemeSame as the page scheme: the section sits on the page background. Another scheme gives the section its own background, as a card inside the frame. Custom colors below override the scheme.
Use custom colors for this section: On or offDefault: OffOverrides the color scheme. Empty fields follow the scheme.
Background: ColorDefault: #F1F1EF
Text: ColorEmpty: automatic. Light on a dark background, dark on a light one.
Background style: Choice: Flat color, Lit stageDefault: Flat colorLit stage: a soft light from above that fades toward the bottom, made from the section color, light or dark. On a dark color, text and buttons turn light on their own.
Light color: ColorThe soft light from the top center. Empty: white.

Custom text styling for this section: On or offDefault: OffOtherwise the section uses the theme styling. Shopify fonts do not include Hebrew, so you choose between styles that work in Hebrew.
Heading style: Choice: Theme default, Light, Bold, SerifDefault: Theme default
Heading size: Slider, 70 to 160 %Default: 100 %
Heading color: ColorEmpty: automatic, uses the section color (light on a dark background).
Text style: Choice: Theme default, Light, Bold, SerifDefault: Theme default
Text size: Slider, 70 to 160 %Default: 100 %
Text color: ColorEmpty: automatic, uses the section color (light on a dark background).

Something here doesn’t match what you see in your editor? Tell us and we will fix the guide.