Show tabs on a page
To show tabs on a page:
-
From your Shopify admin, go to Online Store > Pages.
-
Create a new page or click the title of the page that you want to edit.
-
In the rich text editor, click Show HTML, <>.
-
In the page HTML, paste this code to create a tab set:
<div data-station-tabs data-animate-panels="true" data-default-tab="false" data-layout="vertical" data-open-first-tab="false" data-pro-tabs="false" data-show-global-above="false" data-show-global-below="false" data-start-tab-element="h3"> <h3>Tab one</h3> <p>Content for tab one.</p> <h3>Tab two</h3> <p>Content for tab two.</p> <h3>Tab three</h3> <p>Content for tab three.</p> </div>
-
Click Show editor, <>.
-
In the rich text editor, edit the headings and content.
- Optional
Add Heading 3 elements to make additional tabs.
- Optional
Repeat steps 3-7 to create additional tab sets.
-
Click Save.
Make sure the headings in the page content match the heading level that the app uses tocreate tabs (by default it's Heading 3).
You can see and edit heading level that the app uses to create tabs on theTabs page in the app.