Free international shipping on orders over $99

Product Metafield Custom Tab

Author: Kate Hoang 46 views

A custom tab is a user interface component you create to display custom object data or other web content embedded in the application. There are three types of custom tabs. Custom object tabs display the data of your custom object in a user interface tab.

1. Configure Metafield in Shopify Dashboard

In Shopify backend, go to Settings > Metafield option to create a Metafield definition.

Shopify backend > Settings option
Metafields option > Choose Products definitions

Choose Products option and then click the Add definition button to add Metafield definition.

Metafields option > Choose Products definitions

1.1. Add Metafield Custom Tab – Title

You need to configure some options below:

  • Name: You can add the name that you wanna show for the Metafield Custom Tab – Title here. Example: I added the field Name is: Metafield Custom Title.
  • Namespace and key: You can add any keyword here. Example: You can add the key: theme.custom_title or any words you want.
  • Description: You can add the Description for the Metafield Custom Tab – Title here. In addition, this is not a required option, so you can choose to add a Description or not.
  • Select Content Type: Please choose the content type is Text Single Line Text. This is a required option, if you do not choose the content type is Text Single Line Tex here, the Metafield Custom Tab cannot work correctly.

Actually, you guys can configure following my image below:

You can add any key for Custom tab title, ex: theme.custom_title

After add all information for definition, please click Select content type button to add a type for Custom Tab title metafield.

Content type: Files

Then click Save button to save all changes, we will got the metafield definition as image below:

1.2. Add Metafield Custom Tab – Page

You need to configure some options below:

  • Name: You can add the name that you wanna show for the Metafield Custom Tab – Page here. Example: I added the field Name is: Metafield Custom Page.
  • Namespace and key: You can add any keyword here. Example: You can add the key: theme.custom_page or any words you want.
  • Description: You can add the Description for the Metafield Custom Tab – Page here. In addition, this is not a required option, so you can choose to add a Description or not.
  • Select Content Type: Please choose the content type is Reference Page. This is a required option, if you do not choose the content type is Reference Page here, the Metafield Custom Tab cannot work correctly.

Actually, you guys can configure following my image below:

You can add any key for Custom Tab Page, ex: theme.custom_page

After add all information for definition, please click Select content type button to add a type for Custom Tab page metafield.

Content type: Files

Then click Save button to save all changes, we will got the metafield definition as image below:

2. Configure Metafield in Shopify Dashboard > Products

In Shopify backend, go to Products > All Products option and open the product that you wanna add the Custom Tab. Example: I open the Mordore Nappa Sandals product:

In the product, please scroll down to the bottom of the page, you will see the Size Guide metafield option. Kindly follow the video below:

3. Configure Metafield Custom Tab in Theme Customize

In Shopify backend, click the Customize button to go to Theme backend:

Go to Product page > Choose the product that you wanna configure the Size Guide here:

In Product main, choose the Custom tab block, click on this block, and you will see the option to configure the Custom tab metafield.

Product Main > Custom tab block
Configure Custom tab metafield here

In the Tab content option: We have 2 choices for you: Add the HTML code directly in the Tab content box or click on the insert dynamic sources button then choose the metafield option if you wanna configure different tab content for separate products.

Please follow the video below to know how to configure the metafield Custom tab:

On this page

JOIN OUR MAILING LIST AND

Enjoy 10% Off

Your First Order