Collection page layout
The collection template shows all products in one collection, with a banner at the top and filters + grid below.
The four parts
- Banner — image + collection title + description at the top
- Filters — sidebar or top bar (color, size, price)
- Sort — dropdown to reorder products
- Grid — product cards, paginated at the bottom
Each part is a separate section you can style independently.
Collection banner
The banner auto-fills from the collection’s image, title, and description (set in Shopify admin → Collections).
Open the theme editor on a collection page
Click the Collection banner section
Adjust settings
- Height — Small, Medium, Large, or match the image
- Overlay opacity — dim the image for text readability
- Text alignment — Left, Center, or Right
Save
No banner image? If the collection has no image set, the banner shows a soft gradient with just the title. Add an image in the collection’s admin page to give it presence.
Filters
See Filters for the full setup.
Sort
See Sort.
Product grid
Click the Product grid section
Set columns
Desktop: 2, 3, 4, or 5. Mobile: 1 or 2.
Set products per page
Default is 24. More = fewer pagination clicks, but slower initial load.
Save
Add content sections above or below the grid
Common patterns:
- Above the grid — a small trust-badges strip, a promotional banner, or a category intro paragraph
- Below the grid — testimonials, an FAQ, or a “related collections” strip
Scroll to Add section
Pick any content section
Drag to position
Above or below the Product grid section.