Docs
Page templates

Collection page

The Kingdom collection page: the Collection banner with image and description, and the Product grid with filters, sorting and products per page.

Applies to: Kingdom 6.2.0 and later. Added in: Kingdom 2.0.0. Last checked: 2026-10-13 against Kingdom 6.2.0.

The collection page shows one collection: the Collection banner at the top, with the title, an optional image and description, and the Product grid with filters, sorting and the products.

Where to find it: Online Store → Themes → Customize → Collections → Default collection

The look of the product cards comes from Product card theme settings, the same for every grid in the store.

Collection banner

The banner shows the breadcrumb and the collection title. The title, description and image come from the collection in Shopify admin → Products → Collections.

  • Show collection description shows the collection's description under the title.
  • Show collection image shows the collection's image as the banner background. Use an image with a 16:9 aspect ratio.
  • Custom text color colors the title, description and breadcrumb.
  • Background overlay lays a color over the image, so the text stays readable. Use a dark color with partial opacity.

Both colors are transparent by default, which keeps the theme colors.

Product grid

  • Products per page sets how many products show before the pagination, from 12 to 248. More products per page make the page slower to load.
  • The grid shows 4 columns on screens 1280 px wide or more, 3 columns on smaller screens and 2 columns on phones. Columns margin in Theme settings → Layout sets the gap.
  • Products tagged featured take two columns and two rows when Emphasize featured products is on, see Product card theme settings.

The order of the products is the collection's sort order in Shopify admin, unless the customer changes it with sorting.

Filtering and sorting

  • Enable filtering shows the filters above the grid on desktop, and in a Filter drawer on phones. The drawer uses the sidebar colors.
  • Enable sorting adds a Sort dropdown: featured, best selling, alphabetical, price and date.
  • Image filter layout shows swatch and image filters in 1 column or 2 columns inside their dropdown.

The filters themselves are Shopify's. Kingdom shows the filters you set in the Search & Discovery app: product type, vendor, availability, price range, product options, metafields and tags.

  • A color option with Shopify swatches shows as color or image swatches.
  • A filter whose values have images shows those images.
  • A true or false metafield shows as a single checkbox.
  • The price filter is a range slider with two fields.
  • A filter set to match all values ("AND") narrows the results with every value the customer picks.

Setting up filters

Install Search & Discovery

Install Shopify's free Search & Discovery app from the Shopify App Store.

Add the filters

In the app, open Filters and add the filters you want, for example Availability, Price, Size and Color. Save.

Turn on filtering

In the theme editor, open Collections → Default collection, select the Product grid section and turn on Enable filtering. Set Image filter layout if you use swatch or image filters.

Check a collection

Open a collection on your storefront. Filters show only for values that the products in that collection have.

To show colors as swatches instead of text, set up the color option with Shopify's color swatches:

In Shopify admin → Products, open a product and set its Category. In Variants, connect the Color option to the category's Color metafield with the dynamic source icon. Give each color entry a swatch color or image. See Category metafields in the Shopify Help Center.

Add the color filter

In Search & Discovery, add the Color filter that comes from that option or metafield.

Check the filter

Open a collection with those products. The Color filter shows round swatches. Values without a color or image show as text.

Why do my filters not show?

Because no filters exist yet, or Enable filtering is off. Kingdom shows only the filters you added in the Search & Discovery app. Also check that the products in the collection have values for those filters: a filter with no matching values in the collection is hidden. Shopify does not support filters on collections with more than 5,000 products.

Why do my color filters show text instead of swatches?

Because the color values have no swatch data. Kingdom draws a swatch only when the filter value has a color or an image in Shopify. Connect the Color option to Shopify's Color category metafield and give each value a color, or use a filter with images.

How do I change the number of products per row?

Kingdom does not have a setting for the number of columns. The grid shows 4 columns on screens 1280 px wide or more, 3 on smaller screens and 2 on phones 649 px wide or less. You can change how many products show in total with Products per page, and the gap with Theme settings → Layout → Columns margin.

All Collection settings

Every setting on this page, one list per section, with its type and default.

Quick view popup

The Quick view popup opens from the Choose options button on Kingdom product cards; you edit its blocks in the product quick-view template.

Collections list page

The Kingdom collections list page shows all your collections or a selection you choose, in one or two columns, sorted the way you set.

On this page

Collection bannerProduct gridFiltering and sortingSetting up filtersWhy do my filters not show?Why do my color filters show text instead of swatches?How do I change the number of products per row?All Collection settingsRelated pages