Before/ After image slider
A guide to set up a Before/ After image slider

With Zest's Before/ After image slider section, you can create horizontal or vertical sliders for your Shopify store, unleashing the creative potential of your site.
Using a Before/ After image slider can bring you several benefits such as:
- boosting engagement on your Shopify store through interaction;
- creating compelling visual stories;
- showcasing impressive or persuasive presentations.
In this article, we will show you how to add and customize a Before/ After image slider section.
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 photos.
- 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 are displayed on desktop:

areThe images is displayed on mobile:

Last modified 7d ago