Before and after
Add the current section to demonstrate the seamless product transformations within an interactive slider.
Before/after image
This section allows you to place two images side by side, enabling customers to compare the results instantly.
Content
Type Use the picker to specify the position of images:
"Horizontal". Set the horizontal dividing line that sets images side by side.
"Vertical". Display a vertical dividing line that separates images and positions them at the top and bottom.
Default state percent Change the default position of the divider line using a percentage scale. This setting helps you control the visibility of each image in the section.
Image ratio Use the options to adapt media to the desired size. Several available options can be selected from the drop-down. If an option includes additional settings, they appear underneath the drop-down after selecting an option:
"Adapt to media". Displays an image in its original aspect ratio.
"Fixed height". This option helps to change an image size in pixels by specifying the parameters on the "Fixed height" scale. The height can be adjusted between 100 and 1000 pixels.
"Aaspect ratio". Select the option to adjust a media height as a percentage using the "Aspect ratio" scale. The parameters can be changed from 10% to 210%*.
*The "Aspect ratio" option is applied to mobile by default. To modify the height specifically for mobile, use the options in the "Mobile settings" subsection.
"Aspect ratio" indicators: * 100% = Square image * Less than 100% = Landscape * More than 100% = Portrait * 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
"Fullscreen". Set this option to show media in the full width of a page. The image width will match the page width set in global settings if the "Use page width limit" option is ticked under Theme settings -> Page layout.
"Fullscreen without header". Using this option, the media is cropped at the top and bottom. The top spacing will be subtracted from the total height. Review your storefront to ensure the settings meet your expectations.
Width Select one of the options in the drop-down: "Standard" (boxed), "Wide" (full width of a screen), or "Fixed".
Fixed width Works with the "Fixed" option. Once the option is selected, the width can be changed manually on the scale from 450 to 2000 pixels. The margins will be set to the left and right when the "Fixed" option is used. Note! The width of the media in the section cannot exceed the page width set in the global settings. Check the parameters in Theme settings -> Page layout.
For more information about the described options, please refer to the following help page.
Layout options
Check the layout option examples here.
Layout Change the "Header" content group position using the picker:
"Stacked". Displays title elements above the media content and aligns them to the left.
"Centered". Shows the centered title elements above the media content.
Mobile alignment Align the elements from the "Header" content group using one of the options:
"Auto". Uses the setting applied in the "Layout".
"Left". Displays content on the left. Note! The call-to-action button displays in full width on mobile by default.
"Center". Centers content. Note! The call-to-action button displays in full width on mobile by default.
Dividing line Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.
Top spacing / Bottom spacing Decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.
Animations
Image behavior Add dynamic motion to a static image by selecting one of the options:
"None". Disables smooth image motion.
"Ambient movement". The option adds a slight circular movement to an image.
"Zoom in out". Creates a smooth zoom-in and then zoom-out effect on the image.
"Zoom out in". Applies a zoom-out effect followed by image enlargement.
Mobile settings
Enable Activates mobile settings. The options below take precedence on mobile devices.
Image ratio Change the image size using one of the options in the drop-down. The corresponding settings are shown after selecting the relevant option:
"Adapt to image". Displays the image in its original aspect ratio.
"Fixed height". This option sets the image size in pixels by establishing the parameters on the "Fixed height" scale. The height can be adjusted between 100 and 700 pixels.
"Aspect ratio". Select the option to adjust the image height as a percentage using the corresponding scale. The parameters can be changed from 10% to 210%.
"Aspect ratio" indicators: * 100% = Square image * Less than 100% = Landscape * More than 100% = Portrait * 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
Transparent header
Allows the header to overlay the section when a transparent header is used.
Use inverted header colors Enable the option to link the color of the Header elements, such as navigation menus, Search, Compare, Account, and Cart icons, with the "Background" item under Theme settings -> Colors -> Primary colors. If the option is disabled, the color of the Header elements is related to the "Base" item.
Last updated