> For the complete documentation index, see [llms.txt](https://help.lumintheme.com/lumin-theme-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.lumintheme.com/lumin-theme-documentation/pro-banner-section.md).
# Pro—Banner section
**The ultimate high-conversion hero section.** A professional-grade image banner designed to combine high-impact visuals with interactive components like icon cards and trust badges to drive immediate sales.
## Overview
The **Pro banner** is a sophisticated evolution of the standard Shopify image banner. While standard banners often feel static, the Pro version allows merchants to layer complex content including feature cards, benefit icons, and descriptive text blocks directly over media. It is engineered for "above-the-fold" placement on homepages or landing pages where establishing brand authority and trust within seconds is critical.
A sequence showing the Pro banner layout on desktop and mobile, highlighting the use of icon cards and glassmorphism text containers.
This section supports advanced layering, such as primary and secondary images, separate mobile-only assets, and highly customizable content containers with blur (glassmorphism) effects. Whether you are running a supplement brand, a pet shop, or a high-end fashion boutique, this section provides the structural flexibility to display your "Unique Value Proposition" (UVP) without requiring custom code.
## Key Features
* **Dual Image Layering:** Overlay two different images to create depth or showcase product-and-lifestyle combinations.
* **Glassmorphism Effects:** Apply modern background blur and variable opacity to text containers for a premium aesthetic.
* **Icon Card Integration:** Highlight key benefits (e.g., "Doctor Formulated", "Free Shipping") with built-in icon support.
* **Precision Overlays:** Control the height, width, and gradient direction of image overlays to ensure text readability.
* **Mobile Optimization:** Define different content positions for mobile and choose to stack or hide secondary images on smaller screens.
* **Interactive Animations:** Choose from "Ambient", "Fixed", or "Zoom-in" image behaviors to create a dynamic browsing experience.
## Step-by-Step Setup
{% stepper %}
{% step %}
## Open the Shopify Theme Editor
Open the Shopify Theme Editor and navigate to the page where you want to add the banner.
{% endstep %}
{% step %}
## Add the section
Click **Add section** and select **Pro banner**.
{% endstep %}
{% step %}
## Upload your images
In the settings panel on the right, under **Image**, upload your primary high-resolution desktop visual.
(Optional) Provide a **Second image** to display a split-screen effect, or upload a **Mobile image** specifically cropped for vertical screens.
{% endstep %}
{% step %}
## Set the desktop content position
In the **Desktop content position** dropdown, choose where your text should sit (e.g., "Middle-left").
{% endstep %}
{% step %}
## Configure the text box
Check **Show text box** if you want your content to sit inside a defined container, then adjust the **Background opacity** and **Enable blur background** for a "frosted glass" look.
{% endstep %}
{% step %}
## Add blocks and adjust spacing
Use the **Add block** function to insert features like **Text**, **Buttons**, or **Icon-cards**.
Adjust the **Block gap (desktop)** to control the vertical spacing between your heading, buttons, and icons.
{% endstep %}
{% step %}
## Configure mobile layout
Scroll to the **Mobile layout** section and decide if you want to **Stack images on mobile** or **Show text below** the image.
{% endstep %}
{% step %}
## Fine-tune overlay opacity
Fine-tune your **Overlay opacity** (usually 20-50%) to ensure your white text is readable against busy images.
{% endstep %}
{% step %}
## Save
Click **Save**.
{% endstep %}
{% endstepper %}
## Best Practices
### Images
* **Desktop:** Use 1920×1080px (16:9) or 2000×1000px (2:1). Keep filenames concise for SEO.
* **Mobile:** Upload a dedicated 800×1200px (2:3) image if your desktop image's subject gets cropped out on vertical screens.
* **Focal Point:** Ensure the main subject of your image is not in the area where your text content will be positioned.
### Video
* If using video blocks within the theme's ecosystem, keep them under 10MB and muted for autoplay compatibility.
### Mobile
* Use the **Show text below** option if your background image contains essential information that shouldn't be covered by a text box.
* Set a smaller **Block gap (mobile)** (e.g., 12px or 16px) to keep the layout tight.
### Performance
* Use JPG for photographs and PNG only for images requiring transparency.
* Limit the **Blur amount** to 10px or less to prevent heavy rendering loads on older mobile devices.
### Conversion
* Place your most important benefit in an **Icon-card** directly next to the **Button**.
* Use the **Inverse** color scheme for the content container if your background image is dark.
## Settings Reference
| Setting | Type | Default | Description | Effect |
| ---------------------------- | ------------- | ------------- | --------------------------------------- | ----------------------------------------------------- |
| **Image** | image\_picker | - | Primary background image. | Sets the main visual for desktop. |
| **Second image** | image\_picker | - | Displays alongside the first image. | Creates a split-screen layout. |
| **Overlay color** | color | #000000 | The base color of the image mask. | Darkens or tints the image for contrast. |
| **Enable gradient overlay** | checkbox | false | Toggle a two-color transition. | Adds a linear gradient over the media. |
| **Overlay opacity** | range | 0% | Strength of the mask. | Higher = darker background, clearer text. |
| **Overlay height** | range | 100% | Vertical coverage of the mask. | Allows for "bottom-only" or "top-only" gradients. |
| **Overlay width** | range | 100% | Horizontal coverage of the mask. | Useful for "vignette" or side-tint effects. |
| **Image height** | select | Medium | Total height of the section. | Controls how much vertical space the banner occupies. |
| **Desktop content position** | select | Middle-center | Location of the text blocks. | Anchors the content to a specific grid area. |
| **Show text box** | checkbox | false | Adds a background container to text. | Improves readability on busy images. |
| **Enable blur background** | checkbox | false | Applies a backdrop-filter blur. | Creates a "glass" effect on the text box. |
| **Block gap (desktop)** | range | 16px | Spacing between individual blocks. | Adjusts vertical "breathing room." |
| **Image behavior** | select | None | Animation style for the background. | Adds parallax-style or zoom motion. |
| **Stack images on mobile** | checkbox | true | Stacks 1st and 2nd images vertically. | Optimizes split-layouts for narrow screens. |
| **Show text below** | checkbox | false | Moves text box outside image on mobile. | Preserves full background image visibility. |
## Troubleshooting
* **Issue:** My text is disappearing into the background image. **Cause:** Insufficient contrast between text color and the image. **Solution:** Increase the **Overlay opacity** or enable **Show text box** with a semi-transparent **Background opacity**.
* **Issue:** The banner is too tall on my phone. **Cause:** The **Image height** is set to "Adapt" and your image is a vertical portrait. **Solution:** Change **Image height** to "Small" or "Medium," or upload a specific **Mobile image** with a wider aspect ratio.
* **Issue:** The "blur" effect isn't showing in my browser. **Cause:** **Enable blur background** is checked but the **Background opacity** is set to 100% (Solid). **Solution:** Lower the **Background opacity** to around 70-80% to allow the blur effect to become visible.
* **Issue:** The second image is hidden on mobile. **Cause:** The **Hide second image on mobile** checkbox is active. **Solution:** Uncheck **Hide second image on mobile** in the section settings.
## FAQ
Q: Can I use this as a full-screen hero?
Yes. Set the **Image height** to "Large" or choose "Adapt" with a high-resolution 16:9 image to cover the most screen real estate.
Q: How do I change the color of the text?
The text color is controlled by the **Color scheme** setting. You can modify these global schemes in your **Theme settings** > **Colors**.
Q: Why does the image look blurry?
Ensure the image you uploaded is at least 2000px wide. If **Image behavior** is set to "Zoom-in", the image naturally scales up, which may highlight low-quality uploads.
Q: Can I put a video in the background?
This specific section is optimized for images. For background video, please use the **Background Video** or **Video** section.
Q: How do I make the button full width?
While the section doesn’t have a global "full-width button" toggle, you can select the **Button** block and check the **Button full width** setting within that specific block.
Q: Is there a limit to how many icon cards I can add?
Technically no, but for the best user experience—especially on mobile—we recommend a maximum of 3–4 icon cards to avoid clutter.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://help.lumintheme.com/lumin-theme-documentation/pro-banner-section.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.