How to fix empty heading on Shopify
Find every empty heading tag on your store and add meaningful, visible text to it — or remove the tag entirely if it serves no structural purpose.
Steps for Shopify
- Go to Online Store → Themes → Customize to open the theme editor.
- Navigate to the page reported (e.g. homepage, collection, product). Look for any 'Heading' or 'Text' sections/blocks that appear empty — they will show as blank in the editor canvas.
- Click the empty heading block in the left-hand section list, type meaningful text into the 'Heading' field, then Save.
- For headings inside custom Liquid templates, go to Online Store → Themes → (...) Edit code, open the relevant template file (e.g. sections/featured-collection.liquid), search for `<h1>`, `<h2>`, `<h3>` tags that have no text node between them, and either add text content or replace the tag with a semantically appropriate element.
- If you use a page-builder app (Shogun, PageFly, GemPages), open the page in that app's editor, select the empty Heading element, add text or delete the block, then republish.
- Verify with the axe DevTools browser extension on your live storefront.
<h2>Featured Collections</h2>
<!-- If text must be visually hidden but available to screen readers: -->
<h2>
<span class="sr-only">Featured Collections</span>
<!-- icon or decorative image here -->
</h2>
<!-- CSS for the sr-only class -->
<style>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>What is empty heading?
A heading tag (like `<h1>`, `<h2>`, `<h3>`, etc.) exists in your page's code but contains no readable text inside it. This can happen when a developer uses a heading tag purely for visual spacing, when a theme or page-builder leaves a placeholder heading behind, or when an icon or decorative image is placed inside a heading without any accompanying text. Screen readers announce headings to blind and low-vision shoppers as navigation landmarks — when a heading is empty, the screen reader either announces nothing or says something confusing like "heading, level 2" with no label, which breaks the shopper's ability to understand or navigate your page.
Empty headings directly violate WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships) and 2.4.6 (Headings and Labels), which are legal compliance benchmarks in many countries under laws such as the ADA (US), AODA (Canada), and EAA (EU). Beyond legal risk, screen-reader users rely on headings to jump quickly between sections — an empty heading wastes a navigation stop and destroys the logical outline of your page. Google also uses heading structure to understand page content hierarchy; empty or meaningless headings weaken your on-page SEO signals and can suppress keyword relevance. Finally, conversion suffers: assistive-technology users who encounter broken navigation are more likely to abandon your store.
See the complete Empty heading guide for every platform and the full background.
Not sure if your Shopify store has this?
Run a free SEOLZ audit — we’ll find empty heading and every other issue across your whole site.
Scan my site free