Shop by Category

A row of large, image-led cards that send shoppers straight into your collections — tap a card, land on that collection. It answers the first question a shopper asks: which group is mine?

• Picture-first — every card is a photo with a short label and a one-line promise underneath.
• Whole card is the link — there's no separate button to find; tapping anywhere on a card opens its collection.
• Optional badge — pin a small pill like Bestsellers or New to the corner of any card.

It's a great second section, right under your hero, so visitors can self-select before they scroll.

Try it

Pick a preset to see its style, change the heading and columns, and use the screen-size and light/dark buttons in the preview header to check how it looks on a phone and in dark mode. The cards below show the Gaoth (pets) example — a "shop by pet" lane — but the section works for any store: shop by room, by occasion, by skin type, by project.

←Shop by category

Color scheme

Eyebrow

Short kicker text rendered above the heading in smaller, uppercase type.

Heading

Subheading

Columns

234

Sets how many category cards show per row on tablet and desktop. Mobile always shows two across so the cards stay large and easy to tap.

Columns on mobile

12

Storefront preview

FIND THEIR LANE

Shop by pet

Tell us who you're shopping for — we'll point you to what's right for them.

Bestsellers

Dogs

Food, treats, and toys for loyal companions

Cats

Food, play, and comfort for every mood

Puppies

Gentle, safe essentials for new arrivals

Small Animals

Food, bedding, and care for little ones

How it works

Add the Shop by category section, then add a Category block for each lane you want to offer. Each block is one card: a photo, a title, a one-line description, the collection it links to, and an optional badge. The cards lay out in an even grid that stays large and tappable on every screen.

The section ships with no cards by default — you add your own — so it never shows placeholder content on a live store. The Gaoth preset's homepage comes pre-filled with a four-lane pet example (Dogs, Cats, Puppies, Small Animals) you can edit or replace.

Composition

            [ Eyebrow ]
           Section heading
            Subheading
┌──────────┐ ┌──────────┐ ┌──────────┐
│  photo   │ │  photo   │ │  photo   │   ← whole card links to a collection
│  Title   │ │  Title   │ │  Title   │
│  promise │ │  promise │ │  promise │
│        → │ │        → │ │        → │
└──────────┘ └──────────┘ └──────────┘

The header (eyebrow, heading, subheading) is optional — leave a field blank to hide it.

Section settings

Setting	What it does
Color scheme	Colors the whole section — background, text, and card surfaces — from one scheme, so contrast stays legible.
Eyebrow	A short kicker above the heading (e.g. "FIND THEIR LANE"). Optional.
Heading	The section title (e.g. "Shop by pet", "Shop by room").
Subheading	One line under the heading. Optional.
Columns	How many cards per row on tablet and desktop (2, 3, or 4). Mobile always shows two across so cards stay large.

Card settings (one per block)

Setting	What it does
Title	The card label (e.g. "Dogs", "Living room", "For sensitive skin").
Text	A one-line promise under the title (e.g. "Gentle, safe essentials for new arrivals").
Image	The card photo. Use a real, in-context photo — it carries the whole card. Always describe it in the image's alt text.
Collection	The collection the whole card links to. Leave it blank and the card has nothing to open.
Badge text	Optional corner pill, one or two words (e.g. "Bestsellers", "New").

Equal-height cards

Cards in the same row are always the same height, with their arrow markers on one baseline — even when one card's promise wraps to two lines and another's fits on one. You don't have to match copy lengths; the layout handles it.

A realistic example — Gaoth's "Shop by pet"

The Gaoth (pets) preset uses this section as its signature opener: a warm, rounded pet-portrait selector. Instead of "shop by category", it asks "who are you shopping for?" — Dogs, Cats, Puppies, Small Animals — each with a real at-home photo and a plain-language promise, so a dog owner finds their lane in one tap. It's the same section you're configuring above; only the photos and copy make it pet-specific. Swap the imagery and labels and the same section becomes "shop by room" for homeware, "shop by occasion" for gifting, or "shop by goal" for wellness.

Presets

The section is available in every preset, and the card treatment matches the active preset's identity:

Preset	Card treatment
Gaoth	The signature pet-portrait selector — asymmetric rounded corners, an amber "wind-trail" lift on hover, a sage badge pill.
Uisce	Clean editorial cards on a cool, calm ground.
Talamh	Grounded, earthy cards for garden and heritage stores.
Tine	Sharper, industrial cards for trade and hardware.
Neart	Soft, premium cards for calm wellness stores.

Responsive & accessibility

• Mobile is a calm 2-up grid — never a cramped single column or a sideways scroll; cards stay large and easy to tap.
• Whole-card tap target — the entire card is the link, far larger than the 44 px minimum, so it's easy to hit on a phone.
• Keyboard focus mirrors hover — Tab to a card and it lifts and brightens exactly as it does on hover, with a clear focus outline.
• Respects reduced motion — the lift and photo zoom apply instantly, without animating, when a shopper asks for reduced motion.
• Right-to-left ready — the grid and the card's accent direction flow correctly in Arabic, Hebrew, Persian, and Urdu.
• Real alt text — describe each photo (e.g. "A happy dog resting at home"); the card photo is content, not decoration.
• One color scheme — the whole section is painted from a single scheme, so card text never lands in a low-contrast surprise.

Tips

• Lead with your best-selling or broadest lane and give it the badge.
• Keep promises concrete and short — one benefit per card ("Gentle, safe essentials"), not a paragraph.
• Use real, in-context photos (a pet at home, a styled room), not isolated packshots — they make the section feel premium.
• Pick 3 or 4 lanes for most stores; more than that and shoppers stop scanning.
• Point each card at a real collection — an empty link makes the card look broken.