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).

Badge text: The text of the badge.

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.

Move multiple slides at once: When disabled, carousel moves one slide at a time instead of multiple slides.

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).

Mobile 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.

SEO

Heading tag: Select the appropriate heading level (H1, H2, or H3) based on how you want the section title to appear.

Visibility

Show section on desktop: Enable or disable the section’s visibility on desktop devices.

Show section on mobile: Enable or disable the section’s visibility on mobile devices.

Hide section if…: Enable this option when the section’s fields are bound to dynamic sources (i.e. metafields or metaobjects). The section will be hidden on the front-end if the most important field(s) are empty, i.e. when there is no meaningful output.

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.

External video URL: Paste a YouTube or Vimeo URL if you want to turn this into a video with text section.

Self hosted video: The self hosted video takes priority over the external URL.

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

Heading: The title of the banner.

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

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.

Badge color: Optionally select a different color for the badge text and border.