Skip to content

Talamh

An earthy, refined design for garden centers, nurseries, and outdoor lifestyle brands.

Who it's for

Garden centers, plant nurseries, outdoor furniture stores, landscaping services, and nature-inspired lifestyle brands. If your products grow, bloom, or live outdoors, Talamh is your preset.

The vibe

Forest greens and warm browns with golden accents. The palette feels like sunlight filtering through leaves. The serif heading font adds an editorial quality — sophisticated but never stuffy.

Color schemes

Talamh includes four color schemes. You can use any of them on any section, and edit the colors at any time.
Scheme 1 — Light

Heading text

Body text sample

Button
Scheme 2 — Dark

Heading text

Body text sample

Button
Scheme 3 — Accent

Heading text

Body text sample

Button
Scheme 4 — Bold

Heading text

Body text sample

Button

Font pairing

RoleFontWeight
HeadingsPlayfair DisplayBold (700)
BodySource Sans ProRegular (400)

Playfair Display is an elegant transitional serif. Paired with the clean readability of Source Sans Pro, you get a look that's refined without being fussy.

These sections work beautifully with Talamh's natural tones:

  • Seasonal highlights — The signature gardener's almanac: what to sow, tend, and harvest, season by season
  • Banner — A seasonal hero image with a nature backdrop
  • Featured collection — Seasonal picks or new arrivals
  • Image with text — Your brand story or founder's note
  • Before/after — Garden transformation sliders
  • FAQ — Planting and care tips
  • Lookbook — Styled garden or outdoor spaces

Catalog size

Best for medium to large catalogs (50–500 products). The refined design works especially well when you have rich product photography to show off.

Live demo — Talamh preset homepage
Live demo — Talamh preset homepage

Target merchant profile

Celtic for "earth" — Talamh is the organic, seasonal garden-niche preset for Shopify merchants selling plants, seeds, garden tools, or horticultural products. The seasonal-color tinting visual signature (gradient colour applied to section backgrounds based on a merchant-configurable season setting) evokes the natural rhythm of the growing year — right for plant nurseries, garden centres, and seed suppliers competing on Shopify against specialist horticultural retailers.

Talamh serves merchants who:

  • Sell plants, seeds, bulbs, bare-root trees, or plugs
  • Have seasonal availability cycles (some products only available spring/autumn)
  • Publish planting calendars and care instructions (hardiness zones, spacing, watering schedules)
  • Operate as independent garden centres or plant specialist retailers

Garden centres, online plant nurseries, seed suppliers, or specialty horticultural retailers with 50–1,000 SKUs. Revenue model: high seasonality; large spring/autumn buying peaks; customer education is a key differentiator (planting instructions, zone guides, seasonal highlights).

Visual signature details

The Talamh preset loads assets/preset-talamh.css when settings.preset is talamh. This CSS:

  • Applies seasonal-color gradient tinting to niche-anchor section backgrounds, driven by a merchant-configurable season setting in the section (.niche-anchor--talamh selector)
  • Spring: soft green/lime gradients; Summer: warm yellow/gold; Autumn: burnt-orange/russet; Winter: cool grey/navy
  • The season tint is an optional aesthetic layer — it does not change section content

Header signature — grounded heritage-garden chrome

The header (a shared component across all presets) wears Talamh's earth/soil signature, loaded from assets/talamh-visual.css:

  • Cream-loam frosted bar — a warm cream-loam chrome (backdrop-filter: blur(16px)), weighted and earthy rather than cool or breezy. On the homepage hero it carries a deep forest-green scrim; on scroll it settles to solid loam with a soft earth-toned shadow.
  • Two-tone soil-strata underline — each nav link grows a 3px band that reads as a soil cross-section: a moss-green topsoil over a terracotta subsoil. It rises up from the baseline (scaleY, transform-origin: bottom) like a root taking hold — it grows from the ground, it does not sweep in or sit flat.
  • Squared terracotta earth-tile affordances — the icon controls reveal as small squared tiles on hover/focus, filling with a warm-loam tint inside a terracotta rim and seating down on a soft inset shadow (pressing a seed into soil).
  • Golden-harvest cart badge — the item-count bubble is golden-harvest with deep-forest digits.
  • Soil-strata mobile drawer — the panel opens onto a warm-loam surface with a thin moss band at the top, a moss-green squared leading edge, and settled, level nav rows.

The signature is decoration only — colour, border, blur, and the underline animation. It adds no menus; your navigation comes from your Shopify menu. It is right-to-left safe (the strata rises vertically, so it needs no direction flip) and reduced-motion safe (the strata appears instantly when reduced motion is requested). See the Header guide for the live demo.

Season tinting customization

The seasonal gradient tinting uses CSS custom properties to define four seasonal palettes:

SeasonCSS class on sectionVariables applied
Spring.season--spring--season-tint-start: #e8f5e9; --season-tint-end: #c8e6c9
Summer.season--summer--season-tint-start: #fff9c4; --season-tint-end: #f0f4c3
Autumn.season--autumn--season-tint-start: #fff3e0; --season-tint-end: #ffe0b2
Winter.season--winter--season-tint-start: #e3f2fd; --season-tint-end: #e8eaf6

These values are safe for WCAG AA text contrast when used with the default color schemes. If you apply a dark color scheme to a section with seasonal tinting, verify text contrast meets 4.5:1 minimum using the browser DevTools Accessibility panel.

Planting calendar section (via sections/event-calendar.liquid, layout: planting_zones)

A seasonal planting calendar rendered as a WAI-ARIA grid, showing when to sow, plant, and harvest by hardiness zone. Powered by the event-calendar section's planting_zones layout mode — a Talamh-specific extension.

What it does

  • Renders a 12-month grid (one column per month, one row per plant/seed category) with colour-coded cells showing "Sow", "Plant", "Harvest" states
  • Hardiness zone filter: customers can filter by USDA / RHS zone to see which months apply to their growing region
  • Each grid cell has role="gridcell" and aria-current="date" on the current month column for screen-reader navigation
  • Month labels are fully localized (all 50 locales; short form: "Jan", "Feb" etc.)
  • Mobile fallback: horizontal scroll with overflow-x: auto on the grid container

Schema settings

SettingTypeDefaultDescription
layoutselectcalendarSet to planting_zones to activate the planting calendar mode
headingtextSection heading
show_zone_filtercheckboxtrueShow hardiness-zone filter buttons above the grid
default_zoneselectH4 (RHS)The zone pre-selected when the page loads
color_schemecolor_schemescheme-1Section background

Where to find it in the theme editor: Sections → Event calendar → Section settings tab. Change Layout to Planting zones.

Adding planting calendar blocks

Each block in the event-calendar (planting_zones layout) defines one plant row in the calendar.

  1. Click Add block → Plant entry.
  2. Enter: Plant name, Sow months (comma-separated month numbers, e.g., 3,4,5), Plant months (e.g., 5,6), Harvest months (e.g., 7,8,9), Minimum zone (RHS H1–H7 or USDA 1–13), optional notes.
  3. Repeat for each plant or seed category.

Planting calendar keyboard navigation

The planting calendar WAI-ARIA grid supports the following keyboard interactions:

KeyAction
Arrow keysMove focus between cells in the grid
Enter / SpaceOpens the plant detail (if a detail link is present)
TabMoves focus to the next focusable element outside the grid
Home / EndMoves focus to first / last cell in the current row

The current-month column has aria-current="date" which screen readers announce as "current".

Plant care section (sections/plant-care.liquid)

A care-card grid section rendering plant-specific care instructions with species identifier, hardiness zone badge, watering icon, sun exposure icon, and spacing information. Suitable for a dedicated plant care page or as a reference section on a collection or product page.

What it does

  • Renders <article> cards in a CSS grid — one card per plant block
  • Each card: plant name (H3), hardiness zone badge (from uisce_talamh.hardiness_zone_min metafield or block setting), watering frequency icon, sun exposure icon (full/partial/shade), spacing (cm), brief care notes (richtext)
  • Hardiness zone badge reads from product.metafields.uisce_talamh.hardiness_zone_min if the block is linked to a product, otherwise from a block setting
  • Optional "Add to cart" button per card if a product is linked

Schema settings

SettingTypeDefaultDescription
headingtextSection heading
columns_desktoprange 2–43Grid columns on desktop
show_hardiness_badgecheckboxtrueShow the hardiness zone badge on each card
niche_metafield_namespacetextuisce_talamhNamespace prefix for hardiness zone / spacing data
color_schemecolor_schemescheme-1Section background

Where to find it in the theme editor: Sections → Plant care → Section settings tab.

Adding plant care blocks

  1. Click Add block → Plant care card.
  2. Enter or link: Plant name, optional product picker (to pull metafields automatically), Hardiness zone (RHS H1–H7), Watering frequency, Sun exposure, Spacing (cm), Care notes.
  3. If a product is linked and the product has uisce_talamh.hardiness_zone_min populated, the metafield value overrides the block setting for the zone badge.

Seasonal highlights — the signature section

Talamh's signature opener is The Gardener's Almanac: a Seasonal Highlights spotlight organised by time, not by category. Where most discovery sections ask "which group is mine?", the almanac answers the question a garden shopper actually has — "what should I be sowing, tending, or harvesting right now?" Each season carries a real garden photo, the produce that's in season now, a short jobs this season checklist, and a button into that season's collection. Flag the current season as current and the spotlight always opens on the right one — a four-clicks-a-year update that keeps the homepage feeling alive through the growing year.

Try the live section below — click a season chip, or focus one and use the arrow keys (and Home / End) to step through; the panel swaps in place. Switch the preset to see the same shared section take on each preset's colours (the earthy almanac decoration — the golden-harvest active chip, the two-tone soil-strata underline, the warm-loam panel — is the Talamh signature).

Seasonal highlights

Small label shown above the heading.

Storefront preview

THE GARDENER'S ALMANAC

What's growing now

Four seasons, one patch of earth — what to sow, tend, and harvest as the year turns.

Autumn Harvest

Harvest and prep in one — cover crops, mulch, garlic for next year, and everything for preserving the glut.

In season now

  • Squash
  • Garlic
  • Apples
  • Cover crops
  • Kale

Jobs this season

  • Sow garlic before the first frost
  • Mulch beds with leaf mould
  • Lift and store maincrop potatoes
Shop autumn harvest
A wicker basket of freshly harvested autumn vegetables held in a sunny garden

The same section is documented generically, with every setting and non-garden uses (seasonal fashion drops, a holiday gift edit, a menu by season), on its component page: Seasonal highlights. Internally the section is sections/seasonal-highlights.liquid; its keyboard-operable selector is the <season-almanac> custom element (a genuine WAI-ARIA Tabs implementation), and the earthy tints come from assets/preset-talamh.css.

Niche-specific structured data

The Talamh preset extends snippets/json-ld.liquid to emit Event JSON-LD for planting calendar entries. This maps sowing/planting windows to Schema.org Event properties:

Schema.org fieldSource
@typeEvent
nameProduct title + "planting window"
startDateuisce_talamh.planting_start_date metafield (ISO 8601 YYYY-MM-DD format)
endDateuisce_talamh.planting_end_date metafield (ISO 8601 YYYY-MM-DD format)
locationPlace with shop name
eventStatusEventScheduled
eventAttendanceModeOfflineEventAttendanceMode

Note on date format: The planting_start_date and planting_end_date metafields must contain ISO 8601 dates (YYYY-MM-DD). The provisioner generates these in correct format. If you add blocks manually, use ISO format (e.g., 2026-03-01 not March 2026). The schema is suppressed when either date metafield is blank, to avoid Google Rich Results Test validation errors on missing required fields.

A separate planting_window text metafield is available for human-readable display in the event-calendar and plant-care sections. These are two separate metafields serving two purposes.

Plant care URL structure

For optimal Google indexing of plant care content, use clean page handles:

  • Planting calendar: /pages/planting-calendar
  • Plant care guide: /pages/plant-care
  • Include an hreflang link for each locale where you offer plant care content in that language

To validate the Event JSON-LD:

bash
curl -s "https://your-store.myshopify.com/pages/planting-calendar" \
  | grep -A 10 '"@type":"Event"'

Schema settings reference

niche_metafield_namespace setting

Default: uisce_talamh. Key metafields used by Talamh niche sections:

KeyTypeUsed by
hardiness_zone_minsingle_line_text_fieldplant-care cards, PDP hardiness-zone block
planting_windowsingle_line_text_fieldplanting calendar human-readable display
planting_start_datedateEvent JSON-LD startDate
planting_end_datedateEvent JSON-LD endDate
spacing_cmnumber_integerplant-care cards

Per-preset PDP blocks (Talamh)

Two blocks are available in the Talamh product template (templates/product.talamh.json):

Block handleDescription
plant-care-cardShows watering/sun/hardiness-zone data from product metafields on the PDP
hardiness-zoneProminent hardiness zone badge with RHS/USDA dual display

Demo-data setup

The scripts/populate-niche-talamh.mjs provisioner creates:

  • 6–8 plant/seed products with uisce_talamh.hardiness_zone_min, planting_window, and spacing_cm metafields pre-populated (sourced from RHS Plant Finder data)
  • A planting calendar page with 8 example plant rows
  • A plant care guide page with 6 plant care cards
  • Header navigation: Home, Shop Plants, Planting Calendar, Plant Care, Seasonal Highlights, About, Contact
  • Footer Quick Links: Planting calendar, Plant care, Care advice, About us
bash
STORE_PRESET=talamh SHOPIFY_STORE=your-talamh-store.myshopify.com \
  SHOPIFY_ACCESS_TOKEN=shpat_xxxx \
  node scripts/populate-niche-talamh.mjs

Manual setup steps

  1. Planting calendar page: Create page, assign page.planting-calendar.talamh template, handle planting-calendar. Add plant blocks to the event-calendar section.
  2. Plant care page: Create page, assign page.plant-care.talamh template, handle plant-care. Add plant-care-card blocks.
  3. Seasonal highlights on homepage: Add the seasonal-highlights section to the Talamh homepage template; set layout to tabs for the season-selector UX.
  4. Metafield definitions: Create definitions in Shopify Admin for uisce_talamh.* keys above.
AppUse caseConnection method
BloomscapePlant-care reminder emails after purchaseAdd a Bloomscape app block to your product template (app block system).
PlantInAI plant identification (embed widget)Add a custom HTML block with the PlantIn embed snippet to your plant care page.

There is no live RHS feed integration. The theme reads merchant-entered structured data via metafields; provisioner seeds example RHS-cited fixtures. For live zone/variety lookups, direct customers to rhs.org.uk/plants or app partners.

Behavior callouts

Season tinting is a CSS aesthetic layer

The seasonal gradient tinting from preset-talamh.css is decorative — it does not change prices, availability, or collection contents. The tint applies when the preset is set to talamh and the relevant section uses .niche-anchor--talamh. Merchants can configure the active season tint in the section's layout/color settings.

Planting calendar grid keyboard navigation

The WAI-ARIA grid follows the ARIA grid pattern: arrow keys move between cells, Enter opens a cell's detail (if any), Tab moves to the next focusable element outside the grid. aria-current="date" on the current month column is announced by screen readers as "current".

Hardiness zones: RHS vs USDA

The Talamh sections default to RHS zones (H1–H7, UK/Irish scale). If your customers are in North America, you can override the default_zone setting to a USDA zone. The zone filter buttons display both RHS and USDA labels when both are populated in the event-calendar block schema. For UK/Irish stores, RHS zones are sufficient.

Plant care page seasonal highlights synergy

For the best merchant experience, link the planting calendar and plant-care sections on the same dedicated page (page.planting-calendar.talamh template already includes both by default via the provisioner). Seasonal highlights can be added as an optional contextual band above the planting calendar on the homepage.

Accessibility implementation details

Planting calendar accessibility

The planting calendar implements a WAI-ARIA grid:

  • Grid cells use role="gridcell"; the current month column has aria-current="date"
  • Arrow keys move between cells; Home/End jump to first/last cell in the row
  • The zone filter region uses role="group" with an aria-labelledby heading

Plant care cards accessibility

Plant care cards use <article> elements with semantic heading hierarchy (<h3> for plant names). Hardiness zone badges have aria-label attributes with the full zone description.

Seasonal highlights tabs accessibility

The tabs layout uses role="tablist", role="tab", role="tabpanel", and aria-selected in line with the ARIA tabs pattern. Keyboard navigation follows the standard tab pattern: arrow keys move between tabs, Enter/Space activates a tab, the associated tabpanel becomes visible.

RTL support

The Talamh preset uses logical CSS properties:

  • Planting calendar: month columns flow left-to-right in LTR and right-to-left in RTL (CSS direction: rtl inverts the flex row order of the grid columns)
  • Plant care cards: card grid uses flex-wrap: wrap with gap — columns reorder correctly
  • Hardiness zone badge: uses margin-inline-start for positioning
  • Seasonal highlights tabs: [role="tablist"] uses flex-direction: row which reverses in RTL

The provisioner script includes RTL-specific content for ar and he locales. Month names in Arabic are right-to-left (Gregorian month names in Arabic are used for international gardening context). All locale keys in sections.event_calendar.* have 50-locale coverage including RTL scripts.

Pre-submission checklist

Shopify Theme Store checklist (Talamh-specific)

  • [ ] At least 4 products with uisce_talamh.hardiness_zone_min populated
  • [ ] Planting calendar page exists with at least 4 plant rows
  • [ ] Plant care page has at least 3 plant-care-card blocks
  • [ ] Seasonal highlights has at least 2 season blocks
  • [ ] Page planting-calendar uses page.planting-calendar.talamh template
  • [ ] Page plant-care uses page.plant-care.talamh template
  • [ ] Header navigation includes "Planting Calendar" and "Plant Care" links
  • [ ] settings.preset is set to talamh in Theme settings

Google Rich Results (Talamh — Event JSON-LD)

The Talamh preset emits Event JSON-LD for planting-calendar product entries when planting_start_date and planting_end_date metafields are populated. To validate:

bash
curl -s "https://your-store.myshopify.com/pages/planting-calendar" \
  | grep -A 10 '"@type":"Event"'

Ensure planting_start_date and planting_end_date metafields contain values in ISO 8601 date format (YYYY-MM-DD) for the JSON-LD to be well-formed.

Built for the Shopify Theme Store.