Collection banner

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on the collection banner block
3. Company XYZ documentation on using video
4. Google Material Icons
5. Company XYZ documentation on icons
6. Company XYZ documentation on banner colors settings
7. Shopify documentation on customizing sections
8. Company XYZ documentation on visibility settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this block to place a promotional message directly inside the collection grid. It combines background media, overlay content, optional foreground imagery, and custom colors so you can create collection-specific campaigns that feel integrated with product browsing.

For a broader overview of how theme blocks work, see Shopify documentation on sections and blocks

This block only appears when the collection has enough products to fit it in the grid. A large banner needs at least 6 products, and a small banner needs at least 11 products.

You can also use the source-provided guide for additional details: Company XYZ documentation on the Collection banner block.

Core settings

The main size setting controls how much space the banner takes within the grid. Because only one banner of each size is displayed, choose the size deliberately if you plan to use more than one banner in the same collection.

Use a Large banner when the promotion should stand out clearly. Use Small when you want a lighter promotional moment that does not compete as strongly with product tiles.

Banner background

This group controls the media behind the banner content. You can use an image or video, with separate mobile media when the desktop version does not crop well on smaller screens.

If you leave the mobile media fields blank, the main background media is reused. This is convenient for simple setups, but separate mobile assets are often worth using when text or focal points need tighter framing.

Background image fit changes how image-based backgrounds fill the available space. Use a full-bleed look when the image is mostly atmospheric, and a contained fit when the entire artwork needs to remain visible.

Tip

If the banner includes text over photography or video, plan for contrast early. Busy media usually needs a stronger overlay or simpler foreground content.

For video setup guidance, see Company XYZ documentation on using video.

Banner foreground

This group controls the content layered over the background, including alignment, icon, text, and the main call to action. Any field left blank stays hidden, which makes it easy to build anything from a minimal label to a fuller promotional message.

Horizontal and vertical alignment help you position content around the focal point of the background media. If the image already has a strong subject, place text in the open space instead of centering everything by default.

You can add an icon with an emoji or a supported icon name for a quick visual cue. This works well for seasonal campaigns, limited-time messages, or simple brand accents. Source-provided icon guidance is available here: Google Material Icons and Company XYZ documentation on icons.

The heading, caption, and subheading work best with a clear hierarchy. Keep the heading concise, use the caption for light context, and use the subheading only when the extra copy helps customers understand the promotion.

Button settings control the destination, style, icon placement, and mobile width. If you choose a full-block link style, the banner itself becomes the main click target.

Caution

A full-block link style removes links from subheading text. Use it when you want one clear destination for the entire banner.

Banner foreground media

This group adds an optional image alongside the foreground content. It is useful for logos, product cutouts, badges, or supporting artwork that should sit above the background instead of replacing it.

The image style changes the visual treatment, while the width setting controls how dominant the image feels in the layout. Smaller widths usually work best for logos, while larger widths can support bold campaign artwork.

You can also add a separate link to the foreground image. Use that carefully if the banner already includes a button or full-block link, so the block still feels predictable to interact with.

Banner colors

These settings override broader banner styling for this block only. They are useful when a collection campaign needs a distinct palette, stronger contrast, or a more branded presentation than the default styling provides.

You can fine-tune the banner background, border, text, icon, heading, subheading, and overlay. The general text color acts as a fallback when more specific text colors are not set.

Overlay color and opacity are especially important when the background image or video competes with the message. Lower opacity makes media more visible, but it can quickly reduce readability.

For more on these shared color controls, use the source-provided reference: Company XYZ documentation on banner color settings.

Standard block settings

Visibility settings

This shared group controls whether the block appears on desktop, mobile, or both. It is useful when you want a different merchandising mix on smaller screens or need to simplify the grid on one device size.

Be careful when combining visibility rules with banner size and product-count requirements, since the collection can feel different across devices if the banner is hidden on one screen size. For broader editor behavior, see Shopify documentation on customizing sections. The source-provided visibility guide is here: Company XYZ documentation on visibility settings.

Usage notes

1. Check collection size. If the banner is not showing, confirm the collection has enough products for the selected banner size.
2. Keep the action clear. Use one main destination whenever possible so the banner is easy to understand and click.
3. Design for contrast. Balance media, overlay, and text colors so the message stays readable on both desktop and mobile.
4. Use mobile-specific media when needed. Swap in separate mobile assets when the desktop crop hides important content on smaller screens.
5. Review both viewports. Desktop and mobile controls can change alignment, visibility, and media behavior, so check the banner in both sizes before publishing.
6. Use fallback styling intentionally. Leave colors and media blank when you want the block to inherit the surrounding look, and set explicit overrides when the banner should feel more self-contained.