Collection banner
2 min read
_xWJHysTV.jpg)
How to add a Collection banner to your Shopify store
- In the theme editor (Customize), open the template selector.
- Select Collections, then Default collection.
- On the left-side bar, add the Collection banner.
How to edit a Collection banner
Section settings
| Setting | Description |
|---|---|
| Banner height | Set height: Adapt to image, Small, Medium, or Large. |
| Desktop content alignment | Align text block: Left, Center, or Right. |
| Heading size | Choose a size for the heading. Go to Theme settings > Typography to set that Heading's font size scale. |
| Show breadcrumbs | Toggle to show navigation. Format: Home > Collection (The all products collection page) > The current collection |
| Show collection description | Display text from the collection’s description. |
| Show collection image | Toggle to display the image assigned to the collection. |
| Image position | Control where the image display along with the content. |
| Image overlay opacity | Add a dark overlay to improve text visibility (0–100%). |
Block settings
For example: you can use a square image as a featured image of a collection to optimize your Collections list page, and use another image to fit your Collection banner.
- Select Collection banner.
- Add a Collection block.
- Choose a collection and add an image to show. You can set the banners for mobile and desktop view separately.
- Click Save.
💡 Pro tips
- No image? No problem. You can still use this section to display a clean title and intro for SEO and clarity.
- Keep collection descriptions short and scannable — one paragraph works best.
- Use a high-contrast image if you're placing text over it — or lower the overlay opacity to ensure legibility.
Last updated