Collection page

The main section on every collection page. It shows the product grid alongside the filter and sort toolbar. This section is fixed to the collection template and cannot be added to other page types.

---

Structure

┌────────────────────────────────────────────────────────────┐
│  [ Filter ]  [ Product Count ]  [ Sort ]  [ Column Switch ] │  ← Filter and sort block
├────────────────────────────────────────────────────────────┤
│  ┌──────────┐  ┌─────────────────────────────────────────┐ │
│  │          │  │  [Product] [Product] [Product] [Product] │ │
│  │ Sidebar  │  │  [Product] [Product] [Product] [Product] │ │  ← Product list block
│  │ Filters  │  │  [Product] [Product] [Product] [Product] │ │
│  │          │  │           [ Pagination ]                 │ │
│  └──────────┘  └─────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────┘

Filter and sort block — Toolbar with the filter button, product count, sort dropdown, and column switcher.

Product list block — Product grid with configurable columns, gaps, and pagination.

Collection page structure

---

Settings

Setting	Description
Products per page	Number of products loaded per page or per infinite scroll batch.
Width	Page — Keeps the content within the page width set in your theme settings. Full — Stretches the content across the full browser width, with a small space at the edges.
Gap — Desktop	Spacing between the filter sidebar and the product grid on desktop.
Gap — Mobile	Spacing on mobile.
Color scheme	Colors for the section.
Padding top / bottom	Outer vertical spacing.
Custom padding for mobile	Set separate top and bottom padding for mobile.
Padding top / bottom (mobile)	Outer vertical spacing on mobile. Shown when custom mobile padding is on.

---

Filter and Sort Block

A toolbar above the product grid. It holds four independent sub-blocks — Filter, Product count, Sort, and Column switcher — each configured separately.

Add, rename, and reorder the filters themselves in Shopify's free Search & Discovery app — see Adding filters with Shopify Search & Discovery.

Toolbar settings:

Setting	Description
Gap	Spacing between toolbar items.
Button height	Uniform height for the toolbar buttons.
Sticky on mobile	Keep the toolbar fixed to the top of the screen while scrolling on mobile.
Padding top / bottom	Vertical spacing around the toolbar.
Custom padding for mobile	Set separate toolbar padding for mobile.
Padding top / bottom (mobile)	Vertical spacing around the toolbar on mobile. Shown when custom mobile padding is on.

Filter

Controls how filters are displayed and how customers open them.

Sidebar

Filter — Sidebar layout

Filters sit in a column beside the product grid on desktop. On smaller screens they collapse behind a button that opens a drawer.

Drawer

Filter — Drawer layout

Filters stay hidden behind a button on every screen. Opening it slides in a drawer with all filters and sort options together.

Desktop settings:

Setting	Description
Layout	Show filters in a sidebar or a drawer.
Sidebar visibility	Whether the sidebar starts open or closed. Sidebar layout only.
Sidebar right padding	Space between the sidebar and the product grid.
Drawer position	Which side the drawer slides in from. Drawer layout only.
Filter button style	Visual style of the filter button.
Filter icon	Icon shown on the filter button.

Mobile settings:

Setting	Description
Layout	Whether the filter panel slides up from the bottom or in from the side.
Filter button style	Visual style of the filter button, set independently from desktop.

Filter panel settings:

Setting	Description
Heading size	Size of each filter group label.
Collapse icon	Icon shown for collapsible filter groups.
Collapse filters	Start every filter group collapsed.
Items limit	Maximum filter values shown per group before a "Show more" link appears.

Product Count

Shows the number of products matching the active filters.

Setting	Description
Alignment	Which side of the toolbar the count sits on.

Sort

A dropdown that lets customers re-order products. The available options come from Shopify's default sort keys.

Setting	Description
Style	Button style for the sort dropdown.

Column Switcher

Lets customers change the number of product columns without leaving the page. Set separately for desktop and mobile.

Desktop:

Setting	Description
Type	Show the switcher as grid icons or numeric labels.
Style	Button style. Available when Type is text.

Mobile:

Setting	Description
Type	Same choices as desktop, set independently.
Style	Button style.

---

Product List Block

Renders the product grid. Products are paginated by the Products per page setting above, and the grid is configured separately for desktop and mobile.

Desktop layout:

Setting	Description
Columns	Number of product columns on desktop.
Horizontal gap	Spacing between cards horizontally.
Vertical gap	Spacing between card rows.

Mobile layout:

Setting	Description
Columns	Number of product columns on mobile.
Horizontal gap	Spacing between cards on mobile.
Vertical gap	Spacing between card rows on mobile.
Full width on mobile	Stretch cards to the full viewport width when Columns is 1.

Product card appearance — image ratio, quick add, swatches, badges — is set globally in Theme Settings → Product Cards. The column switcher lets customers override the column count while browsing.

Promo Card

An optional promotional tile inserted into the product grid at a chosen position. Add more than one to build a mixed product-and-editorial feed.

Promo Card in product grid

Layout:

Setting	Description
Card position	Grid position where the card is inserted.
Desktop columns	Width of the card in the grid.
Mobile columns	Width of the card on mobile.
Card link	URL the whole card links to.
Open in new tab	Open the link in a new browser tab.

Media:

Setting	Description
Media type	Use an image or a video.
Image	Desktop background image.
Image mobile	Separate image for mobile.
Video	Shopify-hosted background video.
Overlay	Add a color overlay over the media.
Overlay color	Color and opacity of the overlay.

Content:

Setting	Description
Subheading	Small text above the heading.
Heading	Card headline.
Text	Supporting paragraph.
Alignment	Horizontal alignment of the content.
Position	Vertical position of the content within the card.
Separate button	Pin the button to the bottom of the card. Available when Position is top or center.

Typography:

Setting	Description
Heading size	Visual size of the heading.
Text size	Size of the supporting text.

Button:

Setting	Description
Label	Button text.
Style	Visual style of the button.
Show icon	Add an icon to the button label.
Icon	The icon to show.
Icon position	Which side of the label the icon sits on.
Icon size	Match the button text or set a custom size.
Icon size (custom)	Explicit icon size. Shown when Icon size is custom.
Height	Button height.
Full width	Stretch the button to fill the card width. Not available for subtle or text styles.

Gap:

Setting	Description
Content gap	Spacing between subheading, heading, and text.
Button spacing	Spacing above the button.

Color:

Setting	Description
Color scheme	Colors applied to the card's content area.

Padding:

Setting	Description
Top / Bottom	Vertical padding inside the card.
Left / Right	Horizontal padding inside the card.
Custom padding for mobile	Set separate padding for mobile.
Top / Bottom, Left / Right (mobile)	Padding inside the card on mobile. Shown when custom mobile padding is on.

---

Need help?

Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.

Chat with us Submit a ticket