Hero banner

Hero banner section shows general information about the selected collection and features an image in the background.

GENERAL

Color scheme

Choose a separate color scheme for the section.

Color background

Select to apply the color scheme of the section to its background. Note that the section background does not show with screen width and zero paddings.

Width

Choose the width of the section on the page.

Desktop ratio

Adjust the proportion between the width and height of the background image and make its orientation square, horizontal, or vertical. Note that the ratio adapts to the section content: as the content volume increases, the section height increases as well.

Mobile ratio

Adjust the proportion between the width and height of the background image and make its orientation square, horizontal, or vertical. Note that the ratio adapts to the section content: as the content volume increases, the section height increases as well.

DETAILS

Choose what information about the collection to show on the banner.

Show collection image

Select to show the collection cover image on the banner.

Show breadcrumbs

Select to show the breadcrumbs that serve as a navigation aid to help customers understand their location within your store.

Show collection title

Select to show the title of the featured collection on the banner.

Show collection description

Select to show the description of the featured collection, if any. You can add descriptions to collections in your admin.

IMAGE

Image

If you want the banner to feature an image other than the collection cover image, select it from your library or the free images collection. Note that the free images you use are also saved to your library. You can further edit the uploaded image: add a focal point and fill in an alt text.

Video

You can add a video instead of an image. In this case, the video has a priority. You can either choose a video from your files or upload a new video from your device. Note that the newly added videos are also saved to your files. You can further edit the uploaded video: add a cover image and fill in an alt text.

Desktop overlay opacity

Dim the image to increase legibility of the content in the foreground.

Mobile overlay opacity

Dim the image to increase legibility of the content in the foreground.

CONTENT

Collection title size

Choose the font size for the title of the featured collection.

Description size

Choose the font size for the description of the featured collection.

Desktop position

Choose the content position on the banner.

Desktop alignment

Choose the text alignment on the banner.

Desktop width

Adjust the maximal content width. Note that as the content volume decreases, the width decreases as well.

Desktop spacing

Adjust the spacing between the borders of the banner and the content within it.

Mobile position

Choose the content position on the banner.

Mobile alignment

Choose the text alignment on the banner.

PADDINGS

Add side paddings

Select to add extra space on the sides between the section and the screen.

Top padding

Adjust the space between the section and the previous element on the page.

Bottom padding

Adjust the space between the section and the following element on the page.