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 any name here. Example: Metafield Custom Title.
Namespace and key: You can add any keyword here. Example: theme.custom_title or any words you want.
Description: You can add any text for the description.
Select Content Type: This is a required option, you have to choose Single Line Text.
Then click Save button to save all changes, we will get 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 any name here. Example: Metafield Custom Tab Content.
Namespace and key: You can add any keyword here. Example: theme.custom_tabcontent or any words you want.
Description: You can add any text for the description.
Select Content Type: This is a required option, you have to choose Single Line Text or Multi-line Text.
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 any name here. Example: Metafield Custom Page.
Namespace and key: You can add any keyword here. Example: theme.custom_page or any words you want.
Description: You can add any text for the description.
Select Content Type: This is a required option, you have to choose Reference > Page > One page.
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 > open the product that you want to add the Tab Custom HTML.
In the product, please scroll down to the bottom of the page, you will see the Tab Custom HTML metafield option. Kindly follow the video below:
3. Configure Metafield Custom Tab in Theme Customize
In Themes > Customize > Product page > Choose the product that you wanna configure the Tab Custom HTML here:
In Product main > Tab Custom HTML, click on this block, and you will see the option to configure the Tab Custom HTML metafield.
Heading: you can enter the heading directly in this box or click connect dynamic source button to choose the metafield that you configure on part 1.1.
In the Tab content option, we have 2 choices for you:
Tab content box: Add the HTML code directly here, this content will show on all products.
Click connect dynamic source button to choose the metafield that you configure on step 1, the content will be different from each product.
Please follow the video below to configure the metafield Tab Custom HTML:
[Private Offer] EComposer Partner Plan
Exclusively for Gecko 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 Gecko 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 “Gecko+EComposer” to upgrade for free
Cheers, The4.
Last updated
