Add theĀ Before/after image for an interactive slider showcasing transformations or product comparisons by using two images side-by-side.Ā
š§° How to install the section in your theme
- OpenĀ Theme Updater & BackupsĀ in yourĀ AppsĀ admin
- Open Theme sections
- Click Install below the section. You can also click Preview to see the section in a demo storefront
Ā
- On the right side of the page, use the Choose theme dropdown to select the theme you want to enhance with the new section
- Click Install
Add the section to a template
Click Customize to open the theme editor for the selected theme.
Open the template (e.g. home page, default product) and click (+) Add section in the sidebar.
Customize section settings
Click on theĀ Before/after imageĀ to open the general settings of the section. Clicking theĀ ImageĀ blocks allows you to upload the two images which will be featured in the section.Ā
Slider directionĀ lets you choose between Horizontal or Vertical.Ā
Use the Image aspect ratio to choose the desired space the image will occupy. There are six options:
- Adapt to first image
- Portrait (2:3)
- Square (1:1)
- Landscape (3:2)
- Wide (16:9)
- Ultra wide (12:9)Ā
Desktop image widthĀ can either beĀ Half, Two thirds,Ā orĀ Full width.Ā
Desktop image placement determines the order of the image and the content block. You can choose between Image first orĀ Image second.Ā
Slider controlsĀ
You are able to adjust the settings of the slider by modifying theĀ Slider position, theĀ Slider color, andĀ Slider control color.Ā
Content
Section heading can be used to add text above the section. The size of which can be controlled with Heading sizeĀ andĀ Mobile heading size.
You can also add an additional detail by using theĀ TextĀ field. Similarly, additional settings are available for this:Ā Text size, Mobile text size,Ā andĀ Desktop content alignment.
Button
Add a clickable button after the content by filling out the available fields.Ā
Mobile layout
Mobile image aspect ratioĀ also has several options for displaying the image:Ā
- Adapt to first image
- Portrait (2:3)
- Square (1:1)
- Landscape (3:2)
- Wide (16:9)
- Ultra wide (12:9)Ā
For mobile devices, placeĀ the Image first (on top) or Image second (below the content) with the Mobile image placementĀ setting.
Select Left, Center, or Right to arrange the Mobile content alignment.Ā
Adjust spacing
Use the Top padding and Bottom padding sliders to increase or decrease the padding of the section.
Use the Top margin and Bottom margin sliders to increase or decrease the margins of the section.
Customize content blocks
Clicking theĀ ImageĀ blocks will open additional settings:
Upload anĀ ImageĀ and use theĀ Mobile imageĀ section if you would like to display a separate image in mobile view.Ā
Badge
This feature is important for displaying comparison labels.Ā
In the block, you can choose toĀ Show badge, replace theĀ Text,Ā Background color, Text color,Ā and Badge position.Ā
For example, this setup uses the words "Before treatment" and "After treatment" as the badges, making the comparison clearer:Ā
Changelog
January 27, 2025
- Before/after image added to Theme Sections.Ā