Skip to Content
DocumentationSectionsBefore/After Showcase

Before/After Showcase

Show an interactive comparison between two images. Use it for styling changes, material comparisons, product transformations, or editorial before/after storytelling.

Shopify theme editor showing the Fit Check Before/After showcase section with a selected Before/after slider block.
Before/After showcase sections contain one or more Before/after slider blocks with draggable image comparison controls.

Configure the Section

  1. In the theme editor, click Add section.
  2. Select Before/After showcase.
  3. Add a Before/after slider block.
  4. Choose the before and after images, then tune the slider position and labels.

Section Settings

SettingDescription
WidthChoose Page, Full screen, or Custom width. Custom width ranges from 60-100%.
HeightChoose Auto, Full screen, or Custom. Custom height uses Small, Medium, Large, or a custom percentage.
DirectionStack blocks vertically or arrange them horizontally. Default: Vertical.
Vertical on mobileStack horizontal layouts on mobile.
AlignmentControl horizontal alignment for the active direction.
PositionControl vertical placement for the active direction.
GapSpace between comparison blocks. Range: 0-100px. Default: 12px.
Background colorOptional section background color. Leave Default to use the theme surface.
PaddingUse one all-sides value or separate Top, Bottom, Left, and Right values. Default: 32px unified; 0px left/right in split mode.

Before/After Slider Block

The Before/after slider block owns the images, drag handle, labels, and comparison orientation.

SettingDescription
Before image / After imageUpload the two images used in the comparison.
Image aspect ratioChoose Auto, Portrait, Square, or Landscape.
Initial slider positionStarting split position from 0-100%. Default: 50%.
OrientationDrag horizontally or vertically. Default: Horizontal.
Background color / Text color / Border colorBase colors for the block and labels.
Divider width / Divider colorControl the comparison divider line.
Handle size / Handle colorControl the draggable handle.
Border radiusRound the image viewport.
Show labelsShow or hide before/after labels.
Label positionPlace labels outside or inside the image, including custom inside positions.
Before label / After labelCustomize the comparison labels.
StyleControl label typography, including custom font, size, and weight.

Enable gallery mode to display multiple before/after comparisons in a grid or carousel.

SettingDescription
Enable galleryToggle gallery display. Default: Off.
LayoutChoose Grid or Carousel. Default: Grid.
ColumnsDesktop columns in gallery mode. Range: 1-6. Default: 4.
Columns on mobileMobile columns in gallery mode. Range: 1-3. Default: 1.
Max itemsMaximum comparisons to display. Range: 1-24. Default: 16.

When gallery mode is set to carousel, these settings control the navigation arrows.

SettingDescription
IconChoose Chevrons, Custom, or None. Default: Chevrons.
Custom iconUpload a custom arrow icon when Icon is Custom.
Icon sizeArrow icon size. Range: 12-48px. Default: 20px.
Icon backgroundChoose None or Circle. Default: None.
Icon colorArrow icon color.
Icon background colorArrow background color when a background shape is enabled.
ShowcaseCountdown