The Hero (optional slideshow) section consists of multiple images, texts and buttons used to showcase important content, such as featured collections, promotions or announcements.
Each slide can display a different aspect of your website and can encourage visitors to interact with your store.
Adding the hero (optional slideshow) 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 Hero (optional slides).
Section details
The main slideshow section has the following settings:
- Full page width: By default, this section spans the full width of the page. Expanse, Fetch and Gem include an option to turn this off.
- Desktop height adjustment or Desktop height: Adjusts the height of the section in larger screens.
- Mobile height adjustment or Mobile height: Adjusts the height of the section in mobile screens.
- Slide navigation style: Sets the style used for the navigation arrows. This is only displayed if there are two or more slides.
- Auto-change slides: With this checkbox enabled, the slides will rotate automatically. If it is not checked, the user can go to the next slide by using the navigation arrows. There is a horizontal slider you can use to indicate how frequent the slides should change (5-10 seconds).
- Lazy load images: Enable this when the section appears below the fold to help reduce unnecessary image loading and improve performance. This setting is available in Impulse, Motion and Streamline.
- Enable parallax: Enabling this setting applies a parallax scrolling effect to the section. To achieve this effect, the image is shown with a zoomed-in appearance so it can cover the necessary background area as the page moves. This setting is available in Impulse and Motion.
Slide block settings
The slideshow section can have 1-5 slides. Each slide block has the following customization options to add texts, images and call-to-action buttons.
- Heading: The largest text in the slide.
- Heading text size: Adjusts the font size of the heading text.
- Subheading or Text: Use this field to display supporting text or a brief description beneath the heading.
- Slide link: Adding a link here will route the customer to a particular page when the slide or button is clicked.
- Slide link text: Text used for the slide button. If this is blank, no button is displayed and the slide itself is clickable.
- Text alignment: Adjusts the position of the text within the slide.
- Image: Choose an image to display as the background for the slide.
- Mobile image: Select an image to use as the background of the slide on mobile. For best results, use a square image.
- Text protection: Some themes have this setting to darken the image and make the text readable.
- Parallax direction: Sets the direction of the parallax effect for each slide. This setting is only available in themes that support Parallax.