Collection Pages

Collection pages are where customers browse your products. Each collection page shows a grid of products with filters on the side to help customers find what they want.

Browsing products

Products appear in a grid that adjusts to the screen. Customers see two columns on mobile, three on tablet, and four on desktop. Each product card shows the image, title, brand, and price. Products on sale show a red "Sale" badge. Customers can tap the heart icon to save a product to their favourites.

The page loads fast because it only shows 30 products at first. A "Load More" button sits below the grid. Clicking it reveals the next 30 products right away, with no loading delay. Customers keep clicking until they have seen everything in the collection.

Filters

When a collection has enough variety in product types, brands, or tags, a filter sidebar appears on the left. On mobile, there is a filter button in the bottom-right corner that opens a slide-out panel.

What customers can filter by

• In Stock Only toggles between all products and only those currently in stock
• Price lets customers set a minimum and maximum price
• Type appears when the collection has two or more product types (e.g. "Earrings" and "Necklaces")
• Brand appears when the collection has two or more brands
• Tags appears when products have two or more tags across the collection
• Product details appears for structured details you add to products (e.g. "Material", "Stone", "Gauge")

Customers can combine filters. Selecting Brand "Auricle" and Tag "Gold" shows only Auricle products tagged Gold. Selecting two tags shows products with either tag.

Active filters appear as removable chips above the grid. There is a "Clear all" link to reset everything at once.

Filters remember choices

If a customer filters a collection and then navigates away, the filters restore when they come back within an hour. If someone shares a filtered link (the URL includes the active filters), the recipient sees the same filtered view.

Filters and Load More

When a customer uses any filter, the page shows all matching products at once. This means the filter results are always complete. When the customer clears their filters, the paginated "Load More" view returns.

Collection header

Each collection has a name shown at the top of the page. If you set a hero image in the admin, it fills a banner with the collection name in white text over a dark overlay. Without a hero image, the name appears as plain text.

Linked collections

You can link related collections together in the admin. These appear as small image cards in a horizontal row below the header, labelled "Also see". Customers can scroll through them and click to jump to another collection.

Sub-collections

If a collection has child collections (or sits alongside sibling collections), navigation chips appear below the header. These let customers move between related collections without going back to the main browse page.

Sort order

You control the default sort order for each collection in the admin. The options are manual (drag and drop), alphabetical by title, price (low to high or high to low), and date created. The sort applies before customers see the page.

Search engines

Collection pages are built for search engines. Each page has proper meta tags and a canonical URL. The "Load More" button is a real link that search engines can follow, which means they discover all your products even if there are hundreds in a single collection.

You can set a custom SEO title and description for each collection in the admin. These appear in search results instead of the collection name and description.

Styling with custom CSS

Every part of the collection page can be targeted with custom CSS in the theme editor. The product grid, product cards, filter sidebar, filter buttons, active filter chips, the Load More button, linked collection cards, and sub-collection chips all have named hooks you can use to change their appearance.

For example, to make the Load More button span the full width of the grid:

[data-el="load-more"] a {
  width: 100%;
}

Common elements you can target: