Banner

Featured links

1. Company XYZ documentation on the banner block
2. Shopify documentation on sections and blocks
3. Company XYZ documentation on using video
4. Company XYZ documentation on icons
5. Company XYZ documentation on banner colors settings
6. Company XYZ documentation on visibility settings
7. Shopify documentation on the theme editor

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use the Banner block to create anything from a simple announcement strip to a more visual promotion with background media, layered text, and a clear call to action. It supports separate mobile media, optional foreground imagery, and per-block color control, so you can tailor each banner to the message it needs to carry. For field-level reference, see Company XYZ documentation on the Banner block.

For a broader overview of how blocks work in the editor, see Shopify documentation on sections and blocks

Core settings

Start by choosing the banner’s aspect ratio. Fixed ratios are useful when you want a more designed, image-led shape, while Default works best when the content itself should determine the height.

You can set a separate mobile ratio if the desktop shape feels too tall, too short, or too cramped on smaller screens. If the mobile ratio stays on Default, it follows the main ratio setting.

Note

The block expands if its content needs more room than the selected ratio allows. This helps prevent text and buttons from being clipped.

Banner background

This group controls the banner’s own background treatment. Use it to add the main visual layer behind the foreground content.

You can use an image or video, with separate mobile versions when needed. This is especially helpful when desktop artwork crops awkwardly on smaller screens or when you want a lighter, more focused mobile composition.

Background image fit controls how image media fills the banner area. Cover is usually the best choice for immersive artwork, while Contain is better when the full image must remain visible.

Avoid placing essential text or product details inside background artwork unless you have checked how it crops on both desktop and mobile.

If you use video, keep it short and visually simple so the foreground content stays readable. For file guidance and practical setup advice, see using video.

Banner foreground

This group controls the content shown on top of the background. Any field you leave blank stays hidden, which makes the block easy to keep minimal.

Use horizontal and vertical alignment to place the content where it feels most natural within the banner. Centered layouts usually suit simple messages, while bottom or edge-aligned layouts often work better for image-led promotions.

You can combine an icon, caption, heading, and subheading to build a clear content hierarchy. For icon fields, you can enter an emoji or an icon name; see the icon guide for supported usage.

Choose the heading type based on the banner’s role on the page. A stronger heading level suits a primary promotional message, while a lighter text style is better when the banner is more supportive than dominant.

Button settings control the banner’s main action, including text, icon treatment, size, and layout. A full-width mobile button can improve tap usability when the banner is primarily action-focused.

Link style changes how clickable the banner becomes. A full-block link can make promotional banners easier to interact with, but it affects links inside the text area.

Caution

Full-block link styles remove links from the subheading text. Use them only when the entire banner should point to one destination.

Open links in a new tab only when that behavior clearly supports the customer journey, such as linking to an external campaign or supporting resource.

Banner foreground media

Use foreground media when you want an extra image displayed with the text, such as a logo, badge, product cutout, or campaign graphic. This works well when the background is more atmospheric and the promotional image needs to stay crisp and controlled.

Image style helps you match the visual treatment to the rest of the banner. The width setting lets you keep the image subtle or make it more dominant, and setting it to 0 allows it to stretch across the available space.

You can also add a link to the foreground image. If the block already has a strong primary button or a full-block link style, keep the click behavior simple so the main action stays obvious.

Banner colors

These settings override the default banner color treatment for this block only. Use them when a banner needs campaign-specific styling, stronger contrast, or a custom overlay treatment. For setting details, see Company XYZ documentation on banner color settings.

You can adjust background, border, heading, icon, subheading, text, and overlay colors, including gradient options. In most cases, the most important decision is whether the foreground content remains readable over the chosen background media.

Overlay opacity is especially useful when the background image or video is busy. A slightly stronger overlay often improves readability more cleanly than aggressively changing every text color.

Standard block settings

Visibility settings

Use visibility controls to show the block on all devices, desktop only, or mobile only. This is useful when you want separate banner layouts or artwork for different screen sizes. For setting details, see Company XYZ documentation on visibility settings.

If you create separate desktop and mobile versions, keep the message and destination aligned so customers do not encounter conflicting promotions. For editor basics, see Shopify documentation on the theme editor

Usage notes

1. Choose ratio by purpose. Use a fixed ratio for visual promotions and a more flexible setup when the banner carries longer text or multiple content elements.
2. Plan mobile media separately. Add mobile-specific images or video when the desktop background crops poorly or feels too busy on smaller screens.
3. Keep one main action. Use buttons, linked foreground media, and full-block links carefully so the banner still has one clear click path.
4. Prioritize readability. Adjust overlay strength and text colors together until the message stays easy to read across all background media.
5. Use device visibility intentionally. Create separate desktop and mobile banners only when the layout or artwork genuinely needs to change.
6. Review both viewports. Check alignment, media crop, and control visibility on desktop and mobile before publishing, since each layout can behave differently.
7. Preserve fallback styling when possible. Leave color fields unset when you want the banner to inherit the surrounding look; use explicit colors, gradients, or media overrides only when the banner needs to stand apart.
8. Keep form states readable. If the banner includes customer input, make sure empty, submitted, validation, and error states remain easy to scan on top of the chosen media.