Product Metafield Custom Tab
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.
Choose Products option and then click the Add definition button to add Metafield definition.
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:
After add all information for definition, please click Select content type button to add a type for Custom Tab title metafield.
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:
After add all information for definition, please click Select content type button to add a type for Custom Tab page metafield.
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.
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: