Banner settings

Overview #

The Banner settings group provides core theme settings that control the appearance and functionality of banners across your shop. These settings are applied globally but can be customized at the section or block level for specific needs. They allow you to manage the visual and interactive elements of banners, ensuring a cohesive look and feel throughout your store.

Key components and functionality #

Banner settings

This setting group allows you to manage the visibility of banners within your shop.

• Display banner: Toggle the visibility of the banner. When enabled, the banner will be displayed.

Banner background settings

These settings control the background elements of banners, including images and videos, to enhance visual appeal.

• Background image fit: Determine how the background image fits within the banner. Options include contain, cover, and default, with the default being cover.
• Background image: Select an image to use as the banner's background.
• Background image mobile: Choose a separate image for mobile devices to ensure optimal display.
• Background video: Upload a video to use as the banner's background.
• Background video mobile: Select a video specifically for mobile devices.

Banner foreground content

These settings define the alignment and text elements within the banner, allowing for customization of the content displayed.

• Horizontal alignment: Align the content horizontally within the banner. Options include left, center, and right.
• Vertical alignment: Align the content vertically. Options include top, center, and bottom, with the default being bottom.
• Icon: Add an icon to the banner for visual emphasis.
• Caption: Include a caption to provide additional context or information.
• Heading: Set the main heading text for the banner.
• Heading type: Choose the HTML tag for the heading, ranging from p to h6, with the default being h2.
• Subheading: Add a subheading to complement the main heading.
• Button icon: Include an icon within the button for enhanced visual appeal.
• Button text: Specify the text displayed on the button.
• Button URL: Provide a URL that the button will link to.
• Open link in a new tab: A checkbox to determine if the link should open in a new tab. The default is unchecked.
• Button style: Choose the button's style from options like primary, secondary, extra large, plain, small, and small secondary.
• Button layout: Decide the layout of the button, such as icon left, icon right, or icon only.
• Link style: Select the style for links, with options like button, full block, and full block with button.

Banner foreground media

These settings allow you to add and style images within the banner, enhancing the visual content.

• Image: Select an image to display in the banner.
• Image style: Choose the style of the image, such as default, rounded corners, or circle.
• Max image width: Set the maximum width for the image, with a range from 0 to 1600 pixels, in increments of 16 pixels. The default is 160 pixels.
• Link: Provide a URL that the image will link to.

Banner colors

These settings control the color scheme of the banner, including background, text, and overlay colors, to ensure brand consistency.

• Banner background color: Set the background color of the banner.
• Banner background gradient: Apply a gradient to the banner's background.
• Banner border: Define the color of the banner's border.
• Banner heading: Choose the color for the banner's heading text.
• Banner icon: Set the color for any icons used in the banner.
• Banner subheading: Select the color for the subheading text.
• Banner text: Determine the color of the main text within the banner.
• Banner overlay color: Apply an overlay color to the banner.
• Banner overlay gradient: Use a gradient for the overlay.
• Banner overlay opacity: Adjust the opacity of the overlay, with a range from -2% to 100%, in increments of 2%. The default is -2.

Usage examples #

1. Creating a promotional banner: You might consider using the banner settings to create a visually appealing promotional banner. Set a background image or video, align the content centrally, and use a bold heading with a call-to-action button linking to a specific product or collection.

2. Mobile-specific adjustments: Optimize the banner for mobile devices by selecting different images or videos for mobile backgrounds. This ensures that the banner looks great on all screen sizes.

3. Customizing banner colors: Match the banner's color scheme with your brand's identity by adjusting the background, text, and overlay colors. Use gradients for a more dynamic look.

These settings provide a comprehensive toolkit for customizing the appearance and functionality of banners across your shop, enhancing both aesthetics and user experience.