Skip to content
ShopifyRule: listitem•Reviewed Oct 2026

Wrap all li elements inside parent ul or ol containers in Shopify

Every `<li>` element must be directly contained within a parent `<ul>` or `<ol>`.

What's wrong

Orphaned `<li>` elements outside of list tags violate HTML grammar and break accessibility semantics.

Who it affects

Screen readers cannot announce 'List of X items' or announce the position of the item in the list.

How to fix on Shopify

Verify Liquid loops rendering `<li>` tags are surrounded by `<ul>` and `</ul>` outside the `for` loop.

Code example

Problematic Code
LIQUID
{% for link in linklists.main-menu.links %}
  <li class="menu-item"><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
Recommended Accessible Code
LIQUID
<ul class="menu-list">
  {% for link in linklists.main-menu.links %}
    <li class="menu-item"><a href="{{ link.url }}">{{ link.title }}</a></li>
  {% endfor %}
</ul>

How to check your fix

Inspect each `<li>` element in DevTools and confirm its immediate parent is `<ul>` or `<ol>`.

Check if your site has this issue

Scan any public store page free against WCAG 2.2 AA in 30 seconds.

Your session has ended

Sign in again to carry on. Anything you typed on this page is kept.

Signed in another way? Use another method (opens a new tab)