[P] Tabs and accordions

While product description helps convey the primary information about products to your customers, it is often needed to display extra information on the product page, such as shipping information, product ingredients, or any other secondary information.

To achieve this, our theme offers an accordion/tabs system:

We can separate extra content into two categories:

• Information that is the same for every product (for instance, shipping information).
• Information that is unique to each product (for instance, ingredients).

Prestige allows you to do both, although the instructions differ. This article details both approaches; please refer to the correct instruction.

Adding the same content for every product

This approach is the simplest of the two. With this, you can automatically add visible content for all your products.

To do that, open the theme editor, navigate to the product page, click "Add block" and select "Collapsible text." You can then enter the text directly into the theme editor.

The video below will guide you through each step:

You can also pull content from an existing page instead of manually writing it in the theme editor. To do that, select a page in the collapsible content:

Adding unique content for each product

While the previous approach works well for simple use case, it is not suitable if you want to show content that is different for each products (such as ingredients). To do that, we will need to use metafields.

1/ In your Shopify admin, click on Settings and select Custom data to create a new metafield:

2/ Click on "Products" (as we want to create a product metafield):

3/ At the top, click on Add definition. For the name, write something meaningful such as Ingredients tab. Select the Rich text metafield type:

Once everything is set up, your metafield should look like this (of course, adjust the name to your needs):

4/ Click on Save to create the metafield.

5/ Once you have created the metafield, we must connect it to the theme editor. To do that, open the theme editor, and navigate to the product section:

6/ In the sidebar, for the product template, click on "Add block" and select "Collapsible text":

7/ Click on the small database icon next to the "Content" setting:

8/ Connect the metafield that you created in step 3. Once added, it will appear inside the content:

9/ Save your changes.

10/ At this stage, nothing will appear on your product page, which is normal. We have just connected the metafield but have not yet configured any content. To do that, open the Shopify admin and navigate to a product you want to set up a tab for. Scroll down until you see the Metafields box:

11/ Click on the metafield, and add your content:

12/ Save the product, and repeat the other products' process.