Tab Custom HTML
A Tab Custom HTML is a user interface component you create to display custom object data or other web content embedded in the application. There are 3 types of Tab Custom HTML. 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 > Custom data 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
Only config Custom Tab - Title if the tab title is specific for each product. If the tab has the same title for all products, you don't need to create it.
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 Single Line Text. This is a required option, if you do not choose the content type is Single Line Text here, the Metafield Custom Tab cannot work correctly.
Actually, you guys can configure following my image below:
Then click Save button to save all changes, we will got the metafield definition as image below:
1.2. Add Metafield Tab Custom HTML – Tab Content
You need to configure some options below:
Name: You can add the name that you wanna show for the Metafield Tab Custom HTML – Tab Content here. Example: I added the field Name is: Metafield Custom Tab Content.
Namespace and key: You can add any keyword here. Example: You can add the key: theme.custom_tabcontent or any words you want.
Description: You can add the Description for the Metafield Tab Custom HTML – Tab Content 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 Single Line Text. This is a required option, if you do not choose the content type is Single Line Text here, the Metafield Tab Custom HTML cannot work correctly.
Actually, you guys can configure following my image below:
Then click the Save button to save all changes, we will get the metafield definition as image below:
1.3. Add Metafield Tab Custom HTML – Page
You need to configure some options below:
Name: You can add the name that you wanna show for the Metafield Tab Custom HTML – 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 Tab Custom HTML – 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 Tab Custom HTML cannot work correctly.
Actually, you guys can configure following my image below:
After adding all information for definition, please click the Select content type button to add a type for the Tab Custom HTML page metafield.
Then click the Save button to save all changes, we will get the metafield definition as image below:
2. Configure Metafield in Shopify Dashboard > Products
In Shopify backend > Products > All Products option and open the product that you want to add the Tab Custom HTML. Example: I open the Mordore Nappa Sandals product:
In the product, please scroll down to the bottom of the page, you will see the Tab Custom HTML metafield option. Fill in the tab content you want for that product.
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 Tab Custom HTML here:
In Product main, choose the Tab Custom HTML block, click on this block, and you will see the option to configure the Tab Custom HTML 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.
With the Tab content option, you guys can add the content directly to the content option. This is the static content and it will appear on all products. If you wanna use specific content for a separate product, you can use Metafield Custom Tab Content.
[Private Offer] EComposer Partner Plan
Exclusively for Kalles users, you can get EComposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:
FREE 100% EComposer Standard plan for 6 months (save you $114)
Build ANY Shopify pages: Landing page, Sales Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
Create advanced sections & add to Kalles with ease
Save up to 50 pages/sections
100+ professional, stunning pre-designed templates
Anyone can build pages with live drag-drop editor
How to claim offer: Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject “Kalles+EComposer” to upgrade for free
Cheers, The4.
Last updated
