Shop by Level

A grid of image-led cards that send shoppers straight into a collection — tap a card, land on that collection — with one extra trick: each card can show a small level gauge that flags how advanced it is. It answers two questions at once: which group is mine? and is this for someone at my level?

• Picture-first — every card is a real photo with a short title 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 level gauge — a small three-rung meter (Beginner, Intermediate, Advanced) in the corner of the photo, so shoppers can self-select by skill, difficulty, or intensity. Leave it on None and the card is a plain category card.

It's a great second section, right under your hero, for any catalogue where how advanced something is matters as much as what it is — DIY projects, online courses, recipes, fitness programs, craft kits.

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 example below is the Tine (hardware) "Project Blueprint Board" — a DIY job board graded by skill — but the same section works for any store: courses by skill level, recipes by difficulty, fitness programs by intensity, craft kits by experience.

←Shop by level

Color scheme

Eyebrow

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

Heading

Subheading

Columns

234

Storefront preview

TACKLE ANY JOB

Shop by Project

Everything the job needs, sorted by where you’re starting from.

• 

  Beginner

  Kitchen Repairs , Beginner project

  Taps, pipes, sealants, and fixings for kitchen maintenance.

  Start the job
• 

  Intermediate

  Bathroom Fitting , Intermediate project

  Tile cutting, grouting, plumbing tools, and waterproofing.

  Start the job
• 

  Intermediate

  Outdoor & Decking , Intermediate project

  Fencing, decking, path-laying, and weatherproofing.

  Start the job
• 

  Advanced

  Workshop Build-Out , Advanced project

  Benches, clamping, dust collection, and storage.

  Start the job

How it works

Add the Shop by level 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 Level. Set a level and the card shows a small three-rung gauge over the lower corner of the photo and reads the level out to screen readers; choose None and the gauge is hidden and the card is a plain category card.

The cards lay out in an even, equal-height grid that stays large and tappable on every screen — four across on desktop, two-by-two on a tablet, and a clean single column on a phone.

The section ships with no cards by default — you add your own — so it never shows placeholder content on a live store. The Tine preset's homepage comes pre-filled with a four-lane DIY project example (Kitchen Repairs, Bathroom Fitting, Outdoor & Decking, Workshop Build-Out) you can edit or replace.

Composition

                  [ Eyebrow ]
                Section heading
                 Subheading
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
│  photo   │ │  photo   │ │  photo   │ │  photo   │   ← whole card links to a collection
│ ▮▯▯ BEG. │ │ ▮▮▯ INT. │ │ ▮▮▯ INT. │ │ ▮▮▮ ADV. │   ← optional level gauge (corner of photo)
│  Title   │ │  Title   │ │  Title   │ │  Title   │
│  promise │ │  promise │ │  promise │ │  promise │
│ START →  │ │ START →  │ │ START →  │ │ START →  │   ← arrow markers on one baseline
└──────────┘ └──────────┘ └──────────┘ └──────────┘

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

Section settings

Setting	What it does
Color scheme	Colors the whole section — background, text, and card surfaces — from one scheme, so contrast stays legible in light and dark mode.
Eyebrow	A short kicker above the heading (e.g. "TACKLE ANY JOB", "LEARN AT YOUR PACE"). Optional.
Heading	The section title (e.g. "Shop by Project", "Browse courses", "Recipes by difficulty").
Subheading	One line under the heading. Optional.
Columns	How many cards per row on desktop (2, 3, or 4). Tablet always shows two-by-two, and mobile is a single column, so cards stay large.

Card settings (one per block)

Setting	What it does
Heading	The card title (e.g. "Kitchen Repairs", "Intro to Watercolour", "HIIT Programs").
Text	A one-line promise under the title (e.g. "Taps, pipes, sealants, and fixings for kitchen maintenance").
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.
Level	Optional. Shows a small three-rung level gauge on the card — Beginner (one rung), Intermediate (two), Advanced (three) — to flag how advanced it is. Choose None to hide it.

The level gauge

The gauge is the section's signature. It turns how advanced is this? into a glance: one lit rung for Beginner, two for Intermediate, three for Advanced, with the level spelled out beside the rungs so it's never colour-or-shape alone.

• It's per card — mix beginner and advanced lanes in the same grid, or set every card to None for a plain category grid.
• It's decorative for the eye, spoken for the ear — the rungs are hidden from screen readers, but the level is announced as part of the card's name (e.g. "Kitchen Repairs, Beginner project"), so the meaning never depends on seeing the meter.

Equal-height cards

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

A realistic example — Tine's "Project Blueprint Board"

The Tine (hardware) preset uses this section as its signature opener, organised by the job, not the product category. Where other discovery sections ask "who are you shopping for?" (shop by category) or "what's in season?" (seasonal highlights), the blueprint board answers "what am I taking on, and is it my level?" — Kitchen Repairs, Bathroom Fitting, Outdoor & Decking, Workshop Build-Out — each with a real project photo, a forged difficulty gauge, and a "start the job" affordance. A DIY shopper reads it like a blueprint pinned to the workshop wall and instantly knows which projects match their skill. It's the same section you're configuring above; only the photos, copy, and levels make it DIY-specific.

Swap the labels and imagery and the same section becomes:

• Online courses by skill level — "Intro", "Working", "Mastery", each a lane into that tier's catalogue.
• Recipes by difficulty — "Weeknight", "Weekend", "Showstopper".
• Fitness programs by intensity — "Foundations", "Build", "Peak".
• Craft kits by experience — "First kit", "Improver", "Expert".

In each case the gauge does the same job: it lets a shopper self-select by where they're starting from, in one tap.

Presets

The section is available in every preset, and the card treatment matches the active preset's identity. The forged, industrial blueprint look — squared corners, the tempered-iron card surface, the ember-to-forge-red gauge — is the Tine signature; in the other presets the same grid takes on that preset's colours and type, with the gauge tinted from the active colour scheme.

Preset	Card treatment
Tine	The signature Project Blueprint Board — squared tempered-iron cards, a warm offset shadow, and the forged ember-to-forge-red difficulty gauge.
Uisce	Clean editorial cards on a cool, calm ground; the gauge tints to the water accent.
Gaoth	Warm, rounded cards for pet and lifestyle stores.
Talamh	Grounded, earthy cards for garden and heritage stores.
Neart	Soft, premium cards for calm wellness stores.

Responsive & accessibility

• A clean single column on mobile — the grid never stays cramped at three or four across on a phone; cards stack full-width and edge-to-edge so the photos read large.
• Two-by-two on a tablet, your chosen columns on desktop — always a balanced grid, never a lonely orphan card on its own row.
• 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; the gauge and arrow are decoration inside it, not competing tap zones.
• Keyboard focus mirrors hover — Tab to a card and it lifts and the gauge brightens exactly as it does on hover, with a clear focus outline.
• The gauge is spoken, not just shown — screen readers announce each card as "{title}, {level} project", so the level never depends on seeing the meter (WCAG 1.4.1 — never colour or shape alone).
• Respects reduced motion — the lift, the gauge heat-up, and the arrow nudge apply instantly, without animating, when a shopper asks for reduced motion.
• Right-to-left ready — the grid order, the gauge fill direction, and the arrow all flow correctly in Arabic, Hebrew, Persian, and Urdu.
• Real alt text — describe each photo (e.g. "Timber decking boards being laid in a back garden"); the card photo is content, not decoration.
• One color scheme — the whole section is painted from a single scheme, so card text and the gauge label never land in a low-contrast surprise, in light or dark mode.

Tips

• Lead with your broadest or most popular lane.
• Use the level gauge only where it helps — a store where difficulty matters (projects, courses, recipes) gains a lot from it; for a plain category grid, set every card to None.
• Keep promises concrete and short — one benefit per card, not a paragraph.
• Use real, in-context photos (a job underway, a finished build), 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.