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 uses overflow-x: auto on mobile for horizontal scroll. If it is not scrolling or rendering:

Check whether a parent container has overflow: hidden set in custom CSS — this will prevent horizontal scroll on the calendar grid.
On very narrow devices (<320px), some calendar columns may be very narrow. This is a known display constraint of 12-month grids on small screens.

Q: Hardiness zone filter shows incorrect zones or is not filtering.

A: The zone filter reads zone values from each calendar block's minimum_zone setting. Check:

Are zone values consistent? RHS uses H1–H7; USDA uses numbers 1–13. Mixing systems in the same calendar will show both filter sets — this is correct behaviour but may look confusing.
The zone filter button for "All zones" (no filter) is always present. If the filtered view shows no rows, the selected zone may be more restrictive than all your plant blocks.

Q: Plant care cards are not showing hardiness zone badges.

A: The hardiness zone badge reads from product.metafields.uisce_talamh.hardiness_zone_min when a product is linked to the block, or from the block's hardiness_zone setting otherwise. Check:

Is the metafield definition created in Shopify Admin → Settings → Custom data → Products?
Is the niche_metafield_namespace setting on the Plant Care section set to uisce_talamh?
Is the metafield value populated on the linked product?

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 season block is showing, verify there are at least 2 blocks with different season values in the seasonal-highlights section — a single-tab layout does not show the tab navigation.

Q: The Event JSON-LD for the planting calendar is malformed.

A: This was F-CROSS-AI-POSTDEPLOY-05 (Talamh) — Event JSON-LD missing endDate and using non-ISO planting_window values. To fix:

Populate uisce_talamh.planting_window metafield values in ISO 8601 format: YYYY-MM or YYYY-MM-DD (e.g., 2026-03 for March start, 2026-05 for May end).
Use -- separator for range: 2026-03--2026-05 (handled by the provisioner; manual entry must follow this format).

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

Symptom: Planting calendar renders table headers but no rows

  -> Is the event-calendar section layout set to 'planting_zones'?
    -> Check in theme editor: Sections → Event calendar → Layout setting
    -> If set to 'calendar': change to 'planting_zones'
    -> If set to 'planting_zones': Continue

  -> Are there any blocks added to the event-calendar section?
    -> Click 'Add block → Plant entry' and add at least one plant row
    -> If blocks exist: Continue

  -> Are the sow/plant/harvest month fields populated on each block?
    -> Months are comma-separated numbers 1–12 (e.g., "3,4,5" for March/April/May)
    -> If blank: populate at least one month field
    -> If populated: Continue

  -> Is the zone filter hiding all rows?
    -> Try 'All zones' filter option
    -> If rows appear: your block's minimum_zone is more restrictive than the selected zone

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 — check that the section heading is wired as the grid's accessible name via aria-labelledby

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

This is F-CANARY-NICHE-AXE-01/02 from the Wave 3 canary. 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.
This is tracked as a Phase 7 polish item (F-CANARY-NICHE-AXE-01/02).

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

Required Event fields: name, startDate. Optional but recommended: endDate, location, organizer. Check your calendar block has name (plant name) and startDate (in ISO 8601 format) populated.

Console Diagnostic Snippet

(function talamhDiagnostic() {
  'use strict';
  const plantingCal = document.querySelector('[data-planting-zones]');
  const r = {
    preset: document.querySelector('meta[name="uisce-preset"]')?.content ?? 'unknown',
    plantingCalendar: {
      present: !!plantingCal,
      rowCount: document.querySelectorAll('[data-plant-row]').length,
      activeZoneFilter: document.querySelector('[data-zone-filter].active')?.dataset?.zoneFilter ?? 'all',
      gridRole: document.querySelector('[role="grid"]') ? 'grid role present' : 'MISSING',
      currentMonthMarked: !!document.querySelector('[aria-current="date"]'),
    },
    plantCare: {
      present: !!document.querySelector('.plant-care'),
      cardCount: document.querySelectorAll('.plant-care__card').length,
      hardinessZoneBadges: document.querySelectorAll('.hardiness-zone-badge').length,
    },
    seasonalHighlights: {
      present: !!document.querySelector('.seasonal-highlights'),
      layout: document.querySelector('.seasonal-highlights')?.dataset?.layout ?? 'unknown',
      blockCount: document.querySelectorAll('.seasonal-highlights__block').length,
    },
    presetCSS: !!document.querySelector('link[href*="preset-talamh"]'),
    nicheNamespace: document.querySelector('[data-niche-namespace]')?.dataset?.nicheNamespace ?? 'not found',
  };
  console.group('%cTalamh Diagnostic Report', 'color:#2d6a4f;font-weight:bold;font-size:14px');
  console.table(r.plantingCalendar);
  console.log('Plant care:', r.plantCare);
  console.log('Seasonal highlights:', r.seasonalHighlights);
  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.

Plant care hardiness badge check

const badges = document.querySelectorAll('.hardiness-zone-badge');
console.log(badges.length + ' hardiness zone badges found');
badges.forEach((b, i) => {
  console.log('Badge', i + 1, {
    text: b.textContent.trim(),
    hasAriaLabel: !!b.getAttribute('aria-label'),
  });
});

Localization Notes

Planting calendar month names

Month labels in the planting calendar are generated from Liquid date filter with format %b (abbreviated month name in the current locale). No additional locale keys are needed for month names — Shopify's date filter handles localization automatically.

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 ("Spring", "Summer", "Autumn", "Winter") are controlled by sections.seasonal_highlights.season_* locale keys, available in all 50 locales.

Curl Cheat-Sheet

bash

# Verify Event JSON-LD on planting calendar page
curl -s "https://your-store.myshopify.com/pages/planting-calendar" \
  | grep -A 10 '"@type":"Event"'

# Check uisce_talamh namespace on plant care page
curl -s "https://your-store.myshopify.com/pages/plant-care" \
  | grep 'data-niche-namespace'

# 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.talamh template, handle planting-calendar; at least 4 plant rows render
[ ] Plant care page exists with page.plant-care.talamh template, handle plant-care; at least 3 plant-care-card blocks with non-empty content
[ ] Event-calendar section layout is set to planting_zones (not default calendar)
[ ] planting_window metafield values are in ISO 8601 format (YYYY-MM or YYYY-MM-DD)
[ ] 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 planting calendar page (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-05-03 (Phase 06.10 closeout)

Talamh Preset Support Pack ​

FAQ ​

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

Q: Hardiness zone filter shows incorrect zones or is not filtering. ​

Q: Plant care cards are not showing hardiness zone badges. ​

Q: Seasonal highlights tabs are not switching. ​

Q: The Event JSON-LD for the planting calendar is 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 ​

Plant care hardiness badge check ​

Localization Notes ​

Planting calendar month names ​

Hardiness zone labels ​

Seasonal highlights season labels ​

Curl Cheat-Sheet ​

Deployment Checklist ​