Before/ After image slider
In this article, we will show you how to add and customize a Before/ After image slider section.
Last updated
In this article, we will show you how to add and customize a Before/ After image slider section.
Last updated
With the Before/ After image slider section in Sleek, 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.
Steps
In the theme editor (Customize), click Add section.
Locate Before/after image slider section
Make necessary changes.
Save.
To achieve the best result, it is recommended to use images of the same size and position, and there are visually distinguished differences between the before and after photos.
Adjust the Container (Fixed width/Small) for this section.
Select your preferred Layout for the section:
Add the content you want in the Heading to attract customers' attention
Leave it blank if you do not want to display it
You can also change the Heading size to:
Heading xs
Heading sm
Heading md
Heading lg
Heading xl
Heading 2xl
Display md
Display lg
Display xl
How to apply Highlight text to the section heading and block headings?
Use the provided text fields to add a suitable Subheading and Description.
Leave them blank if you do not want to display them
The call-to-action button will get the link from the provided Button link field.
Give the button a label, and a specific Button style:
Primary button
Secondary button
Underline button
The settings let you decide which Direction to slide (Vertical/ Horizontal).
Set the section's image height as Adapt to image/ Small/ Medium/ High.
Change the Image heading style to Badges or Plain text.
You can also add Product to this section, so customers can easily navigate to the target product.
There are 2 blocks of images in a Before/ After image slider.
You need to fill in both blocks to make the slider work.
You can select images to display on desktop and mobile (Image and Mobile image).
Add an Image heading to your Before/ After image block and change the Color scheme if needed.
