Talamh Preset Support Pack

Diagnostic and troubleshooting reference for the Talamh garden preset — planting calendar, plant care cards, seasonal highlights, and plant metafields.

FAQ

Q: The planting calendar grid is not rendering correctly on mobile.

A: The planting calendar grid wraps — it never scrolls horizontally. With the Talamh preset active the 12 month tiles lay out 3 per row on mobile, 6 per row from 480px, and 12 per row from 768px (the base theme uses 6 per row on mobile and 12 from 768px). If the layout looks wrong:

Check for custom CSS overriding grid-template-columns on .planting-calendar__grid — the breakpoint rules live in event-calendar.css and talamh-visual-ext.css.
Confirm the Talamh preset is active: the <body> element should carry the preset-talamh class. Without it, the 3-column mobile layout does not apply.

Q: The hardiness zone chips show the wrong zones.

A: The zone chips above the grid are populated from the section-level zones setting on the Event calendar section — a comma-separated list of zone values (default 5,6,7,8,9), shown when the layout is set to Planting zones. There are no per-block zone settings.

The chips are static, declarative coverage — they state which zones the page's guidance covers. They do not filter anything: all 12 month cells always render. (Earlier theme versions rendered this as a dropdown; it performed no action and was replaced by the chips.)

Wrong zones listed? Edit the zones comma-separated value on the section in the theme editor.
Zone values render as literal strings, so use one zone system (USDA numbers or RHS H-codes) per store to avoid a confusing mixed list.

Q: Hardiness zone badges are not showing.

A: Two separate surfaces render hardiness zones, and they read from different places:

The PDP hardiness-zone block reads only the hardiness_zone_min metafield in the uisce_<preset> namespace, derived from the settings.preset theme setting (uisce_talamh when the Talamh preset is active). The block has no settings and renders nothing when the metafield is blank.
The Plant Care section's zone chip reads only that plant block's hardiness_zone text setting — it never reads metafields.

Check:

PDP badge: is the metafield definition created in Shopify Admin → Settings → Custom data → Products, and is the value populated on the product?
PDP badge: is Theme settings → preset set to talamh? The namespace is derived from it — sections carry no namespace setting (the section-level attribute is a fixed literal).
Plant Care chip: is the hardiness_zone text setting filled in on the plant block?

Q: Seasonal highlights tabs are not switching.

A: The tabs layout is server-rendered. The active season is set by the block marked active: true in the theme editor at page load. Switching to a different season requires selecting the block in the theme editor and saving — there is no built-in client-side tab switching.

If only one tab is showing, add more Season blocks — each block contributes one tab, labelled by its title setting (blocks have no season value setting). The tab navigation renders whenever the tabs layout is selected, regardless of how many blocks exist.

Q: The Event JSON-LD is missing or malformed.

A: Event JSON-LD is emitted on product pages only, and only when BOTH the uisce_talamh.planting_start_date and uisce_talamh.planting_end_date date metafields are populated on the product — it is suppressed when either is blank, to avoid Google Rich Results "missing required field" errors. To fix:

Create both date metafield definitions and populate calendar-day values on each plant product; the emitter renders them as ISO 8601 YYYY-MM-DD startDate / endDate.
planting_window is human-readable display text only — it never feeds the JSON-LD.

Decision Tree: "Why is my planting calendar empty?"

Symptom: Planting calendar page does not show the 12-month grid

  -> Is the event-calendar section layout set to 'Planting zones'?
    -> Check in theme editor: Sections → Event calendar → Layout setting
    -> If 'Timeline (default)': the section renders Event blocks as a timeline instead of the grid
    -> If 'Planting zones': Continue

  -> Planting zones layout: the grid always renders all 12 month cells
    -> It takes no blocks — Event blocks only render in the Timeline layout
    -> The zone chips never hide cells (they are static coverage text)
    -> If no cells render: confirm the section is present in the page template and
       check the browser console for custom CSS/JS errors

  -> Timeline layout showing nothing instead?
    -> Add at least one 'Event' block (the only block type) and populate its
       date / title / description fields

Validator Interpretation

"Lighthouse: planting-calendar has accessibility warning on grid pattern"

The planting calendar grid uses role="grid", role="gridcell", and aria-current="date". A Lighthouse warning may indicate:

aria-current value is not date — the theme uses date per ARIA spec for calendar grids
Missing aria-label on the grid container — the theme ships an aria-label from the sections.planting_calendar.grid_label locale key; check a custom edit has not removed it

"axe: color-contrast on planting calendar text fails WCAG AA"

This can occur when the planting-calendar color token applies a background tint that reduces contrast for text in some combinations. To fix:

Navigate to Theme settings → Color schemes and ensure the scheme applied to the planting calendar section has sufficient text-to-background contrast (≥4.5:1 for body text, ≥3:1 for large text / UI components).
Use the browser DevTools Accessibility panel to check the contrast ratio on the affected element.

"Google Search Console: Event structured data has missing required field"

Required Event fields: name, startDate. The theme's Event JSON-LD reads product metafields — never calendar blocks — and is suppressed unless both uisce_talamh.planting_start_date and planting_end_date are populated, so it always emits name, startDate, and endDate together. A missing-field report usually means a custom edit to snippets/json-ld.liquid.

Console Diagnostic Snippet

(function talamhDiagnostic() {
  'use strict';
  const grid = document.querySelector('[role="grid"]');
  const seasonal = document.querySelector('.seasonal-highlights');
  const r = {
    presetBodyClass: document.body.classList.contains('preset-talamh'),
    plantingCalendar: {
      present: !!grid,
      monthCellCount: document.querySelectorAll('[role="gridcell"]').length,
      zoneChipCount: document.querySelectorAll('.planting-calendar__zone-chip').length,
      currentMonthMarked: !!document.querySelector('[aria-current="date"]'),
    },
    careConditions: {
      present: !!document.querySelector('.care-conditions'),
      cardCount: document.querySelectorAll('.care-conditions__card').length,
      zoneChips: document.querySelectorAll('.care-conditions__zone-chip').length,
    },
    seasonalHighlights: {
      present: !!seasonal,
      layout:
        [...(seasonal?.classList ?? [])]
          .find((c) => c.startsWith('seasonal-highlights--'))
          ?.replace('seasonal-highlights--', '') ?? 'unknown',
      panelCount: document.querySelectorAll('.seasonal-highlights__panel, .seasonal-highlights__season').length,
    },
    pdpZoneBadges: document.querySelectorAll('.pdp-block__badge--zone').length,
    presetCSS: !!document.querySelector('link[href*="preset-talamh"]'),
  };
  console.group('%cTalamh Diagnostic Report', 'color:#2d6a4f;font-weight:bold;font-size:14px');
  console.table(r.plantingCalendar);
  console.log('Care conditions:', r.careConditions);
  console.log('Seasonal highlights:', r.seasonalHighlights);
  console.log('PDP zone badges (meaningful on product pages only):', r.pdpZoneBadges);
  console.log('Preset CSS:', r.presetCSS);
  console.groupEnd();
  return r;
})();

Accessibility Diagnostic

Planting calendar ARIA grid check

(function checkPlanningCalendarA11y() {
  const grid = document.querySelector('[role="grid"]');
  if (!grid) {
    console.warn('No ARIA grid found for planting calendar');
    return;
  }
  const gridcells = grid.querySelectorAll('[role="gridcell"]');
  const currentDate = grid.querySelector('[aria-current="date"]');
  const gridLabel = grid.getAttribute('aria-labelledby')
    ? document.getElementById(grid.getAttribute('aria-labelledby'))?.textContent
    : grid.getAttribute('aria-label');
  console.log({
    gridPresent: true,
    gridcellCount: gridcells.length,
    currentMonthMarked: !!currentDate,
    gridLabel: gridLabel ?? 'MISSING — add aria-label or aria-labelledby',
  });
})();

Expected: gridcellCount > 0, currentMonthMarked: true, gridLabel present.

Hardiness zone badge check

// PDP badge (run on a product page) — reads uisce_talamh.hardiness_zone_min
const pdpBadges = document.querySelectorAll('.pdp-block__badge--zone');
console.log(pdpBadges.length + ' PDP zone badges found');
pdpBadges.forEach((b, i) => {
  console.log('Badge', i + 1, {
    text: b.textContent.trim(),
    hasAriaLabel: !!b.getAttribute('aria-label'),
  });
});

// Plant Care chip (run on the care-conditions page) — reads the block's hardiness_zone setting
const chips = document.querySelectorAll('.care-conditions__zone-chip');
console.log(chips.length + ' care-conditions zone chips found');

Localization Notes

Planting calendar month names

Month labels in the planting calendar come from 12 dedicated locale keys — sections.planting_calendar.month_jan through sections.planting_calendar.month_dec — translated in all 50 locales.

Hardiness zone labels

RHS zone labels (H1–H7) are not localized — they are an English standard recognized internationally. USDA zone numbers are numeric. These do not require translation.

Seasonal highlights season labels

Season labels are merchant-entered block titles (each Season block's title setting), not locale keys. Translate them per market with Shopify's content translation tools (e.g. Translate & Adapt).

Curl Cheat-Sheet

bash

# Verify Event JSON-LD on a plant product page (requires both planting date metafields)
curl -s "https://your-store.myshopify.com/products/your-plant-handle" \
  | grep -A 10 '"@type":"Event"'

# Check the care conditions section renders on its page
curl -s "https://your-store.myshopify.com/pages/care-conditions" \
  | grep -c 'care-conditions'

# Verify seasonal-highlights section is on homepage
curl -s "https://your-store.myshopify.com" \
  | grep -c 'seasonal-highlights'

# Check preset-talamh.css is linked
curl -s "https://your-store.myshopify.com" \
  | grep 'preset-talamh'

Deployment Checklist

Before going live with the Talamh preset:

[ ] settings.preset set to talamh in Theme settings
[ ] At least 4 products have uisce_talamh.hardiness_zone_min populated
[ ] Planting calendar page exists with page.planting-calendar template, handle planting-calendar; the 12-month grid renders with the current month marked
[ ] Care conditions page exists with page.care-conditions template, handle care-conditions; at least 3 care-conditions-card blocks with non-empty content
[ ] Event-calendar section layout is set to planting_zones (the schema default is default, the Timeline layout)
[ ] planting_start_date and planting_end_date date metafields populated on plant products (both required for Event JSON-LD); planting_window is optional display text
[ ] Seasonal highlights section has at least 2 season blocks
[ ] ARIA grid attributes present on planting calendar (run diagnostic snippet)
[ ] aria-current="date" on current month column
[ ] Event JSON-LD appears on plant product pages (curl check above)
[ ] preset-talamh.css linked in page head
[ ] Color contrast passes WCAG AA on seasonal tinting sections (check with axe)
[ ] Header menu includes "Planting Calendar" and "Plant Care" links

Support pack last updated: 2026-08-18 (#28 Tier B pass — zone coverage chips)

Talamh Preset Support Pack ​

FAQ ​

Q: The planting calendar grid is not rendering correctly on mobile. ​

Q: The hardiness zone chips show the wrong zones. ​

Q: Hardiness zone badges are not showing. ​

Q: Seasonal highlights tabs are not switching. ​

Q: The Event JSON-LD is missing or malformed. ​

Decision Tree: "Why is my planting calendar empty?" ​

Validator Interpretation ​

"Lighthouse: planting-calendar has accessibility warning on grid pattern" ​

"axe: color-contrast on planting calendar text fails WCAG AA" ​

"Google Search Console: Event structured data has missing required field" ​

Console Diagnostic Snippet ​

Accessibility Diagnostic ​

Planting calendar ARIA grid check ​

Hardiness zone badge check ​

Localization Notes ​

Planting calendar month names ​

Hardiness zone labels ​

Seasonal highlights season labels ​

Curl Cheat-Sheet ​

Deployment Checklist ​