Featured banners section

The Featured banners section is designed as an impact element for your store. It displays prominent imagery along with banners in a unique design that can promote any kind of arbitrary content such as collections, offers, products, etc.

Section settings

Image: The main image of the section. You can leave this empty and the section’s background will appear instead.

Overlay background: Optional gradient background or color to be used as an overlay (over the image and under the content).

Heading: Set a title for this section.

Heading size: Select a size for the heading (Choose from Small, Normal, Large, Extra large, and Extra extra large).

Description: The description of the section that will appear underneath the heading.

Link label + Link: With these settings you can create a button that will appear under the heading and description. For example if you have used this section to showcase a list of offers, you can add a button with a link to a collection or page called “Offers”.

Link button color scheme: Optionally change the color scheme configuration of the button.

Banner card

Card ratio: This option allows you to select the ratio of the banner cards that will appear on the section. “Adapt to first image” (default option) means that the ratio of all cards will be the inherent ratio of the first card’s image. Square, Portrait and Landscape will force the images to be displayed as squares, portraits or landscapes respectively.

Show title: Whether the show the title of the cards.

Show button: Whether to show the button of the cards.

Layout

Container width: Select either “Wide” or “Full” for the section’s container width. Choosing “Wide” extends the section a few pixels beyond the page’s boundaries on the left and right, whereas “Full” expands the section to cover the entire width of the viewport. This setting is designed to work along with a color scheme that contrasts the base background (i.e. Accent colors or Background 2).

Layout

Image: Optionally select a different image for mobile devices.

Heading size: Select a size for the heading just for mobile devices.

Colors

Color scheme: Select one of the predefined color schemes as defined in Theme settings > Colors. For more information regarding the color schemes please refer to our article about creating your own color scheme.

Section spacing

The section spacing settings gives you the option to adjust the top & bottom section spacing values. Please note: If you select a color scheme with a background color, these settings will affect the spacing between the top or bottom of the section and the content of the section.

Banner block

This section consists of “Banner” blocks, each corresponding to a card within the section. The settings for these blocks are as follows:

Image: Set an image for the particular banner. It will be displayed as the background image for the banner.

Overlay background: Add an overlay background (such as a linear gradient) to improve the contrast of the image with the heading.

Heading background opacity: Adjust the banner’s title background opacity.

Heading: The title of the banner.

Description: A short description of the banner.

Button label + Link: The banner’s button text and where it should link to (page, collection, product, external link etc).

Display button as text link: Optionally make the button be a textual link. Applies when the button is visible and when it is also not a textual link.

Button color scheme: Choose the color of the button. Applies when the button is visible and when it is also not a textual link.

Badge text: Optionally enter a short text that will be presented as a badge on the banner’s image.