Collection page
The Collection page in Seventh: the Main header with the collection title and description, and the Collection grid of product cards.
Applies to: Seventh 4.0.0 and later. Added in: Seventh 1.0.0. Last checked: 2026-10-12 against Seventh 4.0.0.
The Collection page shows one collection: its title on top, then its products with filters and sorting. Every collection uses this template unless you assign it another collection template.
Where to find it: in the theme editor, open the template picker and select Collections → Default collection. The template has two sections, Main header and Collection grid.
Main header
The Main header is the area above the products. Older docs call it "Collection header"; the editor shows Main header.
- By default it holds the Collection title and Collection count blocks.
- You can add the Collection description block, a Content group, any theme block and app blocks. The collection blocks are documented in Collection card.
- In the default template, Background image is connected to the collection image. Turn on Show media background under Section design to show each collection's own image behind its title.
Tip: You can use the Main header section to add more information related to the collection, add information from collection metafields or set background image to the collection image in order to have a media underneath the titles.
Collection grid
The Collection grid shows the collection's products as product cards, with the filter and sort bar above them.
- Products per page sets how many products each page shows. The other products are on the next pages, linked by page numbers under the grid.
- Cards size sets how many cards fit in one row on desktop, and Cards size on mobile does the same on mobile.
- The Product card block inside the grid sets the card style for this template: alignment, spacing, padding, corner radius and color scheme. See Product card.
- The content of each card (badges, swatches, Quick buy) comes from Product card theme settings.
Filters help customers narrow the products by size, color, price, availability or product type. The filtering, sorting and comparing settings are on Collection filters and sorting.
You can configure collection filtering by using the Search & Discovery app from Shopify.
Adding a promo card between the products
Promo cards are content cards inside the grid. Use them for discounts, campaigns or simply for illustration.
Add the card
Select the Collection grid section, select Add block and choose Promo card.
Set its position
Set Custom placement in the grid (0 to 50) on the promo card. The card appears after the product at that position, counted from the first product of each page, on every page of the collection. 0 places it after the last product of each page. A position higher than Products per page shows no card. See Promo card.
Fill the card
Add blocks inside the promo card, for example an Image, a Heading and a Button. The promo card settings are on Promo card.
Using a different layout for some collections
Create a second collection template and assign it to those collections.
- In the theme editor, open the template picker, select Collections, then Create template. Base it on Default collection and give it a name.
- In Shopify admin → Products → Collections, open each collection and select the new template under Theme template.
See Shopify's guide to templates for how alternate templates work.
Why are products missing from my collection page?
Because the collection itself does not include them, or a filter is active. Which products a collection holds is controlled by Shopify, not by Seventh: check the collection's conditions or product list in Shopify admin → Products → Collections. Also check that the products are active and published to the Online Store sales channel. If a filter is active, the grid shows "No products found. Use fewer filters or clear all" with a link that clears the filters.
Why does my collection page show only some products?
Because Products per page limits each page, from 4 to 248 products (default: 48). The other products are on the next pages, linked by the page numbers under the grid. Seventh uses numbered pagination on the Collection page.
Why don't the filters show?
Because filtering is off in the Collection grid, or no filters exist in the Search & Discovery app. Check both, in that order. See Collection filters and sorting for the full checklist.
All Collection page settings
Every setting on this page, one list per section or block, with its type and default.
Accepts these blocks: Content group, Collection title, Collection description, Collection count, any theme block and app blocks.
Text alignment (alignment, default: Left): Sets the alignment of the blocks in the Main header: left, center or right.
Spacing (dropdown, default: Small): Sets the vertical space between the blocks in the Main header. Options: XXSmall, XSmall, Small, Regular, Large, XLarge.
Text container width (dropdown, default: Large): Sets the maximum width of the Main header content on screens 1024 px wide and larger: Small 50, Medium 70 and Large 100 percent of the section width. Options: Small, Medium, Large.
Main header section: Section design
Where to find it: Collections → Default collection → Main header → Section design
The Main header section uses the standard Section design settings, listed in General section styling. Not available in this section: Extend section width to the edges of the screen.
Color scheme (color scheme, default: Scheme 1).
Top padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest.
Bottom padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest.
Show media background (checkbox, default: off): Shows a background image or video behind the section content.
Background image (image). Shown only when Show media background is on.
Background image (mobile) (image): Replaces the background image on screens narrower than 768 px. Shown only when Show media background is on and Background image is set.
Background video (video): Plays a muted, looping video behind the section content. When both a video and an image are set, the video is shown. Shown only when Show media background is on.
Media overlay (dropdown, default: Color): Sets the layer over the background media: a flat color or a gradient. Options: Color, Gradient. Shown only when Show media background is on.
Overlay color (color with transparency). Shown only when Show media background is on and Media overlay is Color.
Overlay gradient (gradient, default: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%)). Shown only when Show media background is on and Media overlay is Gradient.
Parallax effect (dropdown, default: Medium): Moves the background media at a different speed than the page while customers scroll. Subtle, Medium and Strong move it by up to 5, 10 and 20 percent. Options: None, Subtle, Medium, Strong. Shown only when Show media background is on.
Push content down (checkbox, default: off): Replaces Top padding with a larger top space, so more of the background media shows above the content. Shown only when Show media background is on.
Make section full height (checkbox, default: off): Makes the section at least as tall as the screen and centers the content vertically.
Where to find it: Collections → Default collection → Collection grid.
Accepts these blocks: Promo card.
Products per page (slider 4 to 248, step 4, default: 48): Sets how many products show on each page of the collection. The other products are on the next pages, linked by page numbers under the grid.
Collection grid section: Layout
Where to find it: Collections → Default collection → Collection grid → Layout
Cards size (dropdown, default: Medium): Sets how many product cards fit in one row on desktop: XSmall 5, Small 4, Medium 3, Large 2. Seventh shows fewer cards per row on smaller screens. Options: XSmall, Small, Medium, Large.
Cards size on mobile (dropdown, default: Small): Sets the card size on mobile: Small shows 2 cards per row, Large shows 1. On screens narrower than 375 px, cards always show one per row. Options: Small, Large.
Cards alignment (dropdown, default: Top): Sets how cards of different heights line up in a row. Stretch makes every card in a row as tall as the tallest one. Options: Top, Center, Bottom, Stretch.
Stretch alignment type (dropdown, default: Space between): Sets where the blocks sit inside each stretched card. Space between pins the first block to the top and the last block to the bottom. Options: Top, Center, Bottom, Space between, Space around. Shown only when Cards alignment is Stretch.
Grid gap (dropdown, default: Default): Sets the space between product cards. None places the cards edge to edge. Options: None, Default, XXSmall, XSmall, Small, Regular, Large, XLarge, XXLarge. Shown only when Scatter cards is off.
Collection grid section: Cards arrangement
Where to find it: Collections → Default collection → Collection grid → Cards arrangement
The Collection grid section uses the standard Cards arrangement settings, listed in General section styling. Not available in this section: Randomize card sizes and Randomize card sizes on mobile devices.
Scatter cards (checkbox, default: off): Turns on the scattered (editorial) layout: each card moves up or down by a different amount, so the cards no longer sit in straight rows.
Scatter cards on mobile devices (checkbox, default: off): Keeps the scattered layout on mobile, with half the desktop offset. When off, cards line up in regular rows on mobile. Shown only when Scatter cards is on.
Horizontal spacing (dropdown, default: Medium): A larger value will make the cards smaller. Options: XSmall, Small, Medium, Large, XLarge. Shown only when Scatter cards is on.
Vertical scattering (dropdown, default: XSmall): Sets how far each scattered card moves up or down. Options: XSmall, Small, Medium, Large, XLarge. Shown only when Scatter cards is on.
Gap between rows (dropdown, default: XSmall): Sets the vertical space between rows of scattered cards. Options: XSmall, Small, Medium, Large, XLarge. Shown only when Scatter cards is on.
Collection grid section: Section design
Where to find it: Collections → Default collection → Collection grid → Section design
The Collection grid section uses the standard Section design settings, listed in General section styling. In this section the group has only Color scheme, Top padding and Bottom padding.
Color scheme (color scheme, default: Scheme 1).
Top padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest.
Bottom padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest.
Related pages
- Collection filters and sorting: filters, sorting and compare checkboxes of the Collection grid.
- Product card theme settings: the content of every product card.
- Product card: the card block inside the grid.
- Collection card: the Collection title, description and count blocks of the Main header.
- Promo card: the cards you can place between the products.
- General section styling: Section design and Cards arrangement settings.
Product recommendations
The Product recommendations section shows related products below the product page in Seventh. Shopify chooses the products.
Collection filters and sorting
Collection filters and sorting in Seventh: turn on filtering, show filters in a drawer or a sidebar, and let customers compare products.