Uisce

Appearance

Gaoth Preset Support Pack ​

Diagnostic and troubleshooting reference for the Gaoth pets preset — feeding chart, care guide, shop by pet, 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:

  1. 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.
  2. 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.
  3. Are there products in the store that are visible (not draft, not restricted to other channels)? The feeding chart reads from all published products.

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

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

  1. Is niche-gaoth.js loading? Run the diagnostic snippet below and check nicheGaothLoaded.
  2. Is there a JavaScript error in the console when you click a filter button?
  3. 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: This was F-CROSS-AI-POSTDEPLOY-01 (gaoth) — hardcoded English strings in niche-gaoth.js:applyFilter(). Fix shipped in Plan 06.10-18. If you see English announcements on a non-English locale, push the latest theme via scripts/push-presets.sh.

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:

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

Q: Shop by pet images are not showing. ​

A: Each shop-by-pet tile block has an image picker. In the theme editor, navigate to the Shop by pet 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

  -> Are the products published and visible?
    -> Draft products are excluded. Publish at least one product with feeding_amount set.

  -> Still empty?
    -> Run the console diagnostic snippet below; check 'feedingChartRows'
    -> 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 requires role="status" (or role="log"). If axe flags this, check the <span role="status"> element in the rendered feeding-chart HTML is present and has no conflicting role overrides from a custom section.

"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 ​

js
(function gaothDiagnostic() {
  'use strict';
  const feedingChart = document.querySelector('.feeding-chart');
  const r = {
    preset: document.querySelector('meta[name="uisce-preset"]')?.content ?? '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-species-filter].active')?.dataset?.speciesFilter ?? 'none',
      filterLifestageActive:
        document.querySelector('[data-lifestage-filter].active')?.dataset?.lifestageFilter ?? 'none',
      liveRegion: document.querySelector('[role="status"]')?.textContent?.trim() ?? 'not found',
    },
    careGuide: {
      present: !!document.querySelector('.care-guide'),
      accordionCount: document.querySelectorAll('.care-guide details').length,
    },
    shopByPet: {
      present: !!document.querySelector('.shop-by-pet'),
      tileCount: document.querySelectorAll('.shop-by-pet__tile').length,
    },
    nicheGaothLoaded:
      typeof window?.NicheGaoth !== 'undefined' || !!document.querySelector('script[src*="niche-gaoth"]'),
    presetCSS: !!document.querySelector('link[href*="preset-gaoth"]'),
    nicheNamespace: document.querySelector('[data-niche-namespace]')?.dataset?.nicheNamespace ?? 'not found',
  };
  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 pet:', r.shopByPet);
  console.log('niche-gaoth.js loaded:', r.nicheGaothLoaded);
  console.log('Preset CSS:', r.presetCSS);
  console.groupEnd();
  return r;
})();

Expected when working: rowCount > 0, nicheGaothLoaded true, presetCSS true.

Accessibility Diagnostic ​

Feeding chart table accessibility check ​

Run in DevTools console to verify table semantic structure:

js
(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('[role="status"]');
  console.log({
    colHeaders: colHeaders.length + ' column headers',
    rowHeaders: rowHeaders.length + ' row headers',
    liveRegionPresent: !!liveRegion,
    liveRegionRole: liveRegion?.getAttribute('role'),
    caption: !!table.querySelector('caption'),
  });
})();

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

Care guide disclosure accessibility check ​

js
// 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 ​

Care guide section-level strings: heading, subheading, and the disclaimer text (sections.care_guide.disclaimer_text). Block-level content (accordion headings and bodies) is merchant-entered text and is not managed by the locale system.

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 uisce_gaoth namespace on the care guide page
curl -s "https://your-store.myshopify.com/pages/pet-care-guide" \
  | grep 'data-niche-namespace'

# Verify feeding-chart section renders on the care guide page
curl -s "https://your-store.myshopify.com/pages/pet-care-guide" \
  | 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.species populated
  • [ ] Feeding chart section added to a page; at least one row renders
  • [ ] Care guide page exists with page.care-guide.gaoth template, handle pet-care-guide
  • [ ] Care guide has at least 2 species accordion entries with non-empty content
  • [ ] Shop by pet section has at least 3 species tiles with images and links
  • [ ] 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
  • [ ] Veterinary disclaimer block present in care guide

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

Built for the Shopify Theme Store.

© 2026 Uisce Theme