The Banner section is a visually impactful area designed to display a large background image with highly customizable text overlay content. It’s commonly used on landing pages such as About Us, Collections, or Home to introduce the page with strong visuals and key messaging.

This section supports responsive design with separate desktop and mobile image uploads, and flexible layout options for aligning text and call-to-action elements.

Section settings

• • Color scheme: Choose a predefined color scheme to control the general background and text colors of the banner section.
  • Section width: Control how wide the banner appears:
    • Page: Keeps the banner within the standard page container width.
    • Full: Spans edge-to-edge across the browser window for an immersive experience.
  • Desktop image: Upload a high-quality, horizontally oriented banner image optimized for larger screens.
  • Mobile image: Optionally upload a separate, vertically oriented image optimized for mobile devices to ensure visual clarity and proper cropping.
  • Overlay color scheme: Select a specific color scheme for the semi-transparent overlay box that sits behind your text.
  • Overlay opacity: Adjust the transparency level of the overlay (from 0% to 80%). Increasing the opacity helps improve text readability and contrast against busy background images.
  • Direction: Choose how the overlay content (title, text, buttons) is arranged within its container:
    • Vertical: Stacks elements top to bottom.
    • Horizontal: Places elements side-by-side (ideal for wide banners with minimal text).
  • Desktop content position: Defines exactly where the overlay content box is positioned over the banner image. Choose from 9 distinct positions (e.g., Top Left, Middle Center, Bottom Right) to ensure your text doesn’t cover the most important part of your photo.
  • Top padding / Bottom padding: Add vertical spacing (in pixels) above and below the banner section for better layout balance.

Blocks 

Because this section supports Shopify’s standard Theme Blocks, you can enrich your banner by adding various content blocks:

• • Heading: A strong primary message.
  • Text: Supporting paragraph text.
  • Button: Call-to-action links.
  • Group: Combine elements together for advanced layout control.