Image banner section

The Divine theme includes 2 Image Banner sections added to the homepage by default. You can also see this section added to the Collection page. Still, you can add the section to other store pages according to your requirements. You can hide the section using a visibility badge as well. Let's learn more about the section.

NOTE: On the screenshot above, you can see a slideshow. To make it look like our demo (overlapping the image banner), please enable the option Overlap section above in the Slideshow settings.

Image banner general settings

To edit them, go to the Online store - Homepage- Image banner. Or Collection page - Image banner.

Here, it is possible to:

• Select the first image for the banner. Note, if you've already added the image when creating every Collection page, this image has a priority.
• Select the second image.
• Choose the Parallax effect speed.
• Stack images on mobile.
• Enable image preloading.
• Choose the image position between the Top, Center, and Bottom.
• Choose the text box position between the Left, Top, Center, Bottom, and Right. 
• Choose the color scheme. Possible values are Accent 1, Accent 2, Background 1, Background 2, and Inverse.
• Choose the banner height. Possible values are Adapt to the image, Small, Medium, and Large.
• Choose the visibility of the section. For instance, if you select the Mobile value, this image banner will be shown only on mobile devices. 

Our theme allows for adding 2 Image banner sections separately for mobile and desktop users. You can show various collection images for different audiences.

• Make the section full-width.
• Show underlayer.

Highlight product subsection

You can use the subsection's settings to highlight fantastic products from your store collections. The Divine theme automatically puts products overlapping the image banner.

The settings will help you to:

• Select products to be shown.
• Split box content.
• Choose the background 1 and background 2 colors.
• Hide the image banner on mobile.
• Enable on-scroll reveal animation.

Here you can also modify the Sizzling 2024 Trends! and Hotspot blocks.

Within the Heading block of The Sizzling 2024 Trends, it is possible to create a heading, choose the heading color, and set the heading level. See the recommendations for the correct usage of headings for SEO. It is also possible to set the position left and the position top within the Hotspot block.

Note: the hotspot block has been available since the 1.3.0 version.

Collection list subsection

The collections list block allows adding a list of categories to the image banner for faster navigation. The benefit of this config option is that you can create as many metafields with sections combined and related for different periods, holidays, etc., and enable them by simply filling in the field “Category metafield name” in Admin.
 

Note: this block is available only on the Collection page.

It can be accomplished in two ways:

1. By adding existing categories from the “Collections list” configuration.

2. By Metafields. Here, you have to enable the “Use collection metafields”.  The Metafields checkbox allows adding “Connected categories” that are set in the admin panel. Then you have to specify the metafield name in the Category metafield name field. But first, we have to create the metafield. Let's take it step by step.

• Navigate to Admin Settings → Metafields and Metaobjects → Collections. Click Add definition and add a metafield with a random name and Type: collection and List.

• Remember to save.
• After it's done, go to Collections and choose the collection you want. In the Metafields section, you will see your newly created metafield.
• Here, you can choose the related collections you want to display on your banner for a Category page.

• Please connect as many sections as you need to allow easy and convenient navigation between them. 

Note: the metafield name you create will be provided in the following format: custom.metafield_name. Still, to output the collection on the frontend, you will only have to indicate the “metafield_name”. The word “custom” will be automatically added.

With the Collection list block, it is also possible to:

• Render a “View all” link.
• Change the link font size.
• Change the link color.
• Enable the bold font.
• Enable animation for the links.