Using the Parallax hero section
The Parallax hero section displays a banner with layered images that move slightly as customers scroll, drawing attention to featured content or promotions.
Adding the section
Open the Theme editor and navigate to the page where you want to add this section.
In the left sidebar, click Add section.
Choose Parallax hero from the list of available sections.
Section details
After adding the Parallax hero section, use the available settings to customize its appearance and align it with your store’s style.
Content position - Controls the overall placement of images and texts within the banner.
Heading size - Adjusts the font size of the heading text.
Heading - The main title that appears in the section. Its color is defined by the selected color scheme.
Subheading - The text displayed below the heading, providing additional context or description. Its color also follows the chosen color scheme.
Link - Adds a link to the button.
Button text - Sets the text shown on the button. The button color is controlled by the selected color scheme.
Color scheme - Applies a color scheme from Theme settings > Colors.
Background image - Sets the image used for the banner background. If none is selected, the section uses the background color from the chosen color scheme.
Opacity - Adjusts the transparency of the background image.
Blur - Adds or reduces blur on the background image.
Image block settings
The Parallax hero section supports 1 to 6 image blocks. Each block includes the following settings:
Image – Selects the image used for the block.
Image size – Adjusts how large the image appears in the banner.
Horizontal position on desktop – Controls the left-to-right placement of the image on desktop.
Vertical position on desktop – Adjusts the up-and-down placement of the image on desktop.
Horizontal position on mobile – Controls the left-to-right placement of the image on mobile devices.
Vertical position on mobile – Adjusts the up-and-down placement of the image on mobile devices.
Opacity – Changes the transparency level of the image block.
Blur – Adds or reduces the blur effect applied to the image block.