Collection Details Section
This guide describes setting up the Collection Details section.
Use this section to showcase your collection's featured image and description with flexible layout options. Only available on collection template pages.
For general guidance with modifying sections, refer to [Sections overview], and [Shopify help: Sections and blocks].
Set up a Collection Details section
- Go to Customize theme
- Select a collection page
- Select "Add section" > "Collection details"
Configuration
Display Settings
| Setting name | Description |
|---|---|
| Collection details display | Choose from: Image with overlay description, Image with description below, Image only, or Description only. Default is overlay |
| Use aspect ratio | Toggle fixed aspect ratio for images. Default is true |
Image Settings
| Setting name | Description |
|---|---|
| Mobile aspect ratio | Choose from 9:16 to 16:9. Default is 4:5 |
| Desktop aspect ratio | Choose from 9:16 to 16:9. Default is 16:9 |
| Image loading | Uses eager loading with high fetch priority |
Description Settings
| Setting name | Description |
|---|---|
| Description alignment | Left, Center, or Right. Default is center |
| Description size | Multiple options from XS to LG with responsive variants. Default is S/desktop M |
| Description width | Choose from XS to 7XL or full width. Default is 3XL |
| Description display | Automatically shows below on mobile when using overlay |
Section Settings
| Setting name | Description |
|---|---|
| Horizontal spacing | None, Small, Medium, or Large. Default is none |
| Vertical padding | Adjust top/bottom independently (0-100px). Default is 0 |
| Disable header space | Option to remove space between section and header |
| Alternative navigation | Toggle alternative header item colors. Default is true |
| Color scheme | Select color scheme. Default is scheme-1 |
| Add gap | Toggle section edge indentation. Default is false |
Note: When using image overlay display, the description appears inside the image on desktop and below it on mobile for better readability. The section is optimized for high-performance image loading with eager loading and high fetch priority.