Shopify product tabs
Last updated
Pick the product page closest to yours. The plan, and the real tabs widget it would become, appear below.
Choose one of the three product pages above. You get what must stay next to the buy button, which tabs to make and in what order, and the layout for a computer and a phone.
What a tab plan decides
Shopify product tabs fold the longer parts of a product page, such as ingredients, care, specifications and the full shipping policy, into labelled sections a shopper opens on demand, while the price, the options and the buy button stay in plain sight.
The planner follows Baymard Institute product page research on content hidden in tabs and Nielsen Norman Group guidance on tabs and accordions. No conversion figure is quoted for either layout. Every tabs layout is in the store widget gallery, and the product tabs help article covers setting them up in the app.
Tabs are a filing system for detail. The planner above sorts your content into two piles, what must never be folded away and what can wait behind a heading, then puts the second pile in order.
- Above the fold
- The part of the page a shopper sees before scrolling. Price, variant pickers, the add to cart button and a short delivery promise belong here, never inside a tab.
- Tab order
- The sequence of sections. The first one is usually the only one open when the page loads, so it carries the detail most buyers want; questions and policies trail at the end.
- Tabs across the top
- Titles in a row above one shared panel. Tidy with a handful of short titles, but every closed tab hides its content completely.
- Tabs down the side
- Titles stacked in a column beside the open panel. A column holds more titles than a row before it starts to crowd.
- Accordion
- Headings stacked one under another, each opening in place. It suits phones and long lists of sections, and more than one can be open at the same time.
- Merged section
- Two short topics shoppers read together, such as shipping with returns or materials with care, sharing one heading. It keeps the count down to about 10 at the very most.
Nudgesmart adds widgets like this one to your store from the theme editor, in your theme’s fonts and colours by default, and is available on the Shopify App Store. See every widget layout or see what it costs.
Five product pages, sorted into tabs
Invented products and settings. What stays visible, the tab order, the layout and every flag come from the same planner the tool above runs.
| Product | Tabs, in order | On a computer | What the planner flags |
|---|---|---|---|
| Linen shirtApparel, asked for tabs across the top | Description, Size and fit, Materials and care, Shipping and returns | Tabs across the top | Baymard Institute product page testing found that shoppers often overlook content placed in horizontal tabs. Make sure nothing a buyer needs to decide is only in a later tab. |
| Night creamSkincare, asked for accordion | Description, Ingredients, How to use, Returns, Questions | Accordion | If the product contains a common allergen or fragrance, say so in the line above the tabs as well as in the full list. |
| Wireless earbudsTech, asked for tabs down the side | Description, Specifications, Compatibility, In the box, Warranty, Shipping and returns, Questions | Accordion | Seven or more sections is a lot to scan. See whether two short ones can share a tab. |
| Oak side table, every section tickedHome, asked for tabs across the top | Description, Dimensions, Materials and care, Warranty, Size and fit, Ingredients, How to use, Specifications, Shipping and returns, QuestionsLeft out: Compatibility, In the box | Accordion | That is more than 10 tabs. Shoppers rarely reach the last ones, so the lowest were left out. Merge small ones into Questions instead. |
| Phone charger, box contents onlyTech, asked for tabs across the top | In the box | Tabs across the top | A single tab hides content behind a click for nothing. Show it as plain text instead, or add the sections shoppers ask about. |
When tabs work against you
Hidden is easy to miss
Baymard Institute testing on product pages found that shoppers regularly overlook information placed in horizontal tabs, and Nielsen Norman Group warns against hiding content most visitors need. A tab is for detail some shoppers want, never for the thing every shopper needs.
A policy in a tab is still a promise
Folding the shipping or returns text into a tab does not shrink what it commits you to. Keep the wording identical to the policy pages Shopify links from checkout, and update both together.
Search engines read the text, not the click
Text inside a closed tab is usually still part of the page, but a product whose only description sits in a closed panel gives shoppers arriving from search nothing to read at first glance. Keep a short summary visible.
Required product information is not optional
Some products must show certain facts, such as ingredients, safety warnings or energy labels, depending on what you sell and where. The planner does not know your category rules; check them before deciding where a fact lives.
It sorts topics, not your actual text
The plan works from which sections you have, not from what they say. A Questions tab full of sales copy, or a Care tab with one line in it, still needs a human edit.
Product tab questions
What should never go inside a product tab?
The price, the size or colour pickers, the add to cart button and a one-line delivery and returns promise. Those decide whether someone buys, so hiding any of them behind a click costs you the shoppers who never click.
How many product tabs is too many?
Four or five covers most products. Past six, a row of titles crowds and an accordion reads better, and beyond ten the last sections are rarely opened. Merge short topics that belong together, such as shipping with returns.
Tabs or an accordion on mobile?
An accordion. On a narrow screen a row of tab titles either wraps or scrolls out of view, while stacked headings stay readable and open in place. Nielsen Norman Group recommends accordions on mobile for exactly this kind of long, sectioned content.
What order should product tabs go in?
The detail most buyers want first, usually the description, then what is specific to the product type, such as size and fit for clothing, ingredients for skincare or specifications for tech. Shipping, returns and questions go last.
Do the tabs take on my theme look?
By default, yes: a new tabs widget in the Nudgesmart app inherits your theme typeface and colours. The preview here runs that widget with placeholder sections, and the palette swatches beside it show the alternatives.
Does this planner keep my answers?
No. There is no account to save them to: the plan is rebuilt in your browser every time you change something, and the preview runs in a sandboxed frame on this page.
Shipping, care and specs belong on the product page, not three clicks away.
Nudgesmart product tabs come horizontal, vertical or as an accordion, and the Store details form can fill the shipping and returns tabs.
