> 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-gallery.md).
# Collection gallery
Showcase products in an angled gallery layout with images, product information, and optional call-to-action buttons.
## 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 gallery**.
## Section Settings
{% hint style="info" %}
This section uses angled image blocks to create a layered gallery layout. Avoid overlapping images to maintain the intended visual balance and symmetry.
{% endhint %}
| 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 opacity. |
| 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. |
| Change slides every | Sets the delay between automatic slide transitions. Enter 0 to disable autoplay. |
| Pagination | Sets the carousel navigation style. Choose from Dots, Arrows, or None. |
| Pagination style | Sets the appearance of the carousel navigation. Choose from the available pagination styles. |
| Top side | Sets the space above the section. |
| Bottom side | Sets the 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.
### Image
Displays an image with product information and an optional button.
| Setting | Description |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------- |
| Image | Selects the image displayed in this gallery block. For best results, use an image with a resolution of 650 × 800 px. |
| Heading | Sets the heading displayed for the gallery item. |
| Text | Adds supporting text for the gallery item. |
| Product | Selects the product associated with this gallery item. |
| Button label | Sets the button text. Leave 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 appearance of the button. Choose from Primary, Secondary, or Hyperlink. |
## Common Questions
How do I add more gallery items?
Click **Add Image** inside the Collection gallery section and configure each gallery block individually.
Can I link each gallery item to a different product?
Yes. Select a product in the **Product** setting for each Image block.
What happens if I don't add a button label?
The button is hidden when the **Button label** field is left blank.