> 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/theme-settings/layout.md).

# Layout

Category list style on phones, and product card titles.

## Category list on phones

**Row that scrolls** (default) or **Dropdown**.

* **Row** — categories sit in a single line under the header and scroll sideways. Good for up to about six categories.
* **Dropdown** — the current category with a triangle; tapping opens a two-column panel and softens the page beneath it. Better for long lists.

On desktop the category list is always the left-hand rail, regardless of this setting.

## Show product name on hover

Off by default.

On desktop, collection tiles are image-only — the reference layout shows the name on hover instead. Turning this on labels every tile permanently.

This setting doesn't affect phones. Down there names and prices are always shown under each tile, because there's no pointer to hover with and an unlabelled grid is unusable.

## Sale badge

**None** by default. The other two put a mark on any product whose price has been reduced:

* **Says "sale"** — the word.
* **Says the percentage off** — worked out from the compare-at price against the current one, rounded to a whole number.

It appears on collection and grid tiles. A product counts as reduced only when its **Compare at price** is higher than its price; setting one without the other does nothing.

Shopify reports a product's compare-at price as the lowest across its variants, so a garment reduced in one size and not the others is still marked. That is the honest reading — there is a discount to be had on that page.

A product carrying a [custom badge](/supra-shopify-theme/supra/metafields/badge.md) can show both. They sit in different corners.