Image comparison slide

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.

Section settings

General settings

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 options

Setting	Description
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

Section padding

• Top padding: Customize the top margin of the section

• Bottom padding: Customize the bottom margin of the section