Image banner

Open a page with a large image, with a heading, text, buttons and an optional countdown on top of it.

---

The Image banner section shows a large image with your message on top of it. Use it as the opening section of your home page, or to announce a collection, a campaign or a sale. You can set a separate image for mobile, add a countdown timer and put the text in a container so it stays readable.

For another large banner layout, see the Hero banner section.

1. Our guide to set up an Image banner section:

Steps:

• In the theme editor, click Add section.

• Locate Image banner.

• Click Save.

The section is added with a Heading, a Text and a Buttons block. You can reorder, remove or add blocks.

2. Section settings

• Layout: Full width / Compact. Full width stretches the banner to the edges of the screen. Compact keeps it within the page width.

• General

  • Image: The banner image. We recommend a landscape image at least 2048px wide.

  • Mobile image: An optional image for mobile. If you leave it blank, mobile shows the Image.

  • Image focal point: Center / Top / Bottom / Left / Right / Top left / Top right / Bottom left / Bottom right. The part of the image that stays in view when the image is cropped to fit the banner. This applies on desktop.

  • Image link: Makes the banner clickable.

  • Image overlay opacity: Darkens the image so text stands out, 0–100%.

  • Desktop banner height: Small / Medium / Large / Custom. For best results, use an image with a 3:2 aspect ratio.

  • Custom height: 250–850px. Only applies when Desktop banner height is set to Custom.

  • Adapt section height to image size: The banner takes the shape of your image. This overrides Desktop banner height and Mobile banner height.

  • Desktop content position: Where the content sits on desktop: Top, Middle or Bottom, combined with Left, Center or Right.

  • Show container on desktop: Shows the content in a box on desktop. Set its color, opacity and corners under Colors.

  • Desktop content alignment: Left / Center / Right.

• Parallax effect

  • Enable parallax effect: The image stays in place while the page scrolls over it.

  • Enable on mobile: Parallax is not supported on most mobile browsers.

• Colors

  • Heading: The color of the headings and the countdown numbers.

  • Text: The color of the text, captions and countdown labels.

  • Button label, Button background and Button outline: The colors of the buttons. Button outline applies to buttons with the outline style.

  • Container background: The color of the container.

  • Container background opacity: 0–100%. Lower it to let the image show through the container.

  • Container corner radius: Rounds the container's corners, 0–60px.

• Mobile layout

  • Mobile banner height: 150px / 250px / 350px / 450px / 550px / 650px / 750px.

  • Mobile content position: Top / Middle / Bottom.

  • Mobile content alignment: Left / Center / Right.

• Corner radius

  • Image: Rounds the corners of the banner, 0–40px.

3. Block settings

Heading block

• Heading: The heading text.

• Heading size: H1 / H2 / H3 / H4 / H5 / H6.

• Width: The maximum width of the heading on desktop, 200–800px.

Text block

• Description: The text to show.

• Text style: Body / Subtitle / Uppercase.

• Width: The maximum width of the text on desktop, 200–800px.

Buttons block

Adds up to two buttons. You can add one per section.

• First button label and Second button label: Leave a label blank to hide that button.

• First button link and Second button link: Where each button goes.

• Use outline button style: Shows the button with an outline instead of a solid fill. Each button has its own setting.

Caption block

A short tagline. You can add one per section.

• Text: The caption text.

• Text style: Subtitle / Uppercase.

• Text size: Small / Medium / Large.

Countdown timer block

Shows a live countdown to the end of a sale or an event. You can add one per section.

• Countdown end date: Use the format mm-dd-yyyy.

• Countdown end time: Use the format hh:mm:ss, in the timezone set in your Shopify admin.

• Hide when countdown reaches zero: Hides the timer when the countdown ends.

• Show timer labels: Shows the Days, Hours, Minutes and Seconds labels.

4. Tips

• Add a Mobile image in portrait format so your banner looks good on phones.

• If your text is hard to read, raise Image overlay opacity or turn on Show container on desktop and lower Container background opacity for a see-through box.

• Use Image focal point to keep the subject of your image in view when the banner crops it.