Banner

Overview #

The Banner section is designed to provide a full-width display for promotions or important information. It is versatile and can be customized with various settings to suit different design needs and content types.

Key components and functionality #

Aspect ratio

This setting allows you to define the aspect ratio of the Banner. It ensures that the banner maintains a consistent shape across different devices.

• Options: Default, Landscape, Portrait, Square, Ultrawide, Widescreen
• Default: default

Aspect ratio for mobile

Similar to the aspect ratio setting, this option specifically targets mobile devices, ensuring the Banner looks optimal on smaller screens.

• Options: Default, Landscape, Portrait, Square, Ultrawide, Widescreen
• Default: default

Background settings

The background settings control the visual appearance of the Banner's background, allowing you to choose between images or videos.

• Background image fit: Determines how the background image is displayed.
  • Options: Contain, Cover, Default
  • Default: cover
• Background image: Select an image for the banner background.
• Background image for mobile: Choose a different image for mobile devices.
• Background video: Add a video as the banner background.
• Background video for mobile: Use a different video for mobile devices.

Foreground content

Foreground content settings allow you to overlay text and other elements on top of the Banner background.

• Horizontal alignment: Aligns content horizontally.
  • Options: Left, Center, Right
• Vertical alignment: Aligns content vertically.
  • Options: Top, Center, Bottom
  • Default: bottom
• Icon: Add an icon to the Banner.
• Caption: Include a caption for additional context.
• Heading: Set a heading for the Banner.
  • Default: Banner
• Heading type: Choose the HTML tag for the heading.
  • Options: Paragraph, H1, H2, H3, H4, H5, H6
  • Default: h2
• Subheading: Add a subheading for more detail.

Button settings

These settings allow you to add and customize buttons on the Banner.

• Button icon: Add an icon to the button.
• Button text: Specify the text for the button.
• Button link: Set the URL the button will link to.
• Open link in a new tab: Choose whether the link opens in a new tab.
  • Default: false
• Button style: Customize the button's appearance.
  • Options: Primary, Secondary, Extra Large, Plain, Small, Small Secondary
• Button layout: Determine the button's layout.
  • Options: Icon Left, Icon Right, Icon Only

Foreground media

Foreground media settings allow you to add images or other media elements to the Banner.

• Image: Select an image to display on the Banner.
• Image style: Choose the style of the image.
  • Options: Default, Rounded Corners, Circle
• Max image width: Set the maximum width for the image.
  • Range: 0 to 1600 px
  • Default: 160 px

Usage notes #

• Responsive design: Ensure that the aspect ratio settings are optimized for both desktop and mobile devices to maintain a consistent look.
• Performance: Use optimized images and videos to ensure fast loading times.
• Accessibility: Ensure that text and button colors contrast well with the background for readability.

Usage examples #

1. Promotional Banner: Use the Banner section to highlight a sale or special offer. Set a background image that reflects the promotion, add a catchy heading, and include a call-to-action button that links to the relevant product or collection.

2. Informational Banner: Display important information, such as shipping updates or new store policies. Use a simple background, add a clear heading, and provide a link to more detailed information if necessary.

3. Visual Showcase: Use the Banner to showcase a new product or collection. Add a high-quality image or video as the background, include a descriptive heading, and provide a button that directs users to explore more.