Design and layout

All of Easy Brand Page's visual settings live in the theme block, not the admin app. That means you tune the directory's look from inside Shopify's theme editor, with live preview, just like any other theme section.

Layout presets

Layout preset is the first setting group in the Brand Page block - its own "Layout preset" section at the very top. It restyles your brand grid in one click and overrides the card style, spacing, typography, and image settings in Layout & style. The featured brands section keeps its own image and column settings, while the shared card style and spacing follow the preset. The options:

• Custom (use settings below) - the default. Nothing changes for existing setups; the block uses the individual settings you set yourself.
• Classic cards
• Image cards
• Minimal text
• Logo wall
• List rows
• Compact chips
• Letter index rows - no boxes at all: each letter sits in a slim left column with its brands flowing as plain text links beside it, divided by thin lines. The classic brand-index look.
• Letter columns - the whole directory flows in newspaper-style columns (4 on desktop), each letter as a large heading above its plain-text brand list. No cards, no borders.

Three presets have their own column choice, shown right under the Layout preset setting once that preset is picked: List columns (desktop) puts 1, 2, or 3 list rows side by side (mobile always shows one), Name columns (desktop) sets how many columns of names each letter row shows in Letter index rows (1 to 4), and Directory columns (desktop) sets how many columns the Letter columns directory flows into (2 to 5). Each defaults to the preset's classic look.

Switch between presets in the theme editor and watch the live preview. Nothing is lost by trying them - pick "Custom (use settings below)" again and the block goes back to your own settings. While a preset is active, the overridden style settings (card style and image settings) are hidden in the editor; they come back when you switch to Custom.

Card style

Four options:

• Soft. Rounded corners, subtle shadow, white card on a slightly cream background. Default and safest choice for most themes.
• Outlined. Sharp corners, 1px border, no shadow. Best for editorial/magazine themes.
• Minimal. No border, no shadow. Just the brand label (and optional image). Best for ultra-clean themes.
• No box. Removes the card entirely - no border, no background, no card padding. Brand names (or logos) sit directly on the page, with an underline on hover as the link cue. Combine with Show brand images for logos that float free of any container.

You can preview each style in the theme editor by switching the Card style setting and watching the preview.

Spacing

Three presets:

• Compact. Tight padding, smaller gaps between cards. Use for very large catalogues (50+ brands) where you want everything in view.
• Comfortable. Default spacing. Works for most stores.
• Spacious. Generous padding, more whitespace between cards. Use for boutique stores where each brand is a hero.

Spacing affects both card padding and the gap between cards. Mobile spacing scales down automatically.

Block spacing

Separate from the card spacing presets, the padding settings in the Columns & spacing group control the space around the whole block: top, bottom, and side padding. Use them to tighten the directory against neighbouring sections or give it more air, without touching your theme's section settings.

On mobile the padding scales down automatically (about two thirds of the desktop values). Want different values instead? Turn on Use different padding on mobile and three extra sliders appear: Top padding on mobile (px), Bottom padding on mobile (px), and Side padding on mobile (px). Turning the switch back off returns to the automatic scaling.

The same group holds two fit-your-theme controls. Limit content width (with Maximum content width (px)) centers the block at a set width - turn it on when your theme renders app sections edge to edge instead of inside the page container. And Custom CSS (advanced) takes extra CSS applied on pages with this block, for fine-tuning beyond the settings. Both are off/empty by default, so nothing changes unless you opt in.

Product counts and empty letters

Two directory polish options: Show product counts (Layout & style) puts each brand's product count under its name - the number is the linked collection's published product count, so it matches what shoppers find after clicking. Gray out empty letters (Filters) grays and disables A-Z letters that have no brands, so shoppers never click into an empty result.

Columns

You set columns independently for the main grid, the Featured row, and the A-Z filter, each with desktop and mobile values:

• Main grid columns desktop / mobile - 2 to 6. Default 4 / 2.
• Featured columns desktop / mobile - 2 to 6. Default 4 / 2.
• A-Z filter button columns - controlled by the size setting (Normal or Large), not a numeric column count.

Higher column counts mean smaller cards. If you have brand logos that need detail to be legible, stick to 3 or 4 columns desktop.

Brand images and image-only mode

When Show brand images is on, every brand card shows an image: the brand's uploaded logo first, otherwise the mapped collection's image, otherwise the brand's first letter. Combined with Image only (hide brand name), you get a clean logo wall look.

What you need to use images effectively:

• Best result: upload a logo per brand in the app (transparent PNGs look best).
• Without a logo, the brand needs a mapped collection with a featured image set in Shopify admin (open the collection and set its image).
• Collection images should be a brand logo or a representative product shot - tall product imagery looks awkward as a small card image.

There's no broken-image state - a brand with neither a logo nor a collection image shows its first letter.

Typography scale

Three presets that adjust text size across the block:

• Small. Compact, dense.
• Normal. Default.
• Large. Bigger labels and headings. Good for accessibility-focused stores.

The scale applies to brand card labels and most headings. The main page heading and search bar have their own font-size sliders for finer control.

Brand text colour and size

Two settings in Layout & style style the brand names directly:

• Brand name color - the names on the cards, including featured brands. Leave empty to use your theme's text colour.
• Brand name font size (px) - 10 to 24 px. At the default 13 the typography scale above stays in charge; any other value overrides it.

Heading customisation

• Show heading - on/off. The text, size, and colour settings below it only show while the heading is on.
• Heading text - default "Brands". Editable.
• Font size - 16 to 80 px.
• Heading color - leave empty to use your theme's text colour.

The heading is the title above the directory. If you want a custom heading you wrote on the page itself (e.g. via a Rich Text block above the Brand Page block), turn the block's heading off.

Search bar

• Show search bar - on/off.
• Search bar position - right of heading, or below heading.
• Placeholder text - default "Search brands...".

The search filters the displayed brands as the customer types. It's client-side (instant) and works against vendor names. No server roundtrip, no Algolia, no extra cost.

A-Z filter

• Show A-Z filter - on/off.
• Button size - Normal or Large.
• Letter label font size - 10 to 72 px. This sizes the letter above each brand group.
• Letter label color - the same group letters. Leave empty to use your theme's colour.

The A-Z filter is a row of letter buttons that jump the customer to that letter's brands. It also doubles as a visual TOC.

If you have non-Latin vendor names (e.g. accented characters or numbers), they're grouped under configurable symbols set on the admin side - see the Settings reference.

Tag filter pills

If your brands have tags, the block's Filters group controls the category pills: show or hide them, rename the "All" pill, or pin the block to a single tag for a per-category page. See grouping brands with tags for the full feature.

What's next

• The featured brands row - positioning and styling the favourites row.
• The scrolling brand slider - the logo strip block, with its own size, spacing, and animation settings.