Banner

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on using video
3. Company XYZ documentation on icons
4. Company XYZ documentation on banner colors settings
5. Company XYZ documentation on section padding settings
6. Company XYZ documentation on section backgrounds settings
7. Company XYZ documentation on separators settings
8. Company XYZ documentation on visibility settings
9. Company XYZ documentation on layout widths settings
10. Shopify documentation on customizing sections
11. Shopify documentation on the theme editor

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use Banner to create a single promotional feature with layered media, text, and an optional call to action. It works well for hero sections, announcements, seasonal campaigns, and brand messages, and it can expand if your content needs more height than the selected ratio provides. For a broader overview, see Shopify documentation on sections and blocks

Core settings

The main layout settings control the banner’s shape on desktop and mobile. Choose a fixed aspect ratio when you want a strong visual frame, or use the default ratio when content length may change and the banner needs to size more naturally.

Mobile can use its own ratio, which is useful when the desktop crop feels too shallow on smaller screens. A taller mobile ratio often gives text, faces, and product details more room without requiring a separate image.

Tip

If important parts of the background feel cramped on mobile, try a taller mobile ratio before replacing the asset.

Banner background

This group controls the banner’s own background area, separate from the outer section background. You can use an image or video and optionally provide mobile-specific media when the desktop version does not crop well on smaller screens.

Background image fit determines whether the media fills the banner area or stays fully visible within it. Use a fill-style approach when the banner should feel immersive, and a contained approach when preserving the full artwork matters more than edge-to-edge coverage.

If you add foreground content, remember that the banner can grow taller to fit it. That extra height can change how background media is cropped.

Review banners with longer text or added foreground media on both desktop and mobile, since content height can noticeably change background cropping.

For video backgrounds, keep clips short and visually clear so the message still works without sound. Video file guidance is available in Company XYZ documentation on using video.

Banner foreground

This group controls the content layered above the background. You can combine an icon, caption, heading, supporting text, and one primary action, and any blank content stays hidden.

Horizontal and vertical alignment help position the message within the banner. Bottom alignment often suits image-led banners, while centered placement usually works best for simple promotional messaging.

Choose the heading type based on the banner’s role in the page. Use a heading level when the banner introduces a major section, and use a paragraph style when the text is more decorative or repeated elsewhere.

Button settings control label, icon, size, and layout. Full-width mobile buttons can improve tap comfort when the banner acts as a main entry point.

The link style changes how much of the banner is clickable. Full-block styles can make the banner easier to use, but they remove links from subheading text.

Caution

If your subheading contains important text links, avoid a full-block link style so those links remain usable.

For icons, you can use emoji or supported icon names. Icon guidance is available in Company XYZ documentation on icons.

Banner foreground media

Use foreground media when the banner needs an extra visual layer such as a logo, badge, product cutout, or secondary image. This media appears alongside the text content rather than behind it.

Image style helps the media feel either more editorial or more badge-like. Rounded or circular treatments often suit logos and portraits, while the default style is usually better for product imagery.

Max image width is the main tool for keeping the media in proportion with the text. If the image starts to dominate the banner, reduce its width before shortening your copy.

You can also add a link to the foreground image. This is useful when the image represents a featured brand, collection, or product and should act as its own visual entry point.

Banner colors

These settings override the usual banner color choices for this section only. Use them when the banner needs a campaign-specific palette, stronger text contrast, or a custom overlay treatment.

Overlay color and opacity are especially useful when the background image or video is visually busy. In many cases, adjusting the overlay improves readability more cleanly than changing every text color.

If you use both a solid color and a gradient, the gradient takes priority where applicable. The same applies to overlay gradients.

Color guidance for banners is available in Company XYZ documentation on banner colors.

Standard section settings

Padding settings

Padding settings control the space above and below the Banner section. Use tighter spacing when the banner should connect closely to nearby content, and more generous spacing when it needs to stand apart as a featured moment.

Because banners are often visually dominant, small padding changes can have a big effect on page rhythm. Check spacing on both desktop and mobile.

Section background settings

Section background settings affect the outer section wrapper rather than the banner itself. This is useful when you want the banner to sit inside a broader framed area or when the surrounding section needs its own image, video, color, or overlay.

Be careful when combining an outer section background with the banner’s own background media. Using both can feel busy unless you are intentionally building a layered or inset design.

Separator settings

Separator settings add a line at the top or bottom of the section. They help define the banner when it sits between sections with similar colors or spacing.

Keep separators subtle if the banner already includes strong imagery, borders, or contrast. Too many visual edges can make the layout feel heavy.

Visibility settings

Visibility settings let you show or hide this section by device size. This is helpful when you want a separate desktop and mobile banner layout.

If you create device-specific versions, keep the message and destination consistent so visitors do not see different promotions depending on screen size.

Width settings

Width settings control both the content width inside the banner and the width of the section wrapper. Use content width to manage readability, and section width to decide whether the banner feels contained, full-width, or edge-to-edge.

These changes can look different in the editor than on the live page, especially in wider layouts. Preview width updates on the storefront before finalizing them. For editor controls, see Shopify documentation on customizing sections and Shopify documentation on the theme editor

Usage notes

1. Match the ratio to the message. Use fixed ratios for image-led campaigns, and use the default ratio when longer copy or added media needs flexible height.
2. Plan mobile cropping early. Add a mobile-specific ratio or media asset when the desktop background hides important focal points on smaller screens.
3. Review both breakpoints. Desktop and mobile controls can produce different alignment, visibility, and media behavior, so preview the banner on both viewport sizes before publishing.
4. Use overlays for readability. Adjust banner overlay color and opacity before rewriting copy or changing multiple text colors.
5. Keep the action clear. Use one strong button and choose full-block link styles only when the whole banner should lead to a single destination.
6. Preview real width behavior. Check the live page after changing width or background settings, since editor previews can understate spacing and cropping changes.