Appearance
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
Short kicker text rendered above the heading in smaller, uppercase type.
Sets how many category cards show per row on tablet and desktop. Use the Columns on mobile setting below to control how many show on phones.
Inherits the theme design default until you choose a value here.
Inherits the theme design default until you choose a value here.
Storefront preview
Shop by pet
Tell us who you're shopping for — we'll point you to what's right for them.
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.
A fresh section starts with three empty category cards — add each card's photo, title, and collection before publishing. 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.
Image sizes
Each card uses the Image you upload on that card — the Collection setting only supplies the link, so changing a collection's image in the Shopify admin does not change what the card shows. Upload at least 900px wide; the card crops it to fill a 3:4 box, so keep the subject centred.
Section settings
| Setting | What it does |
|---|---|
| Color scheme | Colors the whole section — background, text, and card surfaces — from one scheme, so contrast stays legible. |
| Card corner radius | How rounded this section's cards are. Leave on Use theme default to follow Theme settings → Layout. |
| Card shadow | How much this section's cards lift off the page. Leave on Use theme default to follow Theme settings → Layout. |
| 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). |
| Columns on mobile | How many cards per row on phones — 1 for full-width cards or 2 (the default) so cards stay large. |
Card settings (one per block)
| Setting | What it does |
|---|---|
| Heading | 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 by default — never a sideways scroll; cards stay large and easy to tap, and Columns on mobile switches to a single column of full-width cards when you want each photo even bigger.
- 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 hover lift and photo zoom are turned off entirely when a shopper asks for reduced motion; the cards stay still.
- 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.
When it isn't showing
The section keeps its heading, so an empty one is a heading with nothing under it. Each card is a block.
A card renders the Image you upload on that card — the Collection setting only supplies the link, so a card with no picture needs an image uploading here, not in the collection.
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.