Using the hero (optional slideshow) section

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.

1. Log in to your Theme editor and navigate to the page you would like to display this section.
2. You'll see a list of available sections on the left-hand side. Locate the Add section button and click on it.
3. From the list of available sections, find and select Hero (optional slides).

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.

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.