PRODUCT - Using our app SuperFields to add unique tabs per product

Our themes have two way to specify unique tabs per product. The first one is by using tabs and pages (instructions  can be found here).

However, this approach suffers from several issues:

• It forces you to create a lot of pages. For instance, if you have 25 products who have distinct "instructions" tab, you may end up with 25 pages named "Instructions". It is hard to edit, and hard to maintain.
• Because those are created through pages, the pages can be indexed by Google separately (as their own page). If you have enabled global search, those pages will also appear in the search results, which is not desirable.

To prevent this, we have developed a metafields application that can be used for a lot of different cases, and we have created native integrations between our themes and this app.

Metafields are additional piece of data that are saved to your products (or articles, collections...) to add more information to your product, such as tabs. Let's do it!

1

If you have  previously followed those instructions to add unique tabs using the tag mechanism, you will need first to make sure that you have removed those special tags from your products.

2

Install our application. You can download it in the App Store by  clicking here. This app is priced $8.90 / month (it has 7 days trial).

3

From the "Apps" section of your admin, open the SuperFields app. In the "Configure metafields" section, click on "Products":

If this is the first time you are using the app, you will have no groups created. The app will automatically display you the theme integration. Some of our themes provide different integrations, so make sure that you click on the " Custom product tabs" one:

4

Click on the "Install" button. It will automatically reload the page and display the configuration. Do not be afraid, it's already over, you can now leave the app!

If you are not seeing this, or if the app says that "Your theme does not have any integration with SuperFields", make sure that our theme is set as the published theme. If it's not the published one, the application won't be able to detect it. If you have verified that the theme is indeed the published one, do not hesitate to contact us and we'll be happy to have a look!

5

Now that the app is installed and properly configured, we can start some more interesting stuff.

In your Shopify admin, open a product for which you want to add a custom tab. In the product page, click on the "More actions" link, and select "Edit product metafields":

Click on this button. You will be automatically redirected to our application. You will be able to enter the tab title and content for two tabs:

No more pages to create! Your data is now cleanly related to your product.

6

The process is slightly different for our themes.

• Focal, Trademark, Prestige and Warehouse
• Kagami

For Focal, Trademark, Prestige and Warehouse themes, you have nothing else to do. As soon as you add the tab to your product, it will automatically appears in the product page.

Kagami allows you to re-order product tabs. Because of that, the theme cannot know in advance where to display the unique tab. Therefore, we are going to need to manually add the tab.

To do that, in the Theme Editor, navigate to a product page, so you can have access to the dedicated Product section setting.

Then, click on "Add content", and select either "Unique tab 1" or "Unique tab 2":

If you add the "Unique tab 1", it will displays the page attached to the content defined in the Tab 1 in the app. Similarly, if you add the "Unique tab 2", it will displays the page defined in the Tab 2.