Show tabs on a page

To show tabs on a page:

  1. From your Shopify admin, go to Online Store > Pages.

  2. Create a new page or click the title of the page that you want to edit.

  3. In the rich text editor, click Show HTML, <>.

    The Show HTML button
  4. 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>
  5. Click Show editor, <>.

  6. In the rich text editor, edit the headings and content.

  7. Optional

    Add Heading 3 elements to make additional tabs.

  8. Optional

    Repeat steps 3-7 to create additional tab sets.

  9. Click Save.

Make sure the headings in the page content match the heading level that the app uses to create tabs (by default it's Heading 3).

You can see and edit heading level that the app uses to create tabs from the Tabs page in the app.

Learn more about creating tabs.

Still need help? Contact Us Contact Us