This article covers specific setup and content entry for the Tabs Widget. If you've never set up a Widget, check the Setup Guides Section for a step by step guide for getting started.
The Tabs Widget is a flexible content area that allows you to define a set of content tabs displayed on the front end of your store.
The image below shows an un-styled version of a Tabs Widget.
Content Entry Form
While entering content, you can set the title of the tab, and enter content to appear when the tab is activated using the default widget setup.
By default, the Widget's content entry form will include the following:
- This is the tab's title that will be displayed above the content.
- This content is shown and hidden as each of the tabs is clicked.
To edit configuration for this Widget, head into the Configure section in the sidebar under your item type, for example, under Products, choose Configure. Hover on the Widget to see options.
Widget Display Settings
- Variable tab heights
- When selected, the content area of the tab will grow or shrink to fit the content. Without this setting, the height of the entire content area for the tab group would be set by the tab with the most content in it.
- Tab hight animation speed
- This setting controls how long it takes for a tab to grow or shrink as it animates from one size to another.
- Fade tabs animation speed
- This setting controls how long it takes for tabs to fade the text in and out as it transitions from one tab to another.
Adding New Fields
From the Configure screen, select the plus to add more fields to this widget.
Select the code symbol to edit the basic HTML and liquid code for this widget.
HTML and liquid in our templates may be edited in the app or directly in your theme.
CSS can only be edited in your theme. The code page links to the correct theme file to edit the CSS.
Customizing Content Entry Fields
Some fields may have additional configuration options. For example, you might want to add some help text for your administrator on a particular field.