The Layout settings

The layout settings panel on the General settings page is where you select the way the tabs display.

The layout settings are different than the Style settings which control the way the tabs look (such as colors, borders, and spacing).

The Horizontal layout and the Vertical layout each have their own style settings.

The layout settings panel

Select a layout for the tabs

The Select a layout for the tabs section has the following options:

Horizontal

In the Horizontal layout the tabs display side-by-side across the page. The content for the open tab is displayed below all of the tab titles.

Tabs in the horizontal layout
Tabs in the horizontal layout
Tab titles will wrap to additional rows

If there isn't enough room to display the tab titles in a single row then they'll wrap to additional rows.

Tab titles wrapping to additional rows when they can't fit in a single
              row
Tab titles wrapping to additional rows when they can't fit in a single row

Vertical

In the Vertical layout the tabs display on top of each other down the page. The content for each open tab is displayed directly below its tab title.

Tabs in the vertical layout
Tabs in the vertical layout

Automatic based on column width

When the layout is Automatic based on column width, the tabs will show in the Horizontal layout if the tab titles can all fit in a single row.

If the content column isn't wide enough to display the tab titles in a single row then the tabs will show in the Vertical layout.

The column width is set by the theme

The tabs and tab content will automatically expand to the full width of the content column the theme places them in.

If you want to give the tabs more space you can ask your theme developer to make the content column wider.

The layout changing to vertical when the tab titles can't fit in a single row
The layout changing to vertical when the tab titles can't fit in a single row
The layout can be different from product to product

It's possible that the layout will be different from one product to another, especially if some products have more tabs than others.

For example, Product A has three tabs. All three tab titles can fit in one row, so the tabs show in the Horizontal layout.

Product B has seven tabs. All seven tab titles can not fit in one row, so instead of wrapping the titles to additional rows the tabs show in the Vertical layout.

Automatic based on screen width

When the layout is Automatic based on screen width, the tabs will show in the Vertical layout if the width of the screen is less than the Screen width setting.

If the width of the screen is greater than the Screen width setting, the tabs will show in the Horizontal layout.

We recommend you set the Screen width setting to match one of your theme's responsive breakpoint sizes.

If you're not sure which breakpoint sizes your theme uses you can ask your theme developer.

When showing in the vertical layout

The When showing in the vertical layout section is where you select the way the tabs behave whenever they show in the Vertical layout.

It shows the following settings:

Open the first tab automatically
When checked, the the first tab in a tab set will be open when the page loads. When unchecked, all tabs will be closed when the page loads unless deep links are enabled and a tab has been linked to.
Allow multiple tabs to be open at the same time
When checked, opening a new tab will not cause other open tabs to close. When unchecked, opening a new tab will automatically close other open tabs.

Still need help? Contact Us Contact Us