Before after comparison

New sections start with a Carousel, Wide images, Above comparison content, a Medium heading, centered Content alignment and Mobile header alignment, and Reveal on scroll interaction. The default introduction is “Texture study”, “See how the finish changes”, and “Use the reveal to compare product texture and finish under consistent lighting.”

The preset includes two manual comparisons: Balm / Melted texture and Bare finish / Mineral SPF finish, with their explanatory captions and no product links or selected images. Placeholders let the preset work before images are chosen. Starter captions describe how to use the comparisons without naming a demo product. Existing demo instances retain their saved product-specific captions.

Other saved defaults are two product comparisons when using Product comparisons, two mobile columns when using Grid, horizontal divider orientation, a 50% starting position, visible labels, a Bar handle, a 1px divider, Scheme 6, entrance animation enabled, and 60px top and bottom padding. Images use the theme corner radius; the optional custom radius starts at 12px. The optional button and product picker start empty. Existing section instances keep their saved values.

Choose Layout → Carousel or Stacked, then set Content layout → Beside comparison. At desktop widths of 990px and above, the introduction sits on the left and the comparison sits on the right. Below 990px, content appears above the images in the same reading order.

The panel reuses Eyebrow, Heading, and Subheading under Section content. It does not repeat the introduction above the section. Content alignment controls the text alignment in either position on desktop, and aligns comparison labels and captions on every screen size. Choose Left for a conventional side panel or Center to center all comparison text. Labels beneath narrow images align within their respective half of the card. Mobile header alignment controls the introduction and its button below 750px. Choose Left, Center (the default), or Right independently, or use Follow desktop to reuse Content alignment. This mobile override applies only to the introduction and its button; comparison labels and captions continue to follow Content alignment. There is no separate Caption alignment control.

Heading size uses the theme’s compact scale: Small is 22px, Medium is 28px, and Large is 36px on desktop, reducing to 20px, 24px, and 28px below 750px. The same setting also scales the subheading. Small uses 14px supporting text on desktop and 15px on mobile, Medium uses 15px, and Large uses 16px. This keeps the body text subordinate to the heading while maintaining readable mobile text.

Setting	Behavior
Content layout: Above comparison	Default. Keeps the introduction above the comparison.
Content layout: Beside comparison	Available for Carousel and Stacked. Uses two columns on desktop and stacks on smaller screens.
Button label	Optional action text, such as “View product”. Leave blank to omit the button.
Button link	Appears when a button label is entered. Both label and link are required for the button to render.

Grid and Editorial retain the introduction above the comparisons. Switching to either layout ignores a previously saved Beside comparison selection. Clearing all introduction text and the button removes the content panel and lets the comparisons use the section width.

Editorial comparisons form a centered group with a larger lead image. Extra desktop width stays at the outside edges, preserving the gap between comparisons.

Wide images retain their 16:9 ratio in Carousel and Stacked layouts and are capped at 480px tall (approximately 853px wide). The comparisons stay centered with space at the sides on wider screens, keeping captions and navigation close to the image.

Carousel navigation uses an unboxed row of small arrows and pagination marks beneath the image. The active comparison has a short line indicator. Arrow buttons retain 44px tap targets, and keyboard focus remains visible.

Reveal on scroll makes one sweep using the global interface animation speed and easing. No motion and reduced-motion preferences disable the sweep and smooth carousel scrolling. Dragging and keyboard input interrupt the sweep immediately. Comparison sliders have unique labels that identify their Before and After pairings.

Captions wrap long unbroken text and use 15px text, including on mobile. Images use width hints capped to the comparison frame; first-section comparison images load eagerly with high fetch priority, while later sections load lazily.

When Show labels is enabled, cards up to 360px wide place Before and After labels in separate columns below the image. Longer labels wrap without overlapping or covering the divider. Wider cards retain image overlays, with each label limited to half the image width.

Section settings own the introduction, layout, and button. Comparison blocks own manually selected images, labels, captions, links, and ordering. They can be duplicated or reordered; the first comparison remains the lead in Editorial. Product comparisons can instead use the optional custom.before_images, custom.after_images, and custom.comparison_captions product metafields. Manual comparisons require no metafields.