Tab group options

This page looks up each field of a tab group. To learn how to create a tab from scratch, see Group items into tabs, add banners and cards.

Where to find these fields

In the Build Menu step, click an item of type Tab to open Edit item. The Tab style block contains Tab position (Desktop Mega Menu only), Tab style, Display, Tab column width (shown only when Tab position is Left) and Tab color. The Tab ID field is at the bottom of the table, in the Nested tab group section.

A tab group is a set of Tab items that sit next to each other at the same level. The four fields Tab style, Display, Tab color and Tab position (along with Tab column width) only take their values from the first tab in the group. When you open another tab in the group, you’ll see the line “Style is set on the first tab of this group” with a button that jumps to the form of the first tab.

These fields don’t need a paid plan and work the same way on Shopify, Wix and other websites.

Style and layout of tabs

Tab style

• Where: Edit item of the first tab in the group, in the Tab style block, a row of four small pictures.
• What it’s for: choose the shape of the tab buttons for the whole group.
• Options: Underline (a line under the selected tab), Outline (a border around the tab), Segmented (buttons split into segments inside one background bar) and Top line (a line above the tab). The default for a new group is Underline.
• Applies to: Tab items in all 6 menu types (Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu, Mobile Mega Menu, Icon Menu). This field is hidden on any tab that isn’t the first one. Every plan. Shopify, Wix and other websites work the same way.
• What shoppers see: the tab names on your store change shape right away, and the content below doesn’t change. A group that never had a style chosen keeps Underline.

Display

• Where: Edit item of the first tab, in the Tab style block, right below the Tab style field. Five buttons: Hug, Spread out, Left, Center, Right.
• What it’s for: choose how the tabs take up space on the row, and how the icon and text sit inside each tab.
• Options:
  • Hug (default): the tabs share the bar’s width equally, and the icon and text sit together in a group in the middle of each tab.
  • Spread out: each tab still shares the width equally, but the icon and text are pushed out to the two edges of the tab. This only has an effect when the icon and text sit side by side (icon on the left or right of the text). If the icon sits above the text, you won’t see a difference.
  • Left, Center, Right: each tab shrinks to fit its text, the tabs sit about 24px apart, and the whole strip of tabs is pushed to the left, center or right.
• Applies to: Tab items in all 6 menu types, on the first tab of the group. When Tab position is Left, this field is hidden automatically, because the left column doesn’t use Display. Every plan.
• What shoppers see: if there are many tabs or long names and the strip doesn’t fit on one row, the shopper swipes sideways to reach the other tabs.

Tab color

• Where: Edit item of the first tab, in the Tab style block, the color field at the bottom of the block (type a #RRGGBB code or pick one).
• What it’s for: sets the accent color of the selected tab. Unlike the text color, this field doesn’t change the text color of the tabs.
• Default: empty, so the tabs take the text color of that menu level.
• Applies to: Tab items in all 6 menu types, on the first tab of the group. Every plan.
• What shoppers see: with Underline and Top line, it’s the color of the line; with Outline, it’s the color of the border; with Segmented, it’s the color of the background bar that holds the buttons.

Tab bar as a left column (Desktop Mega Menu)

Tab position

• Where: Edit item of the first tab, in the Tab style block, at the top of the block: two pictures, Top and Left. This field only shows when you’re editing a Desktop Mega Menu.
• What it’s for: choose whether the tab bar sits horizontally across the top of the mega menu panel, or stacks vertically in a column on the left.
• Options: Top (default, a horizontal bar) or Left.
• Applies to: Desktop Mega Menu only. Every plan. Shopify, Wix and other websites work the same way.
• What shoppers see: with Left, on computers the tabs stack into one column on the left of the menu panel, and the content opens when the shopper hovers over a tab. On phones, the tabs are still a horizontal bar that can be scrolled at the top. The column only works with a tab group at the top level of a multi-column panel. A tab group inside a narrow one-column dropdown, a group nested inside another tab, or a second tab group in the same list still shows as a horizontal bar.

Tab column width (px)

• Where: right below the Display field, in the Tab style block: three pictures, Narrow · 120, Default · 220, Wide · 320, and a number field with the px unit.
• What it’s for: sets the width of the tab column when you choose Tab position = Left.
• Values: from 120 to 420 px. If empty, it equals 220. If you enter a number outside this range, the app uses the nearest value within the range.
• Applies to: Desktop Mega Menu only, and only shown when Tab position = Left. Every plan.
• What shoppers see: the tab column gets wider or narrower, and the rest of the mega menu panel stretches or shrinks to match. A column that’s too narrow cuts off long tab names, so preview it on your store.

Nested tab groups and closing groups

Tab ID

• Where: at the bottom of the Edit item table of a Tab item, in the Nested tab group section. There’s a See more button that opens a picture titled “How tab groups work”.
• What it’s for: sets a code for tabs that sit inside the content of another tab, so they form their own separate tab group.
• How to use it:
  1. Place the child tabs below the parent tab, inside the parent tab’s content.
  2. Type the same short code (for example sub) into the Tab ID of every child tab.
  3. Leave the Tab ID of the outer tabs empty. If you enter a code on outer tabs, they also count as a nested group.
  4. Add an End of tab group item after the last child tab to close the inner group, then one more to close the outer group.
• Default: empty, and most menus leave it empty. You only need a code when nesting tabs. A menu with one flat row of tabs can skip it.
• Applies to: Tab items in all 6 menu types. Every plan.
• What shoppers see: if a code is set, the child tabs appear as a second tab bar inside the parent tab. If the code is missing, the child tabs just become extra tabs of the outer bar, and their End item closes the outer bar instead.

End of tab group

• Where: this is a separate item in the tree. Add it with Add item, then choose End of tab group. When you open this item in Edit item, you’ll only see one line: “This marks the end of a tab group”. The “End of tab group” checkbox in the form is hidden, so you can’t switch between Tab and End.
• What it’s for: marks where a tab group ends. Items below it show as normal items, no longer inside any tab.
• Default: regular Tab items have this value off (0); an End item has it on.
• Applies to: all 6 menu types. The End item has no style fields of its own. Every plan.
• What shoppers see: the End item itself doesn’t show on your store. Items placed below it always show outside, below the tab group. With nested tabs, the first End that comes up closes the group that’s open innermost. The position of the End item decides this, not its Tab ID code.