Collection page
A collection page: the header with title, description and banner, then the product grid with filtering, sorting and promo cards.
Where to find it: In the theme editor, choose this template from the page dropdown at the top of the screen. Template file: templates/collection.json.
Good for
- Browsing a collection with filters for price, color, size or availability
- Placing a promo card inside the grid to push an offer or a related collection
- Using the collection image as a banner at the top of the page
Set up filters
- Install Shopify's free Search & Discovery app.
- In the app, open Filters → Add filter and add the filters you want, such as Availability, Price, Product type, Color or Size (option and metafield filters are available too).
- Order the filters in the app; the sidebar shows them in the same order.
- Back in the theme editor, make sure Enable filtering is on, then list the groups that should start open in Expand filter groups (for example
Price, Color).
Collection header settings
Layout
| Show heading | Shows the collection's title in the header. It is the page's main heading, so keep it on unless your banner image already carries the name.
On by default. |
| Heading size | Picks one of the heading sizes defined in Theme settings → Typography, so headings stay consistent across sections instead of being sized one by one.
Choose H1 (default), H2, H3, H4, H5 or H6. Only appears when Show heading is on. |
| Show description | Shows the description text.
On by default. |
| Show image | Shows the image for this item.
On by default. |
| Enable full width | Stretches the section edge to edge instead of holding it inside the page container.
Off by default. |
| Desktop image size | Image size on desktop.
Choose Small, Medium (default), Large or Adapt to image. Only appears when Show image is on. |
| Mobile image size | How tall the image is on mobile.
Choose Small, Medium (default), Large or Adapt to image. Only appears when Show image is on. |
Desktop layout
| Content alignment | Aligns the text content within its column.
Default: Left. |
| Content position | Where the text block sits over the image, with nine positions from top-left to bottom-right.
Choose Top, Center (default) or Bottom. Only appears when Show image is on. |
Mobile layout
| Content alignment | Text alignment on mobile.
Default: Left. |
| Content position | Where the text block sits over the image on mobile.
Choose Top, Center (default) or Bottom. Only appears when Show image is on. |
Image
| Overlay opacity | Darkens the image behind the text so the text stays readable. Higher values mean a darker image.
Adjustable from 0% to 100% (default 50%). Only appears when Show image is on. |
| Desktop default image | If neither the collection nor the feature image is set, this image will be displayed.
Only appears when Show image is on. |
| Mobile default image | If neither the collection nor the feature image is set, this image will be displayed.
Only appears when Show image is on. |
Appearance
| Color scheme | Sets the background, text, border and button colors for the section. Schemes are defined once in Theme settings → Colors and reused everywhere, so changing a scheme updates every section using it. |
| Background color | Solid background color, applied instead of the color scheme background.
Only appears when Enable full width is off. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Product grid settings
Layout
| Desktop columns | How many items sit side by side on desktop.
The 5 column layout appears when filters are hidden. Choose 3, 4 (default) or 5. |
| Mobile columns | How many items sit side by side on mobile.
Choose 1 or 2 (default). |
| Pagination style | How shoppers move to the next set of items: numbered pages, a load-more button or infinite scroll.
Choose Page numbers (default), Load more button or Infinite scroll. |
| Results per page | How many products load before pagination.
Adjustable from 8 to 48 (default 16). Only appears when Pagination style is not Infinite scroll. |
| Enable sticky header | Keeps the toolbar (product count, filter toggle and sort) and the filter sidebar in view while shoppers scroll down the grid.
On by default. |
Filters and sort
| Desktop filter style | Minimal shows the toolbar and filters directly on the page background. Panel puts the toolbar and the filter sidebar in bordered boxes, with an optional Section background behind them.
Choose Minimal (default) or Panel. |
| Section background | Background color behind the boxed toolbar and filter sidebar. Leave empty to use the color scheme's background.
Only appears when Desktop filter style is Panel. |
| Enable sorting | Lets shoppers reorder results, for example by price, newest or best selling.
On by default. |
| Enable filtering | Shows the filter panel. Filters themselves come from the Search & Discovery app.
Install the free Search & Discovery app to add and customize filters. On by default. |
| Hide filters by default | Starts the page with the filter sidebar closed on desktop, so the grid gets the full width. Shoppers can open it with the Filters toggle.
Off by default. Only appears when Enable filtering is on. |
| Enable product tags | Shows the product tag filter, if you've added one in the Search & Discovery app. Turn it off to hide tags from shoppers while keeping your other filters.
On by default. Only appears when Enable filtering is on. |
| Enable filter group name | Adds the filter's name to the pills for active filters, so they read "Color: Red" instead of just "Red".
On by default. Only appears when Enable filtering is on. |
| Desktop filter type | Open starts the filter groups listed in Expand filter groups open and the rest closed. Collapsed starts every group closed.
Choose Open (default) or Collapsed. Only appears when Enable filtering is on. |
| Expand filter groups | Separate each filter group with a comma. Example: Price, Color, Size.
Only appears when Enable filtering is on and Desktop filter type is Open. |
Appearance
| Color scheme | Sets the background, text, border and button colors for the section. Schemes are defined once in Theme settings → Colors and reused everywhere, so changing a scheme updates every section using it. |
| Card color scheme | Color scheme applied to product cards in this section only, overriding the card scheme set in Theme settings → Product card. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Product grid blocks
Blocks are the individual pieces inside the section. In the sidebar, click Add block under the section to add one, and drag blocks to reorder them. The order in the sidebar is the order on the page.
Promo card block
Content
| Desktop promo card position | The grid position the card is placed at, counted across the whole collection rather than per page. A card whose position is never reached is placed at the end.
Adjustable from 1 to 48 (default 4). |
| Mobile promo card position | The grid position the card is placed at, counted across the whole collection rather than per page. A card whose position is never reached is placed at the end.
Adjustable from 1 to 48 (default 4). |
| Image | The image for this block.
2880 x 1280px (large) .jpg recommended. |
| Overlay opacity | Darkens the image behind the text so the text stays readable. Higher values mean a darker image.
Adjustable from 0% to 100% (default 40%). |
| Heading | The section title. Leave it empty to hide the heading row entirely and let the content start at the top. |
| Heading size | Picks one of the heading sizes defined in Theme settings → Typography, so headings stay consistent across sections instead of being sized one by one.
Choose Default (default), H1, H2, H3, H4, H5 or H6. |
Button
| Button label | Text on the button. Leave it empty to hide the button. Two or three words reads best. |
| Button link | Where the button goes. A button with no link is not shown. |
| Open link in new tab | Opens the link in a new browser tab. Best kept for links that leave your store, so shoppers don't lose their place.
Off by default. |
| Button style | Picks one of the button styles defined in Theme settings → Buttons: primary, secondary or tertiary.
Choose Primary (default), Secondary or Tertiary. |
| Button icon | Optional icon shown after the button label.
Choose None (default), Arrow left, Arrow right, Arrow up, Arrow down, Chevron left, Chevron right, Chevron up, Chevron down, Arrow up right, Plus, Minus, Cross, Check, Play, Cart, Shopping cart, Search, Link, Download, Envelope, Home, Edit, User, Login, Heart, Chat, Filter, Trash, Share, Phone, Map pin or Eye. |
Layout
| Text alignment | Aligns the heading and body text left, center or right.
Default: Left. |
| Text vertical alignment | Where the heading and button sit on the card: at the top, in the middle or at the bottom.
Choose Top, Center (default) or Bottom. |
Badge
| Show badge | Adds a small label in a top corner of the card, such as "New" or "Limited". It needs Badge text to show.
Off by default. |
| Badge text | Text inside the badge. One or two words.
Only appears when Show badge is on. |
| Icon | A small icon before the badge text. A Custom icon image, if set, replaces it.
Choose None (default), Store, Phone, Heart, User, Check, Check circle, Star, Lab, Info, Truck, Free shipping, Ruler, Returning, Return, Secure, Credit card, Gift, Tag, Discount, Map pin, Package, Clock, Wallet, Coupon, Award, Barcode, Diamond, Leaf, Apple, Gluten free, Gluten, Vegan, Dairy, Dairy free, No added sugar, Protein, Droplet, Droplet free, Bolt, Moon, Brain, Recycle, Envelope, Chat, Sparkle, Flame, Recurring, Lock, Globe, Calendar, Nut off, Sprout, Arrow right, Arrow up right, Arrow left, Chevron right, Chevron down, Plus, Minus, Cross, Play, Cart, Shopping cart, Search, Link, Download, Home, Hamburger, Edit, Login, Error, Arrow up, Chevron left, Chevron up, Arrow down, Filter, Trash, Share, Eye, Sound on, Sound off, Expand, Copy, Question, Warning, Sticky note, Notification, Swap, List, Grid or Logout. Only appears when Show badge is on. |
| Custom icon | Overrides the icon above. Use a transparent .svg or .png.
Only appears when Show badge is on. |
| Badge alignment | Which top corner of the card the badge sits in.
Choose Left (default) or Right. Only appears when Show badge is on. |
Appearance
| Color scheme | Sets the background, text, border and button colors for the section. Schemes are defined once in Theme settings → Colors and reused everywhere, so changing a scheme updates every section using it. |
Tips
- Promo card positions count across the whole collection, not per page. A card at position 20 with 16 products per page appears on page two.
- Promo cards take up a grid cell each, so the grid fetches one fewer product per page for every card. Rows stay complete.
- Use Panel style on busy color schemes. Boxing the toolbar and filters keeps them readable over a colored background.
- Set a default banner. Collections without their own image fall back to the Desktop default image, so no header is left bare.
Troubleshooting
The filters don't show
Filters come from the Search & Discovery app. Without it, or with no filters added there, the sidebar and filter toggle are hidden. Also check Enable filtering is on. Collections with more than 5,000 products don't support filtering.
The 5-column layout shows only 4 columns
Five columns only fit when the filter sidebar is hidden. Turn on Hide filters by default, or turn off Enable filtering, to get the full five.
My promo card appears at the end instead of at its position
The collection has fewer products than the card's position, so the card is placed after the last product. Lower Desktop promo card position or Mobile promo card position.
The tag filter doesn't show
Add a Tag filter in the Search & Discovery app, and make sure Enable product tags is on here.