Inline, Accordion, or Modal: Choosing How to Display Your Size Guide

You've built an accurate size chart. Now comes a question that quietly shapes its effectiveness: how should it appear on the product page? The three common patterns — an always-visible inline table, a collapsible accordion, and a modal that opens on a trigger — each change how likely a shopper is to actually read the numbers before buying. And on mobile, where most apparel shopping happens, the tradeoffs get sharper.

This post breaks down each option, when to use it, and how to avoid the pitfalls that make a good chart go unread.

The Three Patterns at a Glance

Each row is a genuine tradeoff, not a ranking. The right choice depends on your product, your page layout, and your audience's device mix.

Inline Table: Maximum Visibility

An inline table renders the chart directly in the page flow, usually near the product description or size selector. Nobody has to click anything — the numbers are simply there.

Use it when:

• Fit is make-or-break: swimwear, tailored garments, footwear, compression wear.
• Your product page is otherwise short and can afford the vertical space.
• Your audience skews toward desktop, where the extra height costs less.

Watch out for:

• On mobile, a full table can shove the add-to-cart button far down the page.
• Wide tables need horizontal scrolling inside their own container so they don't break the layout.

Inline works best when the sizing information is as important as the product photo itself.

Accordion: The Balanced Default

An accordion shows a labeled header — "Size Guide" — that expands the table when tapped. Closed, it takes almost no space; open, it gives the full chart. For most stores, this is the sensible middle ground.

Use it when:

• You want the chart discoverable without dominating the page.
• Your product page already has other collapsible sections (materials, shipping, care) and consistency matters.
• You're serving a mix of desktop and mobile visitors.

Watch out for:

• The header label has to be obvious. "Size Guide" with a clear affordance beats a vague icon.
• Keep it near the size selector, not stranded at the bottom of the page where the buying decision has already passed.

The accordion's superpower is that it respects the page while staying one tap away at the exact moment of doubt.

Modal: Focus Without Footprint

A modal keeps a small trigger — a link or button next to the size options — and opens the chart in a focused overlay on top of the page. It costs zero inline space and puts the chart front-and-center when summoned.

Use it when:

• Product pages are dense and every pixel of vertical space is contested.
• You want the size decision to feel deliberate — the shopper opens it, reads, closes, chooses.
• Charts are large and benefit from an uncluttered viewport of their own.

Watch out for:

• Overlays add a small friction step; the trigger must be visible and obviously about sizing.
• Accessibility matters: the modal should trap focus, close on Escape, and return focus to the trigger. Handled poorly, modals frustrate keyboard and screen-reader users.
• On small screens, the modal should fill the viewport comfortably rather than appearing as a cramped box.

Done well, a modal is the cleanest option for busy pages. Done carelessly, it's the easiest to get wrong.

Mobile Deserves Special Attention

Since a large share of apparel traffic is mobile, weigh these realities:

• Vertical space is scarce. An inline table that's fine on desktop can bury your buy button on a phone. Accordions and modals shine here.
• Tap targets must be generous. Whatever the trigger, make it comfortably tappable — small text links get missed.
• Rendering speed is visible. On slower connections, a chart that arrives after the page settles causes layout shift and looks broken.

That last point is why rendering approach matters as much as pattern. Supra Size Chart renders tables server-side with Liquid and minimal JavaScript, so the chart is part of the initial HTML rather than something fetched afterward. Inline tables appear immediately with no layout shift, and accordions and modals have their content ready the instant a shopper interacts — no spinner, no external request.

You Don't Have to Pick Just One

The best setup often mixes patterns by product context:

• Modal for a dense, image-heavy catalog page where space is tight.
• Accordion as the store-wide default that balances discoverability and restraint.
• Inline on your most fit-sensitive collections where the numbers deserve to be unmissable.

Because Supra Size Chart lets you choose the display style, you can match the pattern to the situation instead of forcing one behavior everywhere.

A Simple Decision Guide

• Fit is critical and the page is short? Inline.
• You want a safe, discoverable default? Accordion.
• Space is tight or the catalog is dense? Modal.
• Unsure? Start with an accordion — it's the lowest-risk choice — then upgrade specific collections to inline where fit really matters.

The Takeaway

The pattern you choose decides whether your carefully built chart gets read or ignored. Match visibility to how much fit matters, respect mobile's limited space, and make sure the chart renders fast enough that it's ready the moment a shopper looks for it. Get those three right and the display format becomes a quiet asset instead of an afterthought.