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

NOTE : those instructions only apply to the sections versions of our theme (starting from Focal v5, Kagami v4 and Trademark v1). This is not supported in older versions of our themes. However if you want, you can contact us and we may be able to add support for your version.

As  we've seen here, you can use a tag mechanism to add unique tabs per product.

However, this approach suffers from several issues:

  • It forces you to create a lot of pages. If you have a lot of different Instructions, you may end up with dozens of pages named "Instructions". It is hard to edit, and hard to maintain.
  • Because those are created through pages, the pages become indexable 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!

Step 1: remove the unique tab tags

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.

Step 2: install the application

You will need then to install our app. You can download it in the App Store by  clicking here. This app is priced $8.90 / month (it has 7 days trial).

Step 3: configure the application

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:

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!

Step 4: setting the data in your products

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 three dots icon ("..."). You should see a link called "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.

Step 5: configuring the theme

The process is slightly different for our themes.

Focal and Trademark

For Focal and Trademark themes, you have nothing else to do. As soon as you add the tab content (both title and content) to your product's tabs, it will automatically appears in the product page.

Kagami

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 content attached to the "Tab 1" section in the application. Similarly, if you add the "Unique tab 2", it will displays the content attached to the "Tab 2" section in the application.