Appearance

Before and After Slider ​

Purpose

Create compelling transformation showcases with interactive before/after sliders paired with supporting content. Perfect for demonstrating product results, transformations, or comparisons with detailed explanations.

Adding the Section ​

  1. Go to Online Store > Themes > Customize
  2. Click Add section
  3. Select Before and After Slider
  4. Configure before/after block and content blocks

Content Settings ​

Header Content ​

  • Heading - Main section title
  • Subheading - Supporting description with rich text formatting
  • Text Alignment - Left, center, or right alignment for desktop
  • Mobile Alignment - Separate alignment control for mobile devices
  • Heading Size - Size options from small to extra large

Layout Configuration ​

Column Layout ​

  • Column Widths - Control proportions when both blocks are present:
    • 1/2 - Equal width columns (default)
    • 1/3 - Before/after takes 1/3, content takes 2/3
    • 2/3 - Before/after takes 2/3, content takes 1/3

Block Arrangement ​

  • Blocks Gap - Space between blocks:
    • None - No gap
    • XS to 2XL - Increasing gap sizes (default: Large)
  • Vertical Alignment - How blocks align when side by side:
    • Top - Align to top edges
    • Center - Center alignment (default)
    • Bottom - Align to bottom edges
  • Reverse Layout - Swap block order on desktop
  • Match Block Height - Synchronize heights between blocks

Block Types ​

Before/After Block ​

  • Interactive slider with draggable divider
  • Image comparison functionality
  • Touch and mouse support
  • Responsive behavior across devices

Content Block ​

Supports various content types:

  • Heading blocks with size controls
  • Text blocks with rich formatting
  • Circle progress blocks for statistics or metrics
  • Button blocks for call-to-actions
  • Custom content elements

Appearance Settings ​

Visual Controls ​

  • Color Scheme - Choose your theme's color scheme
  • Page Width - Section width (narrow, regular, full)

Image Guidelines ​

  • Consistent subjects - Use the same subject/angle for before and after images
  • High quality - Upload crisp, well-lit images that clearly show differences
  • Similar composition - Maintain identical framing and positioning
  • Appropriate resolution - Use images at least 800px wide for sharp display

Content Strategy ​

  • Compelling narratives - Use content blocks to tell the transformation story
  • Supporting data - Include statistics or progress indicators to reinforce results
  • Clear benefits - Explain what changed and why it matters
  • Call-to-action - Guide users toward next steps or product purchase

Layout Decisions ​

  • Column proportions - Choose widths that balance visual impact with content needs
  • Content placement - Use reverse layout to create visual variety
  • Vertical alignment - Center alignment works best for most content combinations
  • Height matching - Enable for cohesive appearance, disable if content is minimal

Performance Tips ​

  • Image optimization - Compress images before uploading
  • Content balance - Don't overwhelm with too much supporting content
  • Mobile testing - Verify slider functionality on touch devices
  • Loading states - Ensure graceful fallbacks for slow connections

Design Tips ​

Visual Hierarchy ​

  • Slider prominence - Let the before/after comparison be the focal point
  • Supporting content - Use content blocks to provide context, not compete
  • Consistent styling - Maintain visual harmony between blocks
  • White space - Use appropriate gaps for clean, professional appearance

Interactive Elements ​

  • Clear affordances - Users should understand the slider is interactive
  • Smooth operation - Ensure slider moves smoothly across devices
  • Touch targets - Make slider handle large enough for mobile interaction
  • Progress indication - Use circle progress blocks to show measurable results

Content Organization ​

  • Logical flow - Arrange content to support the before/after narrative
  • Scannable format - Use headings and bullet points for easy reading
  • Visual breaks - Separate different types of information clearly
  • Action-oriented - End with clear next steps for users

Common Use Cases ​

  1. Product Results - Skincare improvements, cleaning effectiveness, repair results
  2. Fitness Transformations - Weight loss, muscle gain, health improvements
  3. Home Renovation - Room makeovers, landscaping, organization projects
  4. Beauty Services - Hair transformations, makeup applications, treatments
  5. Process Comparisons - Old vs. new methods, technology improvements

Technical Features ​

Interactive Functionality ​

  • Drag slider - Smooth dragging with mouse or touch
  • Responsive design - Adapts to all screen sizes
  • Accessibility - Keyboard navigation support
  • Performance optimized - Lightweight implementation

Layout Flexibility ​

  • Dynamic sizing - Columns adjust based on content and settings
  • Content blocks - Modular system supports various content types
  • Height matching - Optional synchronized heights between blocks
  • Mobile adaptation - Stacks appropriately on smaller screens

Integration Features ​

  • Theme consistency - Inherits colors and typography from theme
  • Animation support - Smooth reveals and interactions
  • SEO friendly - Proper markup for search engine indexing
  • Analytics ready - Track interactions and engagement