Gaoth Preset Support Pack

Diagnostic and troubleshooting reference for the Gaoth pets preset — feeding chart, care guide, shop by category, and pet metafields.

FAQ

Q: The feeding chart is empty — no rows appear.

A: The feeding chart populates rows from product metafields, not section blocks. Check:

Do your products have the uisce_gaoth.feeding_amount metafield defined and populated? If the metafield is defined but blank, the row will not appear.
Is the niche_metafield_namespace setting on the Feeding Chart section correct? Default is uisce_gaoth. If you changed it, verify it matches your actual metafield namespace.
Is a collection selected in the section's "Product collection" setting? The feeding chart iterates only the products in that selected collection — with no collection selected, the table body renders empty on the storefront (an empty-state hint appears only in the theme editor).

Q: The species/lifestage filter buttons are not working.

A: The filter is client-side JavaScript driven by niche-gaoth.js. Check:

Is the module active? Click a filter option: its aria-selected attribute should flip to "true" and the hidden announcer ([data-feeding-chart-announce]) text should update. The module loads via a dynamic import from niche-renderer.js — there is no separate <script> tag or global to look for. The diagnostic snippet below reports this as moduleActive.
Is there a JavaScript error in the console when you click a filter button?
The filter uses aria-hidden="true" to hide rows — verify the rows have data-species and data-lifestage attributes populated from the metafield values.

Q: Aria-live announcement reads in English even on a non-English locale.

A: Older theme versions had hardcoded English strings in the filter's aria-live announcement (niche-gaoth.js:applyFilter()). If you see English announcements on a non-English locale, update to the latest theme version, which localizes these strings.

Q: The care guide accordion is not expanding.

A: The care guide uses native HTML <details>/<summary> disclosure — no JavaScript. If it is not expanding:

Check browser compatibility: <details> is supported in all modern browsers. Older IE is not supported (this is an OS 2.0 theme).
Check whether a global CSS rule is overriding display on <details> or <summary>.
Check that the block content is not empty — empty blocks render a <details> with an empty <summary> which may appear broken.

Q: Shop by category images are not showing.

A: Each shop-by-category tile block has an image picker. In the theme editor, navigate to the Shop by category section, click each tile block, and upload/select an image. The section does not pull images from product metafields — each tile image is manually configured.

Decision Tree: "Why isn't my feeding chart showing data?"

Symptom: Feeding chart renders but has no rows

  -> Is the section added to the page?
    -> No: Add Feeding chart section to your page template in the theme editor
    -> Yes: Continue

  -> Is niche_metafield_namespace set correctly on the section?
    -> Check the value (default: uisce_gaoth). Does it match your metafield namespace?
    -> If wrong: update the section setting
    -> If correct: Continue

  -> Do your products have uisce_gaoth.feeding_amount populated?
    -> Check in Shopify Admin → Products → select a product → scroll to Metafields
    -> If blank: populate the metafield on at least one product
    -> If populated: Continue

  -> Is a collection selected in the section's "Product collection" setting?
    -> The chart iterates only the selected feed collection. If none is selected: pick one.
    -> If selected: are the products with feeding_amount actually IN that collection,
       published and visible? Draft products are excluded.

  -> Still empty?
    -> Run the console diagnostic snippet below; check 'allRowCount'
    -> If 0: product Liquid loop is filtering products — check theme code

Validator Interpretation

"Lighthouse: Feeding chart table has Accessibility score warning"

The feeding chart uses <th scope="col"> and <th scope="row"> for table semantics. A Lighthouse or axe warning about table headers usually means a custom CSS rule is hiding the <th> elements visually but leaving them in the DOM. Check for any custom CSS targeting .feeding-chart th.

"axe: aria-live region is missing required attributes"

The feeding chart's filter announcement region is a visually-hidden <div aria-live="polite" data-feeding-chart-announce> — a polite live region with no role attribute. If axe flags a live-region issue, check that this <div> is present in the rendered feeding-chart HTML and that no custom section code has removed or overridden its aria-live attribute.

"Theme check: uisce_gaoth namespace not recognized"

Theme Check does not validate metafield namespace strings — this is not a theme-check error. If you see "namespace not recognized" in another context (Shopify Admin), it means the metafield definition has not been created. Create it via Shopify Admin → Settings → Custom data → Products.

Console Diagnostic Snippet

(function gaothDiagnostic() {
  'use strict';
  const feedingChart = document.querySelector('.feeding-chart');
  const r = {
    preset: document.body.className.match(/preset-([a-z]+)/)?.[1] ?? 'unknown',
    feedingChart: {
      present: !!feedingChart,
      rowCount: document.querySelectorAll('.feeding-chart tbody tr:not([aria-hidden="true"])').length,
      allRowCount: document.querySelectorAll('.feeding-chart tbody tr').length,
      filterSpeciesActive:
        document.querySelector("[data-feeding-chart-listbox='species'] [role='option'][aria-selected='true']")?.dataset
          ?.species ?? 'none',
      filterLifestageActive:
        document.querySelector("[data-feeding-chart-listbox='lifestage'] [role='option'][aria-selected='true']")
          ?.dataset?.lifestage ?? 'none',
      announcer: document.querySelector('[data-feeding-chart-announce]')?.textContent?.trim() ?? 'not found',
    },
    careGuide: {
      present: !!document.querySelector('.care-guide'),
      accordionCount: document.querySelectorAll('.care-guide details').length,
    },
    shopByCategory: {
      present: !!document.querySelector('.shop-by-category'),
      tileCount: document.querySelectorAll('.shop-by-category__item').length,
    },
    moduleActive: (function () {
      // Functional probe: the module loads via dynamic import (no global, no script tag).
      // Click the first filter option — if the module is wired, aria-selected flips to true.
      const opt = document.querySelector("[data-feeding-chart-listbox] [role='option']");
      if (!opt) return 'no filter options';
      opt.click();
      return opt.getAttribute('aria-selected') === 'true';
    })(),
    presetCSS: !!document.querySelector('link[href*="preset-gaoth"]'),
  };
  console.group('%cGaoth Diagnostic Report', 'color:#5c7a3e;font-weight:bold;font-size:14px');
  console.table(r.feedingChart);
  console.log('Care guide:', r.careGuide);
  console.log('Shop by category:', r.shopByCategory);
  console.log('niche-gaoth.js active:', r.moduleActive);
  console.log('Preset CSS:', r.presetCSS);
  console.groupEnd();
  return r;
})();

Expected when working: rowCount > 0, moduleActive true, presetCSS true. The announcer text is empty until a filter is applied. Note the moduleActive probe clicks the first filter option and leaves that filter applied — reload the page to clear it.

Accessibility Diagnostic

Feeding chart table accessibility check

Run in DevTools console to verify table semantic structure:

(function checkFeedingChartA11y() {
  const table = document.querySelector('.feeding-chart table');
  if (!table) {
    console.warn('No feeding chart table found');
    return;
  }
  const colHeaders = table.querySelectorAll('th[scope="col"]');
  const rowHeaders = table.querySelectorAll('th[scope="row"]');
  const liveRegion = document.querySelector('[data-feeding-chart-announce]');
  console.log({
    colHeaders: colHeaders.length + ' column headers',
    rowHeaders: rowHeaders.length + ' row headers',
    liveRegionPresent: !!liveRegion,
    liveRegionPolite: liveRegion?.getAttribute('aria-live') === 'polite',
    caption: !!table.querySelector('caption'),
  });
})();

Expected: col headers > 0, row headers > 0, liveRegionPresent: true, liveRegionPolite: true.

Care guide disclosure accessibility check

// Check <details>/<summary> pattern in care guide
const details = document.querySelectorAll('.care-guide details');
console.log(details.length + ' care guide accordions found');
details.forEach((d, i) => {
  console.log('Item', i + 1, {
    hasSummary: !!d.querySelector('summary'),
    summaryText: d.querySelector('summary')?.textContent?.trim()?.slice(0, 50),
    isOpen: d.hasAttribute('open'),
  });
});

Localization Notes

Feeding chart locale keys

All feeding chart UI strings are in sections.feeding_chart.* namespace. Key strings that are localized: filter button labels, "all species" / "all lifestages" fallback, live-region announcement template, empty-state text. Verify all are present in your target locale file.

Care guide locale keys

The care guide's locale-managed strings are editor-facing only: the section and block names and the empty-state hint (sections.care_guide.empty.heading / sections.care_guide.empty.body, shown in the theme editor when no blocks are added). The section heading is a merchant-entered text setting, and block-level content (topic questions and answers) is merchant-entered text — none of it is managed by the locale system. The section has no subheading or disclaimer setting.

Curl Cheat-Sheet

bash

# Verify Product + additionalProperty JSON-LD on a pet food product
curl -s "https://your-store.myshopify.com/products/adult-dog-food" \
  | grep -A 10 '"@type":"Product"'
curl -s "https://your-store.myshopify.com/products/adult-dog-food" \
  | grep '"additionalProperty"'

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

# Verify the feeding-chart section renders on its own page — the feeding chart ships on the
# dedicated page.feeding-chart template, not on the care-guide page (use the handle of the
# page you assigned that template to)
curl -s "https://your-store.myshopify.com/pages/feeding-chart" \
  | grep -c 'feeding-chart'

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

Deployment Checklist

Before going live with the Gaoth preset:

[ ] settings.preset set to gaoth in Theme settings
[ ] At least 4 products have uisce_gaoth.feeding_amount and uisce_gaoth.pet_type populated
[ ] Feeding chart page created with the page.feeding-chart template; a feed collection selected in the section's "Product collection" setting; at least one row renders
[ ] Care guide page exists with page.care-guide template, handle pet-care-guide
[ ] Care guide has at least 2 species accordion entries with non-empty content
[ ] Shop by category section has at least 3 category tile blocks with images and collection links — the care-guide template ships this section without tile blocks, so add them in the theme editor or the section renders empty on the storefront
[ ] Species filter on feeding chart functions (run diagnostic snippet)
[ ] Aria-live region announces filter changes (test with screen reader or devtools)
[ ] Product + additionalProperty JSON-LD appears on pet food products (curl check above)
[ ] preset-gaoth.css linked in page head
[ ] Header menu includes pet-browsing navigation links
[ ] Care guide topic blocks populated (question + answer on each) — topic blocks are the section's only content blocks

Support pack last updated: 2026-05-03 (Phase 06.10 closeout)

Gaoth Preset Support Pack ​

FAQ ​

Q: The feeding chart is empty — no rows appear. ​

Q: The species/lifestage filter buttons are not working. ​

Q: Aria-live announcement reads in English even on a non-English locale. ​

Q: The care guide accordion is not expanding. ​

Q: Shop by category images are not showing. ​

Decision Tree: "Why isn't my feeding chart showing data?" ​

Validator Interpretation ​

"Lighthouse: Feeding chart table has Accessibility score warning" ​

"axe: aria-live region is missing required attributes" ​

"Theme check: uisce_gaoth namespace not recognized" ​

Console Diagnostic Snippet ​

Accessibility Diagnostic ​

Feeding chart table accessibility check ​

Care guide disclosure accessibility check ​

Localization Notes ​

Feeding chart locale keys ​

Care guide locale keys ​

Curl Cheat-Sheet ​

Deployment Checklist ​