Hero slider

The main settings in the section are the ones listed here. The additional settings are listed below.

• Aspect ratio for desktop -- The setting determines the height of the section. If set to Viewport it will take the screen size, excluding the height of the header

• Enable arrows -- If there are more than one block added, the section will turn into a slider. If this setting is enabled, this will show the slider arrows for previous and next slide

• Effect fade -- Makes the slider to fade between the slides instead of sliding

• Enable loop mode -- If you reach the end of the slides, they will start from the begging. If this is unchecked, the slider will stop on the last slide.

• Enable pagination -- This setting enables the dots at the bottom of the slider

• Pagination position -- You can change the position of the dots

• Autoplay -- Enable or disable the autoplay of the slider

• Slideshow Interval -- You will first need to enable the autoplay option. This setting determines the time between changing the slides

• Aspect ratio for mobile -- Set a specific aspect ratio of the height of the slider for mobile

Slides

Every slide is set up as a new block in the Hero slider section.

The slides have the following settings:

Colors

• Text -- You can set up the color of the text

• Overlay color -- With this setting, you have several options: * Set a solid color for the slide * Set an overlay color (by decreasing its opacity) * Set an overlay gradient and specify its position, opacity and so on.

Media

You can specify separate images for desktop and mobile. If the mobile image is missing, then the one from desktop will be shown on mobile devices.

Another option you have here is to upload a video file. You can either upload it in Shopify using the native video uploader, or paste an external link in the External video field.

Text content

This section is responsible for the content of the slide and its position.

• Vertical content alignment -- You can choose between Top, Center or Bottom vertical position

• Horizontal content alignment -- You can choose between Left, Center or Right vertical position

• Heading and Subheading -- Specify the text showing on top of the image:

  

Buttons

You can add up to two buttons, one after the other. For every button you can specify its label, link and button style.

You can also overwrite the default hover style by selecting the Button hover style outline checkbox.