Catalog

Collections

Create editorial collection headers and combine them with reusable product cards, native filtering, sorting, and pagination.

Collection header

The collection template supports three header layouts:

• Editorial card — integrated text and image composition.
• Minimal split — a clean text/media split.
• Wide banner — a broader image-led header.

You can show or hide the title, description, and collection image; control title sizes, text width, image position/width/height/fit/radius, gap, and header spacing. Collection images use Shopify image data and are designed to respect the selected image crop/focal context.

Product cards

Collection product cards can show Quick Buy, color swatches, a secondary image on hover, and configurable media ratio/presentation/spacing/fit.

Swatches preview matching variant images on pointer hover or keyboard focus. The preview is temporary; the original card image returns when the interaction ends.

Filtering and sorting

The collection template renders Shopify-native storefront filters, active filter chips, price ranges, sorting, a desktop filter form, and a mobile filter drawer. Available filters come from the store's Shopify filter configuration.

Pagination and empty states

Collections paginate products and include empty-state messaging when no products match the current filters.