How to fix list on Shopify

Steps for Shopify

1. In your Shopify Admin, go to Online Store → Themes → click the '...' (Actions) menu next to your active theme → Edit code.
2. The most common list errors live in navigation and footer snippets. Open sections/header.liquid (or snippets/navigation.liquid) and locate any `<ul>` used for the nav menu — ensure every direct child is `<li>`.
3. Open sections/footer.liquid and repeat the check for footer link lists.
4. For product feature bullets, open sections/product-template.liquid (or the relevant product section file) and confirm `<ul>`/`<ol>` contains only `<li>` children.
5. If your theme uses a mega-menu or third-party navigation app, check that app's own settings or custom HTML blocks for the same pattern.
6. Save each file, then use the Shopify Theme Preview to verify appearance, and re-run the axe browser extension to confirm no remaining list violations.

What is list?

HTML has strict rules about how lists must be structured. An unordered list (`<ul>`) or ordered list (`<ol>`) should contain only `<li>` (list item) elements as direct children — nothing else. Likewise, every `<li>` must live inside a `<ul>`, `<ol>`, or `<menu>` element. A "list" violation means your page has markup that breaks these rules: for example, a `<div>` or `<p>` placed directly inside a `<ul>`, bare `<li>` tags floating outside any list container, or `<li>` elements nested inside each other without a proper parent. These mistakes are often invisible to sighted visitors, but they create a broken experience for users who rely on assistive technology such as screen readers.

Screen readers (used by roughly 7 million Americans) use list structure to announce "list of 5 items" and let users jump between items quickly. Broken list markup confuses this navigation, causing screen reader users to miss navigation menus, product feature lists, size guides, and checkout steps — directly costing you customers and raising legal exposure under ADA, Section 508, and the European Accessibility Act. Google also uses semantic HTML to understand page structure; malformed lists can weaken how well your navigation and content are parsed. Because courts have increasingly applied ADA Title III to e-commerce websites, incorrect accessibility markup is a genuine legal risk, not just a best-practice issue.

See the complete List guide for every platform and the full background.