How to fix listitem on Shopify

Steps for Shopify

1. Go to Online Store → Themes → click the '…' menu next to your active theme → Edit code.
2. Use the search box (top-left of the code editor) to search for '<li' across all files to locate orphaned list items.
3. The most common locations are: 'sections/' files (e.g. header.liquid, footer.liquid, announcement-bar.liquid), 'snippets/' files, and 'layout/theme.liquid'.
4. In the offending file, find the bare `<li>` tag(s) and add a `<ul>` opening tag immediately before the first `<li>` and a `</ul>` closing tag after the last `</li>`.
5. If you use a page builder app (e.g. PageFly, GemPages, Shogun), open that app, find the block containing the list, and switch to its HTML/code editor view to wrap the items.
6. Click Save, then re-test with the axe browser extension.

<!-- ❌ WRONG: <li> with no list parent -->
<li>Free shipping over $50</li>
<li>30-day returns</li>

<!-- ✅ CORRECT: <li> items wrapped in <ul> -->
<ul>
  <li>Free shipping over $50</li>
  <li>30-day returns</li>
</ul>

<!-- ✅ CORRECT for navigation menus -->
<nav aria-label="Main">
  <ul>
    <li><a href="/shop">Shop</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

What is listitem?

In HTML, a list item (`<li>`) is only meaningful when it lives inside a list container — either an unordered list (`<ul>`) or an ordered list (`<ol>`). When a `<li>` tag appears on its own, without that parent wrapper, the HTML is technically invalid and breaks the expected structure. This often happens when a developer copies a navigation menu, product feature list, or footer links and accidentally removes the surrounding `<ul>` or `<ol>` tags, or when a theme or page-builder outputs `<li>` tags outside of a proper list container.

Screen readers used by blind and low-vision shoppers rely on correct list structure to announce items as "list of 5 items" and let users jump between them efficiently. An orphaned `<li>` breaks that experience — the screen reader may skip the item entirely or read it confusingly, making navigation menus, feature bullet points, and product lists unusable. This violates WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships), which is a Level A requirement — the lowest acceptable bar — meaning failing it creates real legal risk under laws like the ADA (US), AODA (Canada), and EAA (EU). Beyond legal exposure, an inaccessible store loses business from the estimated 1-in-5 shoppers who have a disability, and invalid HTML can subtly harm how search engines parse and index your page content.

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