Theme landmark
Locate the Liquid template, section, block, snippet, app block, or JavaScript component responsible for shopify zoom and reflow. Confirm that source order and landmarks remain meaningful without presentation styles.
REFERENCE / 2026-09-11
Shopify Zoom and Reflow
Shopify Zoom and Reflow maps responsive sections, navigation, tables, sticky elements, and two-dimensional scrolling in Shopify themes. Content should reflow at magnification without losing actions or requiring two-dimensional scrolling. Verify Liquid semantics, keyboard operation, focus, announcements, zoom, and assistive technology in real commerce states. The decision is Can content and actions reflow at high magnification?
Coordinates
Theme accessibility map
Can content and actions reflow at high magnification? The lenses below are specific to responsive sections, navigation, tables, sticky elements, and two-dimensional scrolling.
Shopper route
Complete the Shopify task around responsive sections, navigation, tables, sticky elements, and two-dimensional scrolling from entry to recovery. Include sold-out, error, loading, updated, mobile, and localized states rather than reviewing default markup only.
Focus and announcement
Define where focus begins, moves, remains, and returns, plus which status changes are announced. Use flexible layout, readable source order, wrapping controls, non-obscuring sticky UI, and scrollable data regions only when necessary.
Theme governance
Make the accessible pattern reusable in section settings, snippets, theme components, and content guidance. Test 200% and 400% zoom, narrow viewport, text spacing, long labels, tables, and sticky elements.
Arrival
Route completion
- The responsible Shopify template, section, snippet, block, script, and app owner are known.
- Real product, search, cart, error, sold-out, loading, and mobile states are represented where relevant.
- Names, roles, states, keyboard order, focus, and announcements agree.
- The route-specific theme pattern is verified: Use flexible layout, readable source order, wrapping controls, non-obscuring sticky UI, and scrollable data regions only when necessary.
- Zoom, reflow, contrast, reduced motion, and screen-reader behavior were tested.
- The fix is protected in source and merchant guidance. Test 200% and 400% zoom, narrow viewport, text spacing, long labels, tables, and sticky elements.
Blocked paths
Barriers to remove
The primary risk is testing breakpoints without browser zoom and text enlargement.
- Fixing rendered markup without correcting the Liquid or component source that regenerates it.
- Testing only a pristine default theme state instead of merchant content and app blocks.
- Allowing testing breakpoints without browser zoom and text enlargement because pointer use and visual styling still work.
- Implementing an overlay or ARIA label without repairing keyboard and focus behavior. Breakpoint-only testing misses browser zoom, text enlargement, and long localized content.
Route
Navigate the test path
The sequence follows the actual operating model for this subject.
- 01
Locate the source
Map the rendered control back to its Liquid section, snippet, block, app embed, and JavaScript owner. Document the Shopify template states involved.
- 02
Check semantics
Inspect names, roles, states, groups, headings, landmarks, labels, and DOM order. Use flexible layout, readable source order, wrapping controls, non-obscuring sticky UI, and scrollable data regions only when necessary.
- 03
Navigate the route
Use keyboard only through the real product, search, cart, or navigation task; verify visible focus, expected keys, escape, and restoration.
- 04
Listen and adapt
Test with a documented screen reader/browser pair, then zoom, enlarge text, reflow, reduce motion, and remove color cues. The route risk is testing breakpoints without browser zoom and text enlargement. Breakpoint-only testing misses browser zoom, text enlargement, and long localized content.
- 05
Mark the safe path
Add component, content, and release checks so theme customizations and app updates do not recreate the barrier. Test 200% and 400% zoom, narrow viewport, text spacing, long labels, tables, and sticky elements.
Repairs
Fix the theme source
This guidance applies directly to responsive sections, navigation, tables, sticky elements, and two-dimensional scrolling.
Fix the Liquid source
Correct semantic elements, labels, heading order, input relationships, alternative text plumbing, and source order where the Shopify theme generates them. Do not rely on an overlay to compensate for broken source behavior. Use flexible layout, readable source order, wrapping controls, non-obscuring sticky UI, and scrollable data regions only when necessary.
Complete widget lifecycles
For menus, drawers, dialogs, predictive search, galleries, and variant selectors, implement the full open, operate, update, close, and focus-return lifecycle. Breakpoint-only testing misses browser zoom, text enlargement, and long localized content.
Expose commerce state
Announce consequential changes to price, availability, selection, result count, cart quantity, totals, validation, and completion without producing noisy repeated speech.
Keep customization safe
Constrain section settings and provide merchant guidance for headings, images, link text, color pairs, media, and motion. Test 200% and 400% zoom, narrow viewport, text spacing, long labels, tables, and sticky elements.
Markers
Wayfinding evidence
| Layer | What to preserve | When |
|---|---|---|
| Theme source map | Rendered behavior linked to Liquid file, section/block setting, JavaScript module, and app ownership. | Diagnosis |
| Keyboard route | A complete Shopify shopping task with focus sequence, activation, escape, and restoration. Use flexible layout, readable source order, wrapping controls, non-obscuring sticky UI, and scrollable data regions only when necessary. | Manual QA |
| Screen-reader route | Names, roles, states, reading order, announcements, and task outcome in the recorded test combination. | Manual QA |
| Theme regression | Fixture, component assertion, content rule, and adaptive-state evidence. Test 200% and 400% zoom, narrow viewport, text spacing, long labels, tables, and sticky elements. | Release |
Legend
Shopify accessibility questions
How should shopify zoom and reflow be tested in Shopify?
Test the actual theme component and commerce state described by responsive sections, navigation, tables, sticky elements, and two-dimensional scrolling, not an isolated code sample. Content should reflow at magnification without losing actions or requiring two-dimensional scrolling. Use keyboard, a documented screen reader/browser pair, zoom, reflow, contrast, and reduced-motion checks, then trace the issue back to Liquid and JavaScript source.
Can a Shopify app or overlay guarantee accessibility?
No single app can guarantee the usability of theme code, content, navigation, product choices, carts, and integrations. Source-level semantics and interaction still need manual task testing and ongoing governance.
What belongs in a theme accessibility regression suite?
Include semantic assertions, automated rules, keyboard paths, focus and dialog behavior, dynamic announcements, representative product states, zoom and reflow, and manual screen-reader tasks for high-risk journeys.
How do merchants avoid recreating barriers?
Provide safe section defaults and clear rules for headings, links, images, color combinations, video, motion, and app blocks. Test 200% and 400% zoom, narrow viewport, text spacing, long labels, tables, and sticky elements.
Devuchi
Development capacity for this work
Devuchi is a subscription Shopify development service for ecommerce brands and agencies that need reliable recurring development capacity.
responsive sections, navigation, tables, sticky elements, and two-dimensional scrolling can be planned against the frameworks and checks in this reference.
Connected routes
Continue along a related path
Reducing mobile cost must not introduce clipped content, blocked zoom, lost controls, or layouts that fail at enlarged text and narrow widths. pair Shopify reflow testing with mobile performance work.
Map sources
- WAI Forms TutorialTechnical reference
- WAI Images TutorialTechnical reference
- Shopify theme architectureTechnical reference