Everything you need to set up and customize the Tab block — from adding a Tabs Group to your page, to creating individual tabs with nested content, styling the navigation bar, and configuring the divider line.
Tabs are a way to organize related content into separate panels that share the same space on a page. Visitors click a tab label to reveal its content while hiding the other panels, making it easy to browse multiple topics without scrolling through long pages.
In the Boardwalk theme, tabs are made up of two parts: a Tabs Group (the container that holds everything) and individual Tab blocks (each panel with its own title and content). The Tabs Group renders a horizontal navigation bar with clickable tab buttons and a divider line underneath. Each Tab block can contain nested content blocks such as text, buttons, dividers, and store pickup information — giving you full flexibility over what appears inside each panel.
Follow these steps to add tabs to any section of your Shopify store using the Boardwalk theme.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Navigate to the
page where you want to add tabs using the page selector
dropdown at the top center of the editor.
Inside the section where you want tabs to appear, click Add block and choose Tabs group from the list. This is the container that will hold all of your individual tabs. A new Tabs Group will appear in the sidebar with three placeholder Tab blocks already inside.
Click the Tabs group block in the sidebar. Here you can set the font family and size for the tab labels, choose a color scheme, and customize the divider line that appears below the navigation bar.
Inside the Tabs Group, click on any Tab block. Give it a title — this is the label that appears in the tab navigation bar. You can add more tabs by clicking Add block inside the Tabs Group, or remove ones you don't need.
Each Tab block acts as a container for nested content. Click Add block inside a Tab to insert content blocks such as Text, Button, Divider, or Store pickup. You can add as many content blocks as you need and reorder them freely.
Note: The
Store pickup block is designed for
product pages. It shows in-store pickup availability
for the selected product variant. To use it, store
pickup must first be configured in your Shopify admin
under
Settings → Shipping and delivery.
Click Save in the Theme Editor. Preview your page to verify the tab navigation, content panels, and divider line are displaying as expected.
Each Tab is an individual block inside the Tabs Group. It has one setting and supports nested content blocks.
The label that appears in the tab navigation bar. This is an inline rich text field, so you can apply basic formatting such as bold or italic if needed. Each tab must have a title — it's how visitors identify and switch between panels.
Each Tab block is a container that holds nested content. You can add the following block types inside any tab and arrange them in any order.
A rich text block for adding paragraphs, headings, lists, links, and other formatted content inside the tab panel. Use this for product descriptions, care instructions, sizing guides, or any written content.
Adds a clickable button inside the tab panel. Use this to link to other pages, collections, or external resources from within a tab.
Inserts a horizontal line to visually separate content within a tab panel. Useful when a single tab contains multiple distinct pieces of information.
Displays in-store pickup availability for the currently selected product variant. This block is designed for use on product pages and shows whether pickup is available, along with a button to check availability at other locations.
Note: Store pickup must be
configured in your Shopify admin under
Settings → Shipping and delivery
before this block will display any information. If
pickup is not set up, the block will appear empty.
The Tabs Group is the container that holds all of your individual Tab blocks. Its settings control the appearance of the tab navigation bar, the divider line, and the spacing of the content panels. Click the Tabs Group block in the Theme Editor sidebar to access these settings.
Sets the font used for the tab labels in the
navigation bar. Options: Heading (uses
your theme's heading font) or Body
(uses your theme's body font).
Controls the size of the tab label text. Range: 12px to 32px. The available font size slider adjusts automatically based on which font family you've selected.
Select a color scheme for the Tabs Group. This affects the text colors of the tab labels and the active tab indicator. Color schemes are defined in Online Store → Themes → Customize → Theme settings → Colors.
When enabled, the divider line color is automatically derived from the section's color scheme. Turn this off to set a custom divider color instead.
Sets a custom color for the divider line. This setting supports transparency and is only visible when "Use section color scheme" is turned off.
Controls the style of the divider line below the
tab navigation. Options: Solid or
Dashed.
Sets the thickness of the divider line. Range: 1px to 4px.
Controls the amount of space between the tab navigation bar and the content panel below it. Range: 8px to 48px.
Sets the vertical spacing between nested content blocks inside each tab panel. Range: 0px to 32px.
The Tabs Group and Tab blocks come with features that work automatically — no apps or custom code needed.
Clicking a tab button instantly reveals its content panel with a smooth fade-in animation. Content switches without a page reload, keeping the experience fast and seamless.
The currently selected tab displays a colored underline bar that smoothly animates into position. Active tab labels use the full foreground color, while inactive tabs appear at reduced opacity, making it clear which panel is currently visible.
When you have more tabs than can fit in the available space, left and right scroll arrow buttons appear automatically. Visitors can click these arrows to scroll through the tab navigation. The arrows only show when needed and hide when all tabs are visible.
The tab navigation bar is fully accessible via keyboard. Visitors can use the left and right arrow keys to move between tabs, and the Home and End keys to jump to the first or last tab. This follows standard accessibility practices for tabbed interfaces.
On smaller screens, the tab labels automatically reduce in size and spacing to fit comfortably. If the tabs still overflow, the horizontal scrolling and scroll arrows ensure all tabs remain accessible.
When editing in the Shopify Theme Editor, clicking on a Tab block in the sidebar automatically switches the preview to show that tab's content. This makes it easy to edit and preview each tab without manually clicking through the navigation.
The Tabs Group supports app blocks, so you can insert content from third-party Shopify apps alongside your own Tab blocks.
Keep these details in mind when working with tabs in the Boardwalk theme.
Individual Tab blocks must be placed inside a Tabs Group container. A Tab block on its own outside a Tabs Group won't function correctly — the navigation bar and panel switching require the group wrapper.
When the page loads, the first Tab block in the group is always selected and visible. Visitors must click or use keyboard navigation to switch to other tabs.
The Tabs Group has its own color scheme setting. The tab label colors (active and inactive states) are automatically derived from this color scheme. Make sure you've set up the color schemes you want to use in Online Store → Themes → Customize → Theme settings → Colors before configuring the tabs.
If you plan to use the Store pickup content block
inside a Tab, you must first configure pickup
locations in your Shopify admin under
Settings → Shipping and delivery. Without this configuration, the block will not
display any availability information.