> For the complete documentation index, see [llms.txt](https://help.inspiredtheme.com/articles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.inspiredtheme.com/articles/sections/theme-sections/image-banner.md). # 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](/articles/sections/theme-sections/hero-banner.md) section. ### 1. Our guide to set up an Image banner section: {% hint style="info" %} **Steps:** * In the theme editor, click **Add section.** * Locate **Image banner.** * Click **Save.** {% endhint %} 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.
Buttons block settings and result
**Caption block** A short tagline. You can add one per section. * **Text:** The caption text. * **Text style:** Subtitle / Uppercase. * **Text size:** Small / Medium / Large.
Caption block settings and result
**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.
Countdown timer block settings and result
### 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.