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.

Card style

Three presets:

• 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.

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.

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.

Image-only mode

When Show collection images is on, every brand card displays the mapped collection image as the card background. Combined with Image only (hide brand name), you get a clean logo wall look.

What you need to use image-only effectively:

• Each brand needs a mapped collection.
• Each mapped collection needs a featured image set in Shopify admin (Collection → Image).
• The image should be a brand logo or a representative product shot - tall product imagery looks awkward as a small card background.

If a brand doesn't have a collection image, the card falls back to text. No broken-image state.

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.

Heading customisation

• Show heading - on/off.
• Heading text - default "Brands". Editable.
• Font size - 16 to 80 px.

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.

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 in the admin Settings page - see the Settings reference.

What's next

• Settings reference - the admin-side toggles that affect display.
• Featured brands - the favourites row layout.