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.
Steps
- 1.In the theme editor (Customize), click Add section.
- 2.Locate Before/after image slider section
- 3.Make necessary changes.
- 4.Save
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.
- 1.Section header
- 1.Heading: Content of heading
- 2.Heading size: Size of section heading - Small/Medium/Large
- 3.Description: Small description below the heading
- 2.Settings
- 1.Layout: Compare photos vertically or horizontally
- 2.Image height: The height of the images - Small/Medium/Large
Select images to display on desktop and mobile
The images is display on desktop:
The images is display on mobile:
Last modified 1mo ago