Buy Belyn and get 6 months Free Standard Plan of EComposer Install App  

Header background

Tab Custom HTML

Annie

Written by Annie

Last updated

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 > Metafields 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_titl

After adding all information for the definition, please click the 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 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 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 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, go to 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. 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 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.

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

[Private Offer] EComposer Partner Plan

Exclusively for Belyn 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 Belyn 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 “Belyn+EComposer” to upgrade for free

Cheers,

The4.