How to create a product tabs widget
Organise details like ingredients, shipping and care into tabs, pick one of three layouts, and add them to your product pages or any other page.
Tabs keep long product details tidy, so shoppers find what they need without scrolling past everything else.
TL;DR
Go to Store Widgets, click Create Widget and pick Tabs. Add up to 10 tabs, each with a title and content. Pick a style and layout, click Publish, then add the Nudgesmart widget block in the theme editor and choose your tabs in its Widget setting.
Step 1 · Create the widget
In Nudgesmart, open Store Widgets and click Create Widget. Pick Tabs. The editor opens with a few sample tabs so you can see how it looks.
Widget library with the Tabs widget highlighted
Screenshot coming soon
Give it a clear name under Widget information, such as "Product details".
Step 2 · Add your tabs
In the Items tab, click a tab to edit it, or add a new one. Each tab has a Tab title and Content.
Items list with the Tab title and Content fields
Screenshot coming soon
Tips:
- You can add up to 10 tabs. Keep titles short, such as "Shipping" or "Care".
- Start a line with a dash and a space (
-) to turn it into a bullet point. - The first tab is open when the page loads.
Step 3 · Pick a style and layout
Open the Design tab. Choose a Style, then a Layout.
Your options:
- Style. Seven looks: Match my theme, Minimal, Editorial, Card, Bold, Soft and Luxe.
- Layout. Tabs across the top, Tabs down the side, or Accordion, where each tab opens in place. On phones, tabs always show as an accordion so they're easy to tap.
Step 4 · Publish and add it to your store
In the Status & publishing card, click Publish. Then add it to your store in the theme editor.
- In Shopify, go to Online Store → Themes → Customize.
- Open the page you want, usually your product page.
- Click Add block, then Apps, and pick Nudgesmart widget.
- Choose your tabs in the block's Widget setting.
- Click Save.
You can also click Add to store in Nudgesmart to open the theme editor on the right page.
Show different tabs on different products
Want "Care" tabs for clothing and "Warranty" tabs for electronics? Make one tabs widget for each, then:
- Open each widget's Settings tab and use Show on products to add the collections, tags, brands or product types it's for. Publish it.
- In the theme editor, choose your main tabs widget in the block's Widget setting. It's the one marked main, both in that list and in Nudgesmart.
On product pages, the block then shows the tabs whose rules match the product, and your main tabs everywhere else. See show different widgets on different products for the order the rules are checked in.
Common pitfalls
- My edits don't show on the store. Click Publish changes. Edits stay as a draft until you publish.
- I can't add another tab. Each widget holds up to 10 tabs. Make a second widget if you need more.
What to read next
How to create a comparison table widget
Compare products, plans or bundles side by side with checks and crosses, style it to match your theme, and add it to any page.
How to create a countdown timer widget
Count down to a sale's end, show an order-by time for same-day shipping, or show an estimated delivery date on your store's pages.