Skip to main content

Shopify fix guide

Fix Heading structure problems on Shopify

Headings create an outline; random levels harm navigation.

This page ties the generic issue to how it usually shows up in Shopify markup and tooling, then walks you through a fix and verification loop.

Verify on a live URL

Scan, fix, deploy, then rescan the same address to compare reports.

Main issue guide: Heading structure problems

At a glance

Instructional

Outline users navigate

Increase heading levels by one where possible; avoid picking tags for font size alone.

Where this comes from on Shopify

Section headings in Liquid loops using the wrong level; blog and policy templates pasted from docs.

What this issue means

Why structure matters

Screen reader users jump by headings. Skipping from h1 to h3 breaks expectations; multiple h1s can be acceptable if scoped correctly.

How to fix on Shopify

In Shopify, prioritize theme Liquid and section JSON: product cards, cart drawers, and app embeds. Some issues need a theme developer or app vendor; capture the public report link when you open a ticket.

How to fix

Use levels in order for the outline; style via CSS instead of picking headings for size.

Wrap repeated sections in landmarks (header, nav, main, footer) to aid navigation.

Common mistakes on Shopify

  • Section titles always `h2` regardless of depth.
  • Policy pages pasted with skipped levels.
  • Editing checkout (limited) vs theme—know which surface you can change.
  • Forgetting to test accelerated/mobile themes.

How to verify the fix

  1. Preview the theme or use a development theme URL the scanner can reach.
  2. Test cart and collection templates if that is where the issue appeared.
  3. Rerun the scan after theme deploy; keep before/after report URLs.

Related: 1.3.1 Info and Relationships.

Same issue on other platforms

Guides

Next steps

TestAccessibility · Shopify fix · localhost:3001