The Banner section displays a background image or video with text overlay, creating visually appealing hero banners for your store. It supports both desktop and mobile-specific media assets with customizable text alignment and spacing.
Common use cases
Hero banner on homepage to showcase key products or promotions
Announcement banners for sales or special events
Category introductions at the top of collection pages
Welcome sections with branding elements
Usage tips
Use high-contrast images to ensure text remains readable
Keep content concise and focused on a single message or call-to-action
For mobile, consider using a different image that works well with portrait orientation
Test your banner across different screen sizes to ensure responsive behavior
When using video backgrounds, ensure they're not distracting from your main message
Section settings
Setting
Description
URL
Link for the entire section. When set, the whole banner becomes clickable.
Desktop background image
The main image shown on desktop devices.
Mobile background image
Optional alternative image optimized for mobile devices.
Video background
Optional video to play in the background of the section.
Show image
Toggle to show or hide the background image.
Show entire image
When enabled, displays the full image (object-contain). When disabled, crops the image to fill the space (object-cover).
Show video on mobile
Toggle to show or hide the video background on mobile devices.
Color scheme
Select the background color scheme for the section.
Text color
Choose default, force light, or force dark text color.
Border color
Select a subtle or strong border color.
Enable gradient
Add a gradient overlay that darkens the bottom of the image.
Border position
Choose where borders appear: none, top, bottom, or top and bottom.
Height
Select from extra small to extra large height presets.
Vertical alignment
Position content at the top, middle, or bottom of the section.
Horizontal alignment
Position content at the left, center, or right of the section.
Visibility
Show on all devices, mobile only, or desktop only.
Block settings
Heading
The heading block adds a large title to your banner. Limited to 1 per section.
Setting
Description
Content
Text to display as the heading.
Top spacing
Amount of space to add above the heading (0-300px).
Bottom spacing
Amount of space to add below the heading (0-300px).
Content
The content block adds descriptive text to your banner. Limited to 3 per section.
Setting
Description
Content
Rich text to display in the banner.
Top spacing
Amount of space to add above the content (0-300px).
Bottom spacing
Amount of space to add below the content (0-300px).
Buttons
The buttons block adds up to two call-to-action buttons. Limited to 1 per section.
Setting
Description
Primary button color
Select from primary, secondary, tertiary, neutral, or plain button styles.
Primary button label
Text to display on the primary button.
Primary button URL
Link for the primary button.
Secondary button color
Select from primary, secondary, tertiary, neutral, or plain button styles.
Secondary button label
Text to display on the secondary button.
Secondary button URL
Link for the secondary button.
Top spacing
Amount of space to add above the buttons (0-300px).
Bottom spacing
Amount of space to add below the buttons (0-300px).
App
This block allows app developers to add content to the banner section.
PaperBanner
How do I get started with my workspace?
Start by connecting your source repository and choosing the pages you want to publish.
You can then browse your documentation and ask questions about the content your team has shared.
