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.
  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 photos.

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 are displayed on desktop:
areThe images is displayed on mobile: