> 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/collection-list-with-banner.md).

# Collection list with banner

Display multiple collections with promotional banners to highlight featured categories and encourage customers to explore them.

## How to access

1. **Go to** Shopify Admin → Online Store → Themes.
2. **Click** Customize on your active theme.
3. Click **Add section** on the page and choose **Collection list with banner**.

## Section Settings

<div><figure><img src="/files/DUqbg98KfmBCLjPkLKoL" alt=""><figcaption></figcaption></figure> <figure><img src="/files/WKVUlSs6P4yEl3iNHlFE" alt=""><figcaption></figcaption></figure></div>

| Setting                   | Description                                                                                                                                 |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| Layout                    |                                                                                                                                             |
| 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 opacity.                                                                                                            |
| Content                   |                                                                                                                                             |
| Heading                   | Sets the section heading text.                                                                                                              |
| Heading size              | Controls the size of the heading. Choose from 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.                |
| Banner settings           |                                                                                                                                             |
| Background opacity        | Controls the opacity of the banner background.                                                                                              |
| Image options             | Sets the position of the banner image. Choose from Image first or Image second.                                                             |
| Show count                | Displays the number of products available in the selected collection.                                                                       |
| Section padding           |                                                                                                                                             |
| Top side                  | Sets the space above the section.                                                                                                           |
| Bottom side               | Sets the space below the section.                                                                                                           |
| Section divider           |                                                                                                                                             |
| 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.

### Collection

Displays a featured collection with a promotional banner.

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

| Setting      | Description                                                                                          |
| ------------ | ---------------------------------------------------------------------------------------------------- |
| Heading      | Sets the heading displayed for the collection banner. This replaces the collection's actual heading. |
| Text         | Adds supporting text for the collection banner.                                                      |
| Collection   | Selects the collection displayed in this block.                                                      |
| Image        | Selects a custom image for the banner. If left blank, the collection's featured image is used.       |
| Button label | Sets the button text. Leave blank to hide the button.                                                |
| Button link  | Selects the page or URL the button links to.                                                         |
| Button style | Sets the appearance of the button. Choose from Primary, Secondary, or Hyperlink.                     |

***

## Common Questions

<details>

<summary>How do I add more collection banners?</summary>

Click **Add Collection** inside the section and select the collection you want to display.

</details>

<details>

<summary>Can I replace the collection image?</summary>

Yes. Select an image in the **Image** setting. If no image is selected, the collection's featured image is displayed automatically.

</details>

<details>

<summary>How do I change the button destination?</summary>

Use the **Button link** setting in the Collection block to select the page or URL you want the button to open.

</details>