When tabs are enabled in a theme

Installing the Tabs app does not automatically add tabs to your live shop. Instead, tabs can be enabled in selected themes from the Themes settings page.

When tabs are enabled in a theme, the app:

  1. Creates snippet files to store the app code and tab data.
  2. Adds code to the layout files to load the station-tabs.liquid snippet.
  3. Adds an HTML div element to product template files to show the tabs.
Tabs being enabled in a theme
Tabs is built by theme experts

We were building Shopify themes long before we started building apps.

We've had very successful themes in the Shopify Theme Store, we've worked alongside the Shopify Themes team to help guide the technical direction of themes, and we've written articles in the Shopify blog about building themes.

Our expertise in theme development means we know what we're doing when it comes to integrating apps.

The code that the app adds to the theme will not break the theme or slow down the loading of your shop in any way.

Snippet files

The app creates the following theme snippet files to store tab data, functionality, and styling:

station-tabs.liquid
station-tabs-data.liquid
station-tabs-order.liquid
The snippet files used to store tab data
The snippet files used to store tab data
Do not change or delete the snippet files

Changing or deleting the snippet files could break the tabs or cause an error to show in your theme.

If you want to remove the snippet files then disable tabs in the theme to have the app delete them automatically for you.

Layout files

The app adds the following code to the theme.liquid file and any custom layout files in the theme's Layout folder to load the station-tabs.liquid snippet:

{% capture stn_app %}{% include 'station-tabs' %}{% endcapture %}{% if stn_app contains 'Station.Apps' %}{{ stn_app }}{% endif %}

The code is added directly below this line of theme code:

{{ content_for_layout }}
The app code in a theme layout file

Template files

The app scans files in the theme's Templates, Sections, and Snippets folders to find the standard product description code, which looks like this:

{{ product.description }}

Each time the app finds the product description code, it wraps it with a special HTML div element, like this:

<div data-station-tabs-app data-station-tabs-product="{{ product.handle }}">{{ product.description }}</div>

The div element tells the tabs where to display on the page. The content that it wraps, in this case the product description, is used for the content of the tabs.

The app code in a theme template file
Tabs may not show after being enabled

Tabs is compatible with any Shopify theme, but many themes use non-standard product description code or have their own tabs system built in.

In these cases, the app won't be able to automatically find the product description code and the tabs will not show.

This does not mean the app is broken or incompatible with your theme.

It simply means that the app code has to be added in manually wherever you'd like the tabs to appear.

Learn how to add the app code manually.

The default location of the tabs is set by the theme

Tabs work with product description content, so they show where the theme displays the product description.

Learn how to move the tabs to a new location.

Still need help? Contact Us Contact Us