Appearance

Before and After Marquee ​

Purpose

Showcase transformational results through side-by-side before and after images in a continuously scrolling marquee. Perfect for beauty products, fitness results, home improvements, or any transformation-based marketing.

Adding the Section ​

  1. Go to Online Store > Themes > Customize
  2. Click Add section
  3. Select Before and After Marquee
  4. Add before/after blocks with image pairs

Visual Effect ​

Unique Split Display ​

  • Innovative design - Left half shows "before" images, right half reveals "after" images
  • Seamless transition - Creates compelling visual comparison across the split
  • Continuous motion - Both layers scroll in sync for cohesive effect
  • Interactive clipping - CSS clip-path creates precise half-screen division

Marquee Settings ​

Scroll Behavior ​

  • Enable Marquee - Turn continuous scrolling on/off
  • Scroll Direction - Left or right movement
  • Scroll Speed - Movement speed (10-100, default: 50)
  • Enable Drag - Allow touch/mouse dragging to control scroll
  • Pause on Hover - Stop scrolling when hovering over section

Layout Options ​

  • Gap Between Items - Space between each image pair (0-100px, default: 40px)
  • Page Width - Section width (narrow, regular, full)

Before/After Blocks ​

Each block contains:

  • Before Image - Upload the initial state image
  • After Image - Upload the transformed state image
  • Automatic pairing - Images display as synchronized comparison
  • Responsive sizing - Images automatically optimize for different screen sizes

Appearance Settings ​

Visual Controls ​

  • Color Scheme - Choose your theme's color scheme
  • Square aspect ratio - All images display in consistent square format
  • Rounded corners - Images have rounded edges for modern appearance