> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/global-sections/products/products-with-banner.md).
# Products with banner
A two-panel section: a media banner on one side and a product grid on the other. The banner holds an image or video with heading, text, and a button; the grid shows products from a collection.
***
## Settings
{% hint style="info" %}
Select a collection in the **Product list** block — the section has no collection picker of its own.
{% endhint %}
### Layout
| Setting | Description |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Width | **Page** — Keeps the content within the page width set in your theme settings. **Full** — Stretches the content across the full browser width, with a small space at the edges. **Full (no padding)** — Stretches the content across the full browser width, with no space at the edges. |
| Banner position | **Left** — The media banner sits on the left, the product grid on the right. **Right** — The media banner sits on the right, the product grid on the left. |
### Gap
| Setting | Description |
| ------------- | --------------------------------------------------------- |
| Gap — Desktop | Space between the banner and the product grid on desktop. |
| Gap — Mobile | Space between them on mobile. |
### Appearance
| Setting | Description |
| ------------ | ----------------------------- |
| Color scheme | Color scheme for the section. |
### Spacing
| Setting | Description |
| ----------------------- | ----------------------------------------------- |
| Padding top / bottom | Space above and below the section. |
| Custom padding — Mobile | Set separate top and bottom padding for mobile. |
***
## Available Blocks
The section has a fixed two-panel structure.
### Banner
The media panel, holding its own content blocks.
#### Banner Settings
| Setting | Description |
| ------------------------------- | ------------------------------------------------------------------------------------------ |
| Link | Makes the whole banner clickable. |
| Open link in new tab | Opens the link in a new browser tab. |
| Type | **Image** or **Video** for the banner background. |
| Image / Mobile Image (optional) | The background image, with an optional separate mobile image. |
| Video / Mobile video (optional) | The background video, with an optional separate mobile video. |
| Show overlay | Adds a color layer over the media, to keep text legible. |
| Overlay color | Color and opacity of the overlay. |
| Desktop height | Adapt, Small, Medium, Large, or Full screen. |
| Alignment | Horizontal alignment of the content. |
| Position | Vertical position of the content within the banner. |
| Separate button | Pushes the button to the bottom, away from the rest of the content. |
| Desktop gap / Mobile gap | Spacing between the content blocks. |
| Corner radius | Rounding of the banner corners, with a **Custom corner radius** value when set to Custom. |
| Color scheme | Color scheme for the banner's content. |
| Padding | Inner spacing on all four sides, with independent mobile values via **Custom for mobile**. |
#### Banner Blocks
Blocks you can add inside a Banner.
| Block | Description |
| --------------------------------------------------------------- | -------------------------------------------------- |
| [Heading](/helix/theme-blocks/basic/heading.md) | Main headline. |
| [Subheading](/helix/theme-blocks/basic/subheading.md) | Small label above or below the heading. |
| [Text](/helix/theme-blocks/basic/text.md) | Rich-text paragraph for supporting copy. |
| [Button](/helix/theme-blocks/basic/button.md) | Single call-to-action with label, link, and style. |
| [Buttons](/helix/theme-blocks/basic/buttons.md) | Two side-by-side buttons. |
| [Countdown Timer](/helix/theme-blocks/basic/countdown-timer.md) | A live countdown to a set date. |
### Product list
The product grid beside the banner.
| Setting | Description |
| ---------------------- | ------------------------------------------------------ |
| Collection | The collection to pull products from. |
| Max products | How many products to show. |
| Mobile columns | Number of cards per row on mobile — 1 or 2. |
| Enable swipe on mobile | Lets the cards scroll horizontally on mobile. |
| Horizontal / Vertical | Spacing between cards, with independent mobile values. |
The desktop column count is fixed by the section, so there is no desktop columns setting.
***
{% hint style="info" icon="headset" %}
**Need help?**
Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.
Chat with us Submit a ticket
{% endhint %}