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.

• Login 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)".

The main slideshow section has the following settings:

Full page width - normally, this section is in full-width but some themes like Expanse have the option to disable it with this checkbox.

Desktop height adjustment or Desktop height - adjust the height of the section in larger screens.

Mobile height adjustment or Mobile height - adjust the height of the section in mobile screens.

Slide navigation style - 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 - should only be enabled if the section is below the fold (need to scroll down first to see the section).

Enable parallax - Some themes, like Impulse, can show a parallax scrolling effect in this section. When this setting is enabled, it is expected for the image to be zoomed. This is required to fill the background that allows the parallax effect to work when users are scrolling on the page.

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 - adjust the font size of the heading text.

Subheading or Text - can be used to display additional text or description.

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 - change the position of the texts.

Image - used as the background image of the slide.

Mobile image - image used in mobile view.

Text protection - some themes have this setting to darken the image and make the text readable.

Parallax direction - direction of the parallax effect in each slide. Only applicable to themes with the Parallax setting.