Hero banner

This is the main hero banner for your store. The hero banner module allows you to display big bold introduction images, carousel or even video to welcome your customers.

There are 2 types of layout for the hero banner: Boxed and full width. Both options allow you to use simple images, video or carousel.

Boxed

Full width

Please note that if you want to use the Full Width feature, you must upload a white logo as described in the Logo section. Uploading the white version of your logo will ensure you have enough contrast between dark background images behind the logo and the logo itself. The white logo will only be displayed when you set the slide text color to white. If you have more than one slide, the menu color and logo will change according to the option you selected for each slide.

You can also pick if you want to display a carousel pagination (if you have more than 1 slide), and set the autoplay feature as well as its speed.

Hero banner slides

You can add up to 3 carousel slides and each slide has its own set of options you can customize. If you only want to display a single image or a video, only fill out and activate the first slide.

You can only have one video video background in the carousel for performance and usability reasons. This is why only the first slide has the option to add one. It is recommended you only use a single slide when using a video background.

To include a video background, go to backoffice > tools > files and upload the .MP4 video you wish to use. The sound will be automatically turned off and the video will automatically loop for a better user experience. It is recommended you upload a short and small video with a resolution of 720p or 1080p. The smaller file size the better.

There are 3 text place options:

Left

Center

Right

Pick the one that fits your image the best. You can also add a title, subtitle, button and a URL to link this page to.

The text color option is important here. Pick the one that has the most contrast with the background image. We want to make sure the text is readable at all times.