Interaction, SEO and release acceptance
Validate keyboard access, readable output and recoverable releases on actual module data.
Help overlays and dismissible dialogs
Keep ordinary help links before enhancing a global trigger into a dialog. Handle opening, closing, Escape and focus return together, keeping phone purchase controls accessible.
Data and dependencies
- A native dialog with an accessible heading and close button.
- Pass the actual trigger and dialog elements.
Interaction logic
- Open on user action and restore focus on close.
- Respect motion preferences and modal interaction boundaries.
Example code · assets/ww-help-dialog.js
export function bindHelpDialog(trigger, dialog) {
let returnFocus;
trigger.addEventListener('click', () => {
if (dialog.open) return;
returnFocus = document.activeElement;
dialog.showModal();
});
dialog.querySelector('[data-close]').addEventListener('click', () => dialog.close());
dialog.addEventListener('close', () => returnFocus?.focus());
}
// Supply a native <dialog> with an accessible heading and type=button close control.
// Keep ordinary help and contact links available without JavaScript.
// Do not show a promotion automatically over a mobile buying control.
Acceptance checks
- Test Tab, Escape, touch and zoom.
- Confirm the main heading and purchase entry remain usable.
The function requires native dialog markup and ordinary help links. It does not collect visitor information.
Official documentation
WESWOO guides
Readable HTML, canonicals and product markup
Check visible model, price, availability and policy facts before structured data. Generate from the actual product object and avoid duplicate entities or invented ratings and offers.
Data and dependencies
- Actual product/article objects and the page canonical.
- Match sources, market, variants and visible content.
Interaction logic
- Compare selected-variant output with declared facts.
- Manage filtered URLs under the actual crawl/index policy.
Example code · snippets/ww-product-schema.liquid
{% if product != blank %}
<script type="application/ld+json">
{{ product | structured_data }}
</script>
{% endif %}
Acceptance checks
- Inspect initial HTML and the rendered page.
- Check one consistent main entity, unavailable items and market changes.
If the theme already emits markup, update it instead of adding a duplicate. The fragment belongs to a product template, not this knowledge page.
From static checks to release and recovery
Retain source, lockfiles and data fixtures before applicable static checks. After preview acceptance, verify production and recovery by market across product, cart and checkout handoff.
Data and dependencies
- Installed theme/framework versions and build scripts.
- Approved preview environment, variables and recovery target.
Interaction logic
- Run theme checks and Headless builds separately.
- Redeploy Oxygen variable changes and verify dependencies after recovery.
Example code · project-verification.txt
# From a Shopify theme project, before preview acceptance:
shopify theme check --path .
git diff --check
# From a Headless project whose package.json defines these scripts:
npm run typecheck
npm run build
# After static checks: preview each market and recheck after a version switch.
# Retain the exact commit, lockfile, environment and recovery target.
Acceptance checks
- Check phone, tablet, desktop and applicable languages.
- Retain real URLs, outcomes, sources and before/after hashes.
Static checks and example-browser tests do not establish installation acceptance in a merchant store. Validate the actual environment before release.
Official documentation
Implementation references
WESWOO guides
Read it, integrate it, verify it
- Choose a module and confirm the data contract.
- Connect the fragment to the current theme or framework.
- Check real variants, markets and recovery states.
Examples target Shopify Online Store 2.0 themes. Headless has separate data and version boundaries. Integrate fragments with actual fields, theme components and locale files.
Architecture references
Original educational examples with Shopify documentation and pinned upstream references. Follow the applicable license when adopting repository code.
References checked 2026-11-12