Tabs element

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

About Tabs element

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.

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.

PageFly with the Tabs element helps you to build your Shopify store more easily pagefly-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 configuration

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.

PageFly with the Tabs element helps you to build your Shopify store more easily pagefly-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.

PageFly with the Tabs element helps you to build your Shopify store more easily pagefly-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. PageFly with the Tabs element helps you to build your Shopify store more easily pagefly-tabs-element
Default Active Item: The tabs will be seen first when seen on the live page. PageFly with the Tabs element helps you to build your Shopify store more easily pagefly-tabs-element
Headers Position: 4 positions for the header such as Top; Left; Button; and Right.PageFly with the Tabs element helps you to build your Shopify store more easily pagefly-tabs-element
Set Menu Full Width: Make your Tab Menu is full-width in the linePageFly with the Tabs element helps you to build your Shopify store more easily pagefly-tabs-element
Horizontal Alignment: Move the position of the Tab Header Menu to Left, Center or Right.PageFly with the Tabs element helps you to build your Shopify store more easily pagefly-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 settings

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

PageFly with the Tabs element helps you to build your Shopify store more easily pagefly-tabs-element

 

 

CONTENT
Tab items: Add/Duplicate/Remove new tabs to the element. PageFly with the Tabs element helps you to build your Shopify store more easily pagefly-tabs-element
Header Text: Change the name of the tab headerPageFly with the Tabs element helps you to build your Shopify store more easily pagefly-tabs-element
Icon: 
  • Show icon: Add icon into the Tab Header
  • Icon Position: Set the position of the icon inside the Tab Header
PageFly with the Tabs element helps you to build your Shopify store more easily pagefly-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!

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

Styling configuration

You can choose one of three button states to style for it such as Normal, Hover, and Selected.

PageFly with the Tabs element helps you to build your Shopify store more easily pagefly-tabs-element

You can check more information about the Styling tab here

You can check the video tutorial below

Navigate this category

Do you want to get more sales from the same amount of traffic?

PageFly can help you. We are the best page builder app to give you the freedom to customize your page, build trust and gain more sales.

Explore PageFly
PageFly Languagues

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

I got it!