> For the complete documentation index, see [llms.txt](https://themessupport.gitbook.io/lollipop-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themessupport.gitbook.io/lollipop-theme/sections/grid-banner.md).

# Grid banner

Display a grid of promotional cards with images, headings, descriptions, and optional buttons.

## How to access

1. From your Shopify admin, go to **Online Store → Themes**.
2. Click **Customize** on the theme you want to edit.
3. Click **Add section** and choose Grid banner.

## Section Settings

<div><figure><img src="/files/JDMte1t7H2yFlayjImey" alt=""><figcaption></figcaption></figure> <figure><img src="/files/AbXzc1VYRndJ7ydgj2Md" alt=""><figcaption></figcaption></figure> <figure><img src="/files/Ii7VPLUWbVW51ghlU1ZD" alt=""><figcaption></figcaption></figure></div>

| Setting                   | Description                                                                                                                                 |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| Expand to full width      | Extends the section to the full browser width.                                                                                              |
| Color scheme              | Sets the background and text colors.                                                                                                        |
| Background opacity        | Controls the background image opacity.                                                                                                      |
| Banner style              | Sets the banner layout: Grid or Overlay.                                                                                                    |
| Aspect ratio              | Controls the aspect ratio of the banner blocks.                                                                                             |
| Grid block color scheme   | Sets the color scheme for the grid blocks.                                                                                                  |
| Heading                   | Section heading text.                                                                                                                       |
| Heading size              | Size of the heading: Small, Medium, or Large.                                                                                               |
| Text                      | Adds supporting text to the section.                                                                                                        |
| Text position             | Shows the text above or below the heading.                                                                                                  |
| Desktop content alignment | Aligns the section content on desktop. Choose from Left, Center, or Right. On mobile, the content is automatically centered.                |
| Desktop columns           | Number of columns displayed on desktop: 2, 3, 4, or 5.                                                                                      |
| Mobile columns            | Number of columns displayed on mobile: 1 or 2.                                                                                              |
| Enable carousel           | Displays the grid blocks in a carousel.                                                                                                     |
| Change slides every       | Automatically changes slides after the selected number of seconds. Set to 0 to disable autoplay.                                            |
| Gap                       | Controls the spacing between grid blocks.                                                                                                   |
| Pagination                | Sets the carousel navigation: Dots, Arrows, or None.                                                                                        |
| Pagination style          | Sets the pagination style: Classic or Modern.                                                                                               |
| Top side                  | Space above the section.                                                                                                                    |
| Bottom side               | Space below the section.                                                                                                                    |
| Shapes                    | Adds a decorative divider to the section. Choose from Curve top, Curve bottom, Curve both, None, Border top, Border bottom, or Both border. |

## Blocks

Add blocks to this section in the theme editor. Each block is a separate item you can add, remove, and reorder.

### Grid block

Displays a promotional card in the grid.

<figure><img src="/files/fDGeRtkBHO3XpuT9Wpm7" alt=""><figcaption></figcaption></figure>

| Setting                        | Description                                                                                                                |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
| Heading                        | Block heading text.                                                                                                        |
| Image                          | Selects the image displayed in the block.                                                                                  |
| Description                    | Adds supporting text to the block.                                                                                         |
| Button label                   | Button text. Leave the label blank to hide the button.                                                                     |
| Button link                    | Selects the page or URL the button links to.                                                                               |
| Open this link in a new window | Opens the linked page in a new browser tab.                                                                                |
| Button style                   | Sets the button style: Primary, Secondary, Primary outline, Secondary outline, or Link.                                    |
| Desktop content position       | Positions the block content: Top, Center, or Bottom.                                                                       |
| Desktop content alignment      | Aligns the block content on desktop. Choose from Left, Center, or Right. On mobile, the content is automatically centered. |