Note: The following guide on implementing collapsible tabs on product pages may require you to update your theme to the latest version. Our themes are continuously improved to provide better functionality and performance, so some features discussed here might not be available in older versions. We recommend ensuring your theme is up-to-date to take full advantage of these enhancements. If you need assistance with updating your theme, please refer to our theme update guide or contact our support team.
Introduction - Collapsible tabs with metafields
Collapsible tabs are versatile content blocks that can be added to the Product form.
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:
Part 1: Creating metafields
Part 2: Assigning product content to metafields
Part 3: Linking metafields to Collapsible tab blocks
Part 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.
Step 2: Go to Custom data.
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?
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:
Part 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.
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.
Step 4: Save and repeat this process for each product.
Example of multi-line text metafield content:
Part 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.
Step 3: Enter a name for the block's Heading. The name will be visible to customers across all products using this template.
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.
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: