Hero Image With Text
The Hero Image With Text section comes with 4 elements: Heading and Body Text, Button, Prominent Badge and Highlighted Collections. You can click on the element to customize each element individually.
To change the position of the content in the section, go to Layout. There are 2 types of layout for you to choose:
- Left
- Center
By default, the content will be placed on the left of the image.
To change the text of the section, click on the section then head to the Settings toolbar on the left hand and insert the content for your hero banner in these placeholders here. You can change the Heading, Sub-heading and Description.
To change the background image, hit the Select Image button in Image. The recommended size for the image is 1600x800px.
The Hero image with text section supports 2 buttons: Primary and Secondary button. The color of the button will follow global settings in Theme Settings > Color. If you want to remove 1 button on the banner, delete the label text.
Go to the Prominent Badge to set the color scheme, position, shape and text for the badge. The color scheme has 2 types: Main accent and Extra accent. By default, the color scheme will be applied to the Main accent. The position of the Badge can be on the left or on the right of the content in the section. There are 3 badge shapes that you can select for your section: Star, Diamond and Asterisk. Click on the Text placeholder to change the content of the badge.
The Hero Image with Text section supports showing the Highlighted Collections. You can select to enable the Highlighted Collections or not by checking this box here. By default, the Highlighted Collections will be turned on.
Go to Heading and insert the title for the Highlighted Collections.
In Selected Collections, you can select collections you want to show here. The maximum number of collections that can be shown on one slide on a large screen is 6 and on mobile is 2.
To show View all sections button, check the box in Show button to view all collections. Along with that, you can change the content for this button in the Button text placeholder below.
Show navigation on mobile checkbox allows you to show or hide navigation of the carousel collection on mobile devices.