> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/supra-shopify-theme/supra/sections-and-features/collection.md).

# Collection

The one-screen grid with a category rail.

SUPRA's collection page fills exactly one screen. The header and footer stay put and the grid scrolls inside itself, cut off mid-row at the bottom — the half-row is the point, it's what says there's more below.

Five columns on desktop, two on phones.

## Category menu

The only setting. It's the left-hand rail — right-aligned, with the current category in bold. It sits outside the content column, on the same rail as the cart box, so the grid gets the full width.

If you don't pick a menu, SUPRA looks for one handled `sidebar-menu`. Failing that it lists your collections alphabetically, which is rarely the order you want. Pick a menu.

## Tiles

Image-only on desktop, with the name appearing on hover. Turn on [**Show product titles on cards**](/supra-shopify-theme/supra/theme-settings/layout.md) to label them permanently.

On phones the rules run edge to edge and every tile shows its name and price — there's no pointer to hover with down there.

Sold-out products say so in place of the price.

## Corner badges

Set the [`custom.badge`](/supra-shopify-theme/supra/metafields/badge.md) metafield on a product and it prints in the corner of the tile — `new`, `restock`, whatever the drop calls for.

## On phones

The category list is either a sideways-scrolling row or a dropdown — your choice, in [Theme settings → Layout](/supra-shopify-theme/supra/theme-settings/layout.md). The dropdown opens directly under its button and softens the page beneath it, leaving the header sharp.