Eight Themes Support Documentation

How to set up metafields for Collapsible tabs

Introduction - Collapsible tabs with metafields

Collapsible tabs are versatile content blocks that can be added to the Product form.

Collapsible Tabs - Envy.png

They help you present a lot of product details in a compact space without overwhelming customers. For example, you can use these to communicate delivery times, specifications, materials, and product care advice.

Visitors can click on tabs to expand or hide specific information, adding another layer of engagement to the product page.

When you add content directly to a Collapsible tab, the block will display the same details for every product using the template.

In some cases, displaying generic information across all products may be beneficial (for example, shipping information). However, to take full advantage of this feature, you can highlight specific product details in a tab by using metafields.

This guide will break this process down into three parts:

  1. Creating metafields
  2. Assigning product content to metafields
  3. Linking metafields to Collapsible tab blocks

1. Creating metafields

To display bespoke product information in a Collapsible tab block using a metafield, you must first set up the metafield in your Shopify admin.

Before you begin, think about what you want your Collapsible tab to communicate.

In this example, we'll create a metafield to display product materials.

Step 1: In your Shopify admin, click on Settings.

Settings Button.png

Step 2: Go to Custom data.

Settings - Custom Data .png

Step 3: Select Products from the list of metafields.

Step 4: Click on Add Definition and enter your metafield details (Name and Description). These details are only visible to you. Note that the Namespace and key field will populate automatically. 

Example:

  • Name: Materials
  • Description: Product materials for Collapsible tab block.

Step 5: Click Type and choose either Single line text or Multi-line text. This ultimately depends on how much content your Collapsible tab requires. I.e. can the contents be summed up in a single line of text or do you want multiple lines to play with?

Collapsible Tabs - Metafield.png

Step 6: Keep One value selected and Save your metafield.

Next, we'll add product content to the metafield.

Example of Multi-line text metafield:

Collapsible Tabs - Multi-Line Text Example.png


2. Assigning product content to metafields

Your metafield will now appear on your Products. You will have to manually enter the contents for every product that will display the Collapsible tab in the template.

This can sometimes be a lengthy process depending on how many products require Collapsible tabs.

Step 1: Navigate to Products in your Shopify admin.

Shopify - Products Click.gif

Step 2: Click on a product that will use the Collapsible tab and scroll down to the Metafields section.

Step 3: Assign content to your previously created metafields.

Collapsible Tabs - Products.gif

Step 4: Save and repeat this process for each product. 

Example of multi-line text metafield content:

Screenshot 2023-12-05 at 16.47.12.png

Tip: If some products don't require metafields or Collapsible tabs, we highly recommend creating a new product template to separate them. Consider having one template for products that use Collapsible tabs with metafields and another for products that don't.

3. Linking metafields to Collapsible tab blocks

Finally, just connect the Collapsible tab block to the metafield using these steps:

Step 1: Go to your Theme Editor and access your Product template.

Step 2: Locate the Product form and add a Collapsible tab block. 

Collapsible Tabs - Block.gif

Step 3: Enter a name for the block's Heading. The name will be visible to customers across all products using this template.

Note: If necessary, you can create a separate metafield for the block name by following the same steps in Parts 1 and 2 of this guide. However, for simplicity, consider using a block name that works well with all products.


Step 4:
Delete the placeholder text within the Content field.

Step 5: Click the Connect dynamic source button in the top right corner of the Content field.

Step 6: Choose your metafield from the list. This will pull your Collapsible tab content directly from the Product page.

Collapsible Tabs - Connect Dynamic Source.gif

Step 7 (optional): Customize or remove the icon.

Step 8: Save and add more blocks if needed. Congratulations, your Collapsible tabs now use metafields to display content!

Example of a Multi-line text block underneath a Single line text block:

Collapsible Tabs - Multi-text Example Dynamic Source.pngCollapsible Tabs Example 2.png

Was this article helpful?