Product Tab Feature is a feature that displays product content in either tab or accordion format. To select design of the Product Tab, please go to Product Page > Main product tabs

1. Product Tab Layouts

1.1. Product content external

The Product Tabs add-on enables store owners to add additional product details in customizable tabs. There are 2 types of product tab: Tab and Accordion.

There are several options that allow you to redesign this section, such as changing the heading of each tab, adjusting colors, margins, and more.

• Tabs type

• Accordions type

1.2. Product content inner

You can also display this section right below the product details.

• Group product tab block

• Accordion block

2. How to add content for Product Tabs

In Product Tabs, you can add a few blocks: Tab Description, Tab Custom HTML, Tab Additional Infor, Reviews, and Tab Custom Liquid. Please note that the Tab Description, Tab Additional Infor and Reviews only can add one time in the product tabs.

2.1. Tab description:

This tab will automatically display the product description that you added in Products (Shopify Admin).

2.2. Tab additional infor:

This tab will automatically display the product’s options that you added in Products (Shopify Admin).

2.3. Tab reviews:

You can integrate app review with the theme and then add the snippet code to show reviews into the Tab Review.

To know more about Review, please follow this guideline.

2.4. Tab Custom HTML:

To learn more about this block please follow this guild

2.5. Tab Custom Liquid:

This is an input field that allows you to directly insert custom Liquid or HTML code. This feature helps extend and customize the theme’s functionality without modifying the theme’s source code directly.

To show Tab Custom Liquid, you can click to add block and choose Tab Custom Liquid

2.5.1. Tab Custom Liquid for all products

Please help me to see an example about how to use this section:

This is the code used in the video:

<style>
  .custom-box {
    background-color: #f4f4f4;
    border: 2px solid #333;
    padding: 20px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
  }
  .custom-box:hover {
    background-color: #e0e0e0;
    color: #d32f2f;
    cursor: pointer;
  }
</style>
<div class="custom-box">
  This is a custom styled box!
</div>

2.5.2. Tab Custom Liquid for specific products
If you want each product has different HTML content in Tab Custom Liquid, you will use metafield. Please follow these steps:

Step 1: Create metafield and add HTML for Product metafield content for a product

Select Content Type: This is a required option, you have to choose Multi-line text.

Step 2: Go to Theme > Customize > Product Page > Product Main > Add block > Tab Custom Liquid > add the code with this syntax to connect the metafield

{{ product.metafields.the_key_for_metafield }}

*the_key_for_metafield is the namespace and key which you create at first step.