Banner settings

Overview

Banner settings centralize how banners look and behave across your store. From backgrounds (images or video, with desktop/mobile variants) to foreground content (icons, captions, headings, subheadings, and buttons), you can define alignment, size, and link behavior once for consistent, on-brand results. Foreground media (e.g., a product or logo image) can be added on top of the background with controls for style, size, and linking. These global defaults keep presentations cohesive while still allowing section/block overrides when a unique layout is needed.

⚠️ Important: Use device-specific assets (desktop/mobile) and sensible alignment to balance impact and performance. Ensure strong color contrast and logical heading structure for accessibility, and optimize image/video file sizes so banners load quickly—especially on mobile.

Banner background settings

Banner background settings give you foundational control over banner visuals, letting you customize how images and videos display for both desktop and mobile visitors. These options support responsive design, so banners look sharp while optimizing for performance where it matters most. This group defines the primary backdrop for all banners.

Background image fit

Select how background images adjust within the banner area.

1. Contain: The image remains fully visible, even if empty spaces appear.

2. Cover: The image completely covers the banner, cropping as needed for aspect ratio.

3. Default: Image scaling matches your theme’s standard method.

Background image

Upload an image to display as the banner’s background on desktop devices.

Background image (mobile)

Upload a separate background image specifically for mobile. This is useful for a different aspect ratio, crop, or file size—ensuring optimal presentation on smaller screens. If not set, the desktop image will display on all devices.

Background video

Select a video to use as the banner’s background for desktop viewports. Videos can add rich motion or atmosphere behind your banner content.

Background video (mobile)

Upload a distinct banner video for mobile devices. This enables a smaller file size or alternate layout to improve loading and presentation on mobile.

💡 Tip: Providing separate image and video assets for desktop and mobile gives you more control over quality, loading speed, and composition. You might consider differently cropped or compressed files for each device context.

Banner foreground content

Banner foreground content manages all elements layered on top of your banner background, including messaging, icons, buttons, and alignment controls. This area is key for accessibility and for guiding customer attention to headlines and calls to action. This group helps clarify your offer and encourage engagement.

Horizontal alignment

Select where content such as headings and buttons are aligned horizontally within the banner.

1. Left

2. Center

3. Right

Vertical alignment

Choose the vertical position of banner content.

1. Top

2. Center

3. Bottom

Default: bottom

Icon

Add an icon or symbol to enhance your banner’s message visually.

Caption

Write a short tagline or supporting line to display above your headline.

Heading

Set the main headline for your banner, providing the primary message.

Heading size

Add xs-jumbo size docs here

Heading type

Choose the HTML tag and visual importance for your heading.

1. p (paragraph)

2. h1

3. h2

4. h3

5. h4

6. h5

7. h6

Default: h2

Subheading

Add supporting text beneath the main heading for extra context.

Button icon

Add an icon to your banner button for additional emphasis.

Button text

Set the label that appears on your banner’s main button.

Button link

Provide the destination URL where users are taken when clicking the button.

Open link in a new tab

Enable to have the button link open in a new browser tab, supporting user navigation preferences.

Default: off

Button style

Control the visual style and emphasis for your button.

1. Primary

2. Secondary

3. Extra large

4. Plain

5. Small

6. Small secondary

7. Circle

Button layout

Decide how icons are displayed relative to button text.

1. Icon left

2. Icon right

3. Icon only

Link style

Choose how banner links behave for usability and coverage.

1. Button: Only the button is clickable.

2. Full block: The whole banner area is clickable.

3. Full block with button: Both the banner and button are clickable.

📝 Note: Every content element is optional. You can use only the elements you need, whether just a heading, a button, or no text at all.

Banner foreground media

Banner foreground media makes it easy to insert a foreground image into your banner. This is ideal for displaying products, logos, or other graphical highlights above your main banner background. These settings let you control appearance and interactivity.

Image

Upload an image to be featured as a foreground element within your banner.

Image style

Control how the image appears visually.

1. Default

2. Rounded corners

3. Circle

Max image width

Set the maximum image width, ranging from 0 to 1600 pixels, in increments of 16.

Default: 160 px

Link

Assign a destination URL for the foreground image to make it clickable.

Usage notes

⚠️ Important: When updating banner settings, consider accessibility, device context, and the user journey to achieve the best results.

1. You might consider preparing alternative image or video assets for desktop and mobile, optimizing layout and load times for each device context.

2. Use strong color contrast between overlays, text, and backgrounds for better readability and accessibility.

3. Maintain a logical heading structure for accessibility, SEO, and user experience.

4. Optimize image and video file sizes to help banners appear quickly, especially on mobile connections.

5. Adjust overlay opacity so important text and elements remain readable, even over dynamic or high-contrast backgrounds.

With flexible controls, banner settings help you deliver banners that are responsive, visually consistent with your brand, and effective within a range of contexts across your shop.