# Heading Structure on Collection and Product Pages: A Storefront Guide Source: https://storefronta11y.com/blog/2026-10-27-heading-structure-collection-pages-storefront.html Reviewed October 27, 2026 Headings are how screen reader users navigate a store. One H1, logical order, and headings that describe content instead of styling text. How to audit your templates. ## Headings as a map Screen reader users navigate long pages by pulling up a list of headings and jumping between them, the way sighted shoppers scan visually. On a collection page with eighty products, that heading list is the difference between a usable store and an endurance test. If product names are not headings, or if the page jumps from an H1 to H4 styled text and back, the map is broken even when the page looks perfectly organized to a sighted reviewer. Visual hierarchy and heading hierarchy are different systems that must be made to match. The rules are simple to state. Each page gets one H1 that names the page: the collection name, the product name, the article title. Heading levels then descend in order without skipping, H2 for major sections, H3 for subsections and usually for product names within a listing. Text should only be a heading if it actually heads content. A price, a promotional slogan, or a button styled large is not a heading, and marking it as one pollutes the map with landmarks that lead nowhere. ## Collection pages: the common failures Themes frequently make every product card title an H2, which sounds reasonable until a page holds sixty of them under no grouping structure, or worse, make the collection name an H2 beneath a promotional banner carrying the H1. Filter and sort regions often lack headings entirely, so a screen reader user lands in a field of controls with no announced context. A better pattern is consistent across stores: H1 for the collection, H2 for the product listing region and for filters, and product titles at H3 within the listing. The exact levels matter less than order, consistency, and restraint. Banners and editorial blocks inserted into collections create the sneakiest problems, because marketing sections arrive with their own heading levels chosen for looks. A mid page campaign block with an H1 styled headline is a second page title in the middle of the map. When you add content sections to a collection template, set their heading level by position in the structure, not by desired font size. Size is a CSS decision. Level is an architecture decision, and confusing them is the root of nearly every heading audit finding. ## Product pages and the sections below the fold A product page should carry the product name as H1, then H2s for its real sections: description, details or specifications, shipping and returns, reviews. Accordions complicate this because their triggers are often buttons styled as headings or headings containing buttons, and only some patterns work well with assistive technology. The heading and button relationship in an accordion should follow an established accessible pattern rather than a theme improvisation, and the heading level of accordion titles should sit one level below the section they belong to. Reviews bring user generated heading chaos when review widgets inject their own structure, sometimes an H1 inside the widget. You cannot always control a widgets markup, but you can choose widgets with sane output, place them at a consistent point in the structure, and note their heading behavior in your audit. The same applies to related products sections, which are product listings in miniature and should reuse the collection pattern rather than inventing a new one. ## Auditing with a headings list Audit by generating the heading outline, not by reading the page. Browser tools and screen readers can list every heading in order. Print that list for your homepage, a collection, a product page, a blog post, and your cart, and read it as a table of contents for a book you have never seen. If the outline reads coherently, with one title, ordered sections, and no slogans or prices posing as chapters, the structure works. Every oddity in that list is a precise, fixable template note. Fixes belong in templates, not page by page. Correct the level once in the collection and product templates and every page improves at once, which makes heading work one of the best value items in an accessibility backlog. Record the intended structure per template in your theme documentation, and recheck the outline after redesigns and app installs, because new sections arrive with their own heading habits. A store whose headings read like a clean contents page is a store a screen reader user can actually shop. ## Related reading If this topic is useful, these earlier guides go deeper on connected questions: [Reduced Motion on Storefronts: Respecting prefers-reduced-motion](https://storefronta11y.com/blog/2026-10-26-reduced-motion-storefront-animations.md), [Accessible Carousels and Sliders: Pause, Controls, and Focus Rules](https://storefronta11y.com/blog/2026-10-26-accessible-carousel-sliders-storefront.md), and [Touch Target Sizes on Mobile Storefronts: Small Buttons Lose Sales](https://storefronta11y.com/blog/2026-10-25-touch-target-sizes-mobile-storefront.md). ## Frequently asked questions ### How many H1 headings should a product page have? One: the product name. Additional H1s from banners, widgets, or promotional blocks confuse the page outline that screen reader users navigate by. Sections below should descend in order from H2. If a widget injects its own H1, note it in your audit and consider it when choosing or configuring that widget. ### Should product names in a collection be headings? Yes, usually at H3 under an H2 for the product listing, with the collection name as H1. That structure lets screen reader users pull a list of products and jump directly. What matters most is a consistent, ordered pattern across all listing pages, not one magic level. ### Can I use a heading just to make text bigger? No. Heading levels describe structure, and screen readers present them as a navigation map. Use CSS for size. Marking slogans, prices, or calls to action as headings pollutes the outline and misleads users about where sections begin. Keep headings for text that genuinely heads content. ### How do I check my stores heading structure? Use a browser headings tool or a screen reader to list headings in order for each main template, then read the list as a table of contents. Look for a single H1, no skipped levels, and no styled text posing as headings. Fix problems in the template so every page of that type improves at once.