Image comparison slide
Last updated
Last updated
The Image comparison slide section allows users to display two images side by side for a visual comparison. Users can slide between the images to see differences or changes, making it ideal for before-and-after scenarios or showcasing variations. This interactive feature enhances engagement by providing a clear and dynamic way to present changes or options, and it can be customized to fit the specific design and layout of your Shopify store.
Top padding: Customize the top margin of the section
Bottom padding: Customize the bottom margin of the section
| Setting | Description |
|---|---|
| Setting | Description |
|---|---|
Section width
3 options for container
Stretch width: span the section width regardless of screen size.
Fix width: depends on your page content width in Theme settings -> Layout.
Expand full width: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.
Color scheme
Select colors from Theme settings -> Colors
Heading
The title of the section
Description
The description of the section
Content alignment
The position of the heading and description.
Left
Center
Right
Image before
Displays the initial state for comparison
Image after
Shows the state after changes are applied
Text left
Provides context or details on the left side
Text right
Offers additional information on the right side
Image ratio
"Image ratio" refers to the proportional relationship between the width and height of the image.
5 options for image ratio
Adapt to first image
Square (1:1)
Portrait (3:4)
Landscape (4:3)
Custom
Custom ratio
Where you can add your own image ratio
