Motion includes a Fading image hero section that creates a slideshow with fade transitions between images. It’s an effective way to make a visual statement or highlight a featured product or collection.
Adding the fading image hero section
- Log in to your Theme editor and navigate to the page you would like to display this section.
- You'll see a list of available sections on the left-hand side. Locate the Add section button and click on it.
- From the list of available sections, find and select Fading image hero.
Section details
The Fading image hero section has the following settings:
- Title style: Controls whether the title appears on a single line or is split into two lines.
- Title font: Choose whether the title uses the body font or the heading font selected in Theme settings > Typography.
- Title size: Adjusts the font size of the title text.
- Text color: Select the color for the title text.
- Text background color: Applies a background color behind the text when a color is chosen.
- Text alignment: Adjusts the position of the text within the slide.
- Section link: When a link is added, the whole section becomes clickable and routes customers to the selected page.
- Change images every: This horizontal slider determines how frequently the slides transition. You can set the timing anywhere between 5 and 10 seconds.
- Overlay color: Sets the color of the overlay applied to the section.
- Opacity: Controls the darkness of the overlay applied to the section.
- Desktop height: Controls the section’s height when viewed on desktop devices.
- Mobile height: Adjusts the height of the section on mobile screens. This setting is not used if the desktop height is set to natural.
- Lazy load images: Enable this when the section appears below the fold to help reduce unnecessary image loading and improve performance.
Image block settings
The Fading image hero section supports adding 1–6 image blocks.
Each block allows you to assign an image and customize the title text displayed on the first and second lines.