Tabs element

In this article, you will learn about the Tabs element and how to use it.

About Tabs elementClick to copy

The Tabs element is designed to present content in separate tabs in order to increase the conversion rate. You can use the Tabs element to show various elements as the tab’s content either independently for each tab or together in one tab.

You can check more details in the video tutorial below.

Access the Tabs element

Step 1: Click on the Plus icon which is the Add element function

Step 2: Click on the Tabs element in the dropdown menu

Step 3: Drag and drop the element you want into the page editor and then start using it.

Tabs element

The Tabs element comes with multiple variations covering most of your needs. But we will continue to add more variations to help you save time.

Drag a variation to the layout and see how it can be configured.

Tabs element configurationClick to copy

The Tabs element comes with plenty of parameters allowing you to fine-tune content appearance to reach the best possible conversion rate.

Select the element in the layout to see its parameters.

Tabs element

Note that you need to drag and drop elements into the content box of the Tab. For example, Paragraph, Product Variant, Product Image, etc. However, not all elements can be added here.

Tabs element

The parameters in the General and Styling tabs are specific for this element. Read about them in this article.

General configuration

CONTENT
Tab items: Add/Duplicate/Remove new tabs to the element.  Tabs element
Default Active Item: The tabs will be seen first when seen on the live page. Tabs element
Headers Position: 4 positions for the header such as Top; Left; Button; and Right.Tabs element
Set Menu Full Width: Make your Tab Menu is full-width in the lineTabs element
Horizontal Alignment: Move the position of the Tab Header Menu to Left, Center or Right.Tabs element

You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters here

Styling configuration

You can check more information about the Styling tab here

Tab Header settingsClick to copy

To edit a tab header of the Tabs element, choose one tab header separately.

You can Duplicate/Delete/Copy style/Paste style for each tab header in the toolbar right above it here.

Tabs element

 

CONTENT
Tab items: Add/Duplicate/Remove new tabs to the element. Tabs element
Header Text: Change the name of the tab headerTabs element
Icon: 
  • Show icon: Add icon into the Tab Header
  • Icon Position: Set the position of the icon inside the Tab Header
Tabs element
Anchor Text: Add link label or link text is the visible, clickable text in an HTML hyperlink for Tab Header.

This feature only works on the live page!

Tabs element

You can get further information about ATTRIBUTES, VISIBILITY, and ANIMATION parameters here

Styling configuration

You can choose one of three styling states for Tab Header: Normal state, Mouse over state, and Active/Selected state.

Tabs element

You can check more information about the Styling tab here

Navigate this category

PreviousPrevious article

Next articlePrevious

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese, French and Japanese. Please check the flags on the page header.

I got it!
Start a free trial and enjoy 3 months of Shopify for $1/month. Sign up now