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

Problem	Fix
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.