Collection banner
Create an eye-catching, customizable banner for collection pages with rich backgrounds, layered media, heading and subheading options, buttons, and flexible color and layout controls—fully optimized for both desktop and mobile experiences.
Last updated About 2 months ago
Overview
The Collection banner block offers a flexible and highly visual introduction for your collections. This block lets you combine powerful backgrounds, layered foreground content, and interactive elements, enhancing the impact and clarity of collection pages. Your design can be tailored with specific images, videos, and colors to ensure your collection stands out across device types.
⚠️ Important: Use the Collection banner block to layer media, headings, and action buttons for a high-impact and memorable start to any collection. This creates a focused and engaging user experience.
General settings
General settings establish the size and prominence of your Collection banner block. Select the appropriate banner size to match your layout and content needs. The chosen size determines how much of the viewport the banner takes up, affecting the balance between visuals and other page content.
Small banner
Offers a subtle, compact introduction.
Large banner
Provides an attention-grabbing, visually prominent appearance.
No default is set for size; always pick the option that best supports your page layout.
Banner background settings
Banner background settings provide the foundation for your banner by enabling you to select images or videos that set the tone for your collection page. Separate options for desktop and mobile ensure optimal display and faster load times for all visitors.
Choose how images scale and which visuals appear on different devices to maintain the best possible presentation everywhere.
Background image fit
Adjust the scaling behavior of your selected background image to maximize the visual effect.
Contain
Shows the complete image, preserving aspect and adding space as needed.
Cover
Fills the entire banner area, cropping edges as required.
Default: cover
Default
Uses the browser or theme's built-in fit method.
Background image
Choose a main background image for desktop views.
Background image (mobile)
Select a dedicated image for mobile visitors to improve performance and presentation on small screens.
Background video
Add a looping or decorative video background for desktops, supporting dynamic and immersive experiences.
Background video (mobile)
Opt for a video tailored for mobile performance or appearance, ensuring quick load and smooth playback.
Banner foreground content
Banner foreground content settings manage everything displayed on top of your visual background—including headings, captions, branding icons, and interactive buttons. Arrange and style these elements to clearly communicate your collection’s story and drive visitors to act.
Precisely align and format your messaging to combine branding, navigation, and calls to action.
Horizontal alignment
Control whether your content is aligned left, center, or right in the banner.
Left
Center
Right
No default specified.
Vertical alignment
Set your content to appear at the top, middle, or bottom of the banner.
Top
Middle
Bottom
Default: bottom
Icon
Feature an icon next to your text for increased visual branding or clarity.
Caption
Place a short, styled caption above or near your banner heading to emphasize promotions or key messages.
Heading
Edit the main heading of your banner for clarity and brand messaging.
Default: Collection banner
Heading size
The Heading size setting lets you choose from predefined text scales used consistently across your storefront. Each option defines the visual weight and hierarchy of your banner or section headings.
Available options:
Extra small (XS) — Subtle, compact headings ideal for tight layouts or mobile.
Small (S) — Balanced size for secondary emphasis or supporting titles.
Medium (M) — The standard heading size for most content sections.
Large (L) — Prominent headings suited for key sections and hero banners.
Extra large (XL) — Bold, attention-grabbing titles used for major highlights.
Jumbo — Oversized statement headings for hero visuals or impactful promotions.
📝 Note: These size presets help maintain consistent typography throughout your shop. When you update a size in Fonts → Heading fonts, it automatically applies everywhere that preset is used.
Heading type
Determine the importance and structure of your heading for screen readers and search performance.
Paragraph (p)
Heading 1 (h1)
Heading 2 (h2)
Default: h2
Heading 3 (h3)
Heading 4 (h4)
Heading 5 (h5)
Heading 6 (h6)
Subheading
Support the main heading with an explanatory or motivational subheading beneath it.
Button icon
Add a visual icon to your banner’s button to reinforce meaning or direction.
Button text
Set the button’s visible text label.
Button link
Specify a destination URL for the banner button, guiding users deeper into your shop or promotion.
Open link in a new tab
Enable this to make the button open its link in a new browser tab.
Default: false
Button style
Choose from a range of styles to affect the button color, outline, and appearance.
Primary
Secondary
Extra large
Plain
Small
Small secondary
Circle
No default specified.
Button layout
Organize the button’s icon and text arrangement for balance and clarity.
Icon left
Icon right
Icon only
No default specified.
Link style
Decide how much of the banner acts as the clickable area—from just the button, to the entire banner block.
Button
Full block
Full block with button
No default specified.
Banner foreground media
Foreground media settings let you add a separate image as a prominent focus in the banner. This enables you to overlay products, logos, or creative artwork for instant recognition or feature focus.
Control the appearance, width, and interactivity of your foreground media for an engaging layered effect.
Image
Upload or select a foreground image to sit on top of the banner background.
Image style
Customize the shape of the image for stylistic or branding needs.
Default
Rounded corners
Circle
No default specified.
Max image width
Set a maximum allowed width for your image, ensuring balance with other banner elements and page layout.
Range: 0 px – 1600 px
Step: 16 px
Default: 160 px
Link
Make the foreground image clickable by providing a target URL.
Visibility settings
Visibility settings ensure your Collection banner block appears only where you want, letting you fine-tune its presence for different devices or audiences.
Display choices allow for targeting banners to desktop, mobile, or all users—optimizing both layout and user experience.
Do not hide
Banner is always shown.
Default: do not hide
Hide on desktop
Banner is hidden for desktop visitors.
Hide on mobile
Banner is hidden for mobile visitors.
Available in sections
Collection
Usage notes
💡 Tip: Use mobile-specific images and videos along with optimized overlays to ensure your Collection banner loads quickly and maintains legibility across every device.
Preview your Collection banner on both desktop and mobile to confirm that all layers, alignments, and overlay settings work together.
Always select colors and overlays that provide strong contrast for headings, body text, and buttons.
Keep foreground and background images optimized for load speed and accessibility.
Use the various button and link styles to suit your branding and assure interactive elements are easily usable for everyone.
Always test your banner with accessibility in mind, considering both text and media for all users.
Customize and layer each aspect of your Collection banner block for a visually appealing, fast-loading, and accessible presentation on every collection page.