Before/after image slider

A guide to set up a Before/after image slider
Before/after image slider is best used to compare a product or result of a "before" and "after". You can also use this element to display the outcome with and without certain changes or tools.
  1. 1.
    In the theme editor (Customize), click Add section.
  2. 2.
    Locate Before/after image slider section
  3. 3.
    Make necessary changes.
  4. 4.
To achieve the effect, it is recommended to use images of the same size and position, and there are apparent differences between the before and after photo.

Section settings

General settings

  1. 1.
    Section header
    1. 1.
      Heading: Content of heading
    2. 2.
      Heading size: Size of section heading - Small/Medium/Large
    3. 3.
      Description: Small description below the heading
  2. 2.
    1. 1.
      Layout: Compare photos vertically or horizontally
    2. 2.
      Image height: The height of the images - Small/Medium/Large

Block settings

Image block

Select images to display on desktop and mobile
The images is display on desktop:
The images is display on mobile: