For the complete documentation index, see llms.txt. This page is also available as Markdown.

Horizontal tabs

Show up to five tabs of product details side by side, such as Details, Specifications and Shipping, so shoppers can switch between them in one click.


The Horizontal tabs block shows a row of tab labels with the content of one tab below it. Shoppers click a label to switch tabs, and can also use the arrow keys. On phones the tab row scrolls sideways when the labels don't fit. Use it to organize details like materials, sizing, care and shipping without making the page long.

1. Our guide to set up a Horizontal tabs block:

Steps:

  • In the theme editor, open a product page using the page selector at the top.

  • In the Product information section, click Add block.

  • Select Horizontal tabs.

  • Enter a Tab label and Description for each tab you want.

  • Click Save.

2. Block settings

  • General

    • Display position: Product info / Media. With Media, the tabs appear below the product images on desktop (990px and wider). On smaller screens they stay in the product information area, in the block's position.

  • Tab 1 to Tab 5 (each has the same settings)

    • Tab label: The name shown in the tab row. Leave blank to hide this tab.

    • Description: The tab's content, with formatting and links.

A tab only shows when it has both a Tab label and a Description. The first tab with content is open when the page loads.

3. Tips

  • Keep labels to one or two words, such as "Details", "Size & fit" or "Shipping", so more tabs fit on one row.

  • To show different content on each product, connect a Description to a product metafield using the dynamic source icon next to the setting.

  • For a long list of topics, Collapsible tab blocks stacked on top of each other may be easier to scan on mobile.

Was this helpful?