CMS
Brand List
A-Z grouped text-link directory of brands for "shop by brand" entry points.
Overview
BrandList renders an A-Z grouped directory of brand links. Brands passed via the brands prop are sorted with the active locale's collator, then grouped by the first character of each name into alphabetical sections. Each row is a text link with an optional count pill, suited to "shop by brand" entry points and partner directories.
Key Business & UX Benefits
- Opens a clear "shop by brand" path, a high-intent navigation pattern that lifts conversion for multi-brand merchants.
- A-Z grouping with locale-aware sorting helps shoppers scan a long brand list without scrolling endlessly.
- Optional per-brand counts hint at catalogue depth, nudging shoppers toward brands with more on offer.
- Editors maintain the brand array in Studio, so directories stay current as partnerships evolve.
Usage
BrandList Default
<BrandList :brands="brands" />
Feature List
- A-Z grouped directory built from the brands array, with locale-aware collation
- Each row is a text link with optional product count, sized for dense partner registries
- Groups appear in alphabetical order with non-alphanumeric entries pushed to the end
- Opens a 'shop by brand' navigation path, a high-intent pattern for multi-brand merchants
- Editors maintain the brands list in Studio as partnerships evolve
API Reference
| Prop | Default | Type |
|---|---|---|
brandsrequired | BrandListItem[] { name, href, count } |