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 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 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. The dropdown opens directly under its button and softens the page beneath it, leaving the header sharp.