Hero
Last updated
Last updated
This is the main slideshow section where you can add images, videos, promo content, etc.
The main settings in the section are the ones listed here and additional settings for:
height -- 3 predefined options for: large, medium and viewport height. These are applicable for desktop only. Viewport height means that the hero section will be as tall as the device screen.
enable carousel autoplay
autoplay interval (in case the autoplay is turned on)
The hero slider supports 3 different block types:
Hero block Fullwidth
Hero block 50-50
Hero block 60-40
These blocks/slides can be added through here:
Here are some more details for each hero block type.
This is a full width hero slide. Example:
This is a 2 column slide where you can showcase different content in both columns.
This block supports 2 columns where the first one takes around 60% of the width, and the second one takes the other part. The aside section holds 2 elements inside.
This is only supported in the Fullwidth block type. There are options to choose the video from an external resource like YouTube or Vimeo, and an option to use a Shopify hosted video. More information about the video files in Shopify can be found here: https://help.shopify.com/en/manual/products/product-media/product-media-types#videos.
The video will be autoplaying muted by default. There is a setting to turn the autoplay off on mobile in order to lower the mobile data usage.
Note: please be aware that adding one or more autoplaying videos might impact your page speed results.
For each of the elements there are separate options for picking a desktop and mobile image. If only desktop image is picked - this image will be also shown on mobile.
For mobile we suggest using more portrait oriented images.
In case you have white text over white background and the content is not very readable - you can easily add an overlay by adjusting its opacity and picking the overlay color.
Along with the fields for Heading, Subheading and Paragraph, there are also settings for: content alignment and additional background.
The subheading, heading and paragraph items are marked in the screenshot below:
With the alignment settings you can move the content wherever you want like: top left, top right, bottom right, center, etc.
Here is an example with horizontally and vertically centered content:
The BOLD property will make the text to be shown in a different color which you can set through: Theme settings > The color style you used for the section > Typography > Headings accent color.
Here is an example result:
More details about the buttons here.
In case you want to use highlight a text element in the headings you can use the Bold and Italic properties: . You can mark a word or a phrase and click one of these.
