Guides

Shopify Product Tabs: What Goes in a Tab and What Stays Visible

Tabs tidy a long product page but hide whatever is inside them. What belongs in a tab, what must stay in plain view, and when an accordion beats tabs across the top.

Nudgesmart Team
5 min read
Live exampleSpin Anyway — LifeproofInstall free
On this page

Important Notice: This content is for educational purposes only. Results may vary based on your specific business circumstances, industry, market conditions, and implementation. No specific outcomes are guaranteed.

Tidy is not the same as findable

Product tabs are popular because they make a long page look short: specifications, care, shipping and ingredients each tucked behind a title. The cost is that anything in a closed tab is out of sight. Baymard Institute's product page testing found that shoppers often overlook content placed in horizontal tabs, and it recommends collapsible sections or one long page for product details instead.

So the real decision is not which tabs to have. It is what can safely be hidden. The Shopify product tabs tool helps you sort that, recommends a layout and previews the result as a real store widget.

What stays visible

Anything that decides the purchase should be readable without a tap:

  • Price, options and whether the item is in stock.
  • What delivery costs and roughly when it arrives.
  • A one-line returns summary, with a link to the full policy.
  • The single fact that most often rules the product in or out: size, compatibility, an allergen, what is in the box.

If a shopper would leave without knowing it, it does not belong behind a tab. If your products carry mandatory information, such as allergens or safety warnings, check what the rules where you sell expect before tucking it away.

What belongs in a tab

Detail that a smaller group of shoppers wants in full:

  • Full specifications and dimensions.
  • Materials, ingredients and care instructions.
  • Shipping and returns detail beyond the summary line.
  • Warranty terms and how to claim.
  • Questions about this product, when they do not apply to the whole store.

Use short, predictable titles that shoppers scan for, such as "Shipping", "Care" or "Ingredients". A clever title like "The good stuff" forces people to open it to find out what it is.

Tabs across the top, down the side, or an accordion

  • Across the top. Works for a few short titles that fit on one line. It is the layout Baymard's finding applies to most directly, so keep what is inside it genuinely secondary.
  • Down the side. Holds more titles and longer names on a wide screen, with the content beside them.
  • Accordion. Sections open in place, one under another. Nielsen Norman Group recommends accordions on mobile for long pages, because they let people see every heading at once and open only what they need.

Whichever you choose, check it on a phone. Tabs across the top rarely fit a narrow screen without wrapping or scrolling, which is why many stores switch to an accordion there.

Small details that matter

  • Order by how often it is asked. Your support inbox tells you which tab should come first.
  • Open the most useful one. A first section that is already open shows shoppers there is content inside.
  • Keep shipping text in one place. If the shipping tab and your shipping policy say different things, the shopper will quote the one that suits them. The shipping policy generator can help you write the policy first.
  • Keyboard support. The W3C's WAI-ARIA Authoring Practices describe how tabs and accordions should work with a keyboard and a screen reader. Try tabbing through yours without a mouse.

Next step

Write down everything on one product page, then mark each item as visible or tabbed using the lists above. Open the product tabs tool to get a suggested set of tabs and layout, and a preview of the tabs widget from the Nudgesmart app with sample content. You add your own tab content in the app and publish it from there. Every layout is in the store widget gallery.

Tabs are one way to handle product detail. For how they fit with size guides, FAQs and the rest, see which product page widgets earn their place.

Tags

  • product-tabs
  • product-page
  • store-widgets
  • accordion
  • ux

Written by

Nudgesmart Team

Practical guides from the team that builds Nudgesmart

Put it into practice

Popups built for this

Each one is running live. Open one to see it on desktop, or install free and it is waiting in your template library.

Browse all templates
  • Multi-Step Flows · jewelry

    Maison — Gold
    Loading…

    Maison — Gold

    Multi-Step Flows · jewelry

    Demo only — nothing is saved, no code issued.

    Desktop view
    Loading…

    Maison — Gold

    Multi-Step Flows · jewelry

    Demo only — nothing is saved, no code issued.
    Install free
  • Video Popups · food

    Food & Drink — Cinema Bold V2
    Loading…

    Food & Drink — Cinema Bold V2

    Video Popups · food

    Demo only — nothing is saved, no code issued.

    Desktop view
    Loading…

    Food & Drink — Cinema Bold V2

    Video Popups · food

    Demo only — nothing is saved, no code issued.
    Install free
  • Countdown Timers · pets

    Before Dusk — Countdown
    Loading…

    Before Dusk — Countdown

    Countdown Timers · pets

    Demo only — nothing is saved, no code issued.

    Desktop view
    Loading…

    Before Dusk — Countdown

    Countdown Timers · pets

    Demo only — nothing is saved, no code issued.
    Install free
Free tools

Work out the numbers first

Get started

Turn the traffic you already have into customers.

Install it and pick a template. Or book fifteen minutes and I’ll do the first one with you, on your store — that call costs you nothing either way.

Not ready yet? Get new posts by email.

New posts when I publish them. Unsubscribe anytime.