How to add tabs or drop-down accordions in product descriptions

Sometimes the description takes up a lot of rooms and looks bulky. Tabs or dropdown accordions can help you to create separate sections to better organize your product description. From there, customers will easily find specific information quickly by just clicking on the items they are interested. 

In this article, you will learn how to add tabs or drop-down accordions to product descriptions.

Create tabs in your Shopify product description  

  • Step 1: Prepare your product content and insert it into the Description of the corresponding product inside your Shopify admin > Product > All products

  • Step 2: Highlight the title text and change it to a Heading 3 style from the font menu. The Heading 3 title will be converted to the tab's heading and the tab's content will be everything writtent between your Heading 3 titles.

Common types of information for tabs are description, ingredients, nutritional information, instructions, or how to use, about the brand, reviews, features or product specifications, shipping, and returns.

  • Step 3: Save the changes you made to your product.

Organize your product content into tabs

  • Step 1: On the editor, drag a Tabs element from the left sidebar into your Product module.

  • Step 2: With our live editor feature, you can directly give a name on each tab 

If you have more than 2 tabs, you can add more tabs by clicking on the duplicate icon, such as below:

  • Step 3: Drag (P) Description into Drop element here area of the Tabs

  • Step 4: Under the Settings tab, toggle on the Divide section 

  • Step 5: Under the Section Divider item. select H3 in the dropdown list (according to the heading you have formatted in Shopify product descriptions)

  • Step 6: On the Select Number bar, slide to select the order number of the paragraph of the product description you would like to insert

Organize your product content into accordions

If you would like to display the product description in a dropdown menu, you can use the Accordion element instead of the Tabs element, just follow the aforementioned steps and replace the Tabs element with an Accordion element at step 1.

Besides using default elements of GemPages to create product tabs/ drop-down accordions, you can also integrate third-party Metafield apps to upload your product content separately. To configure the app settings on each page, you can use Liquid elements

If you're interested in learning more about the powerful and user-friendly GemPages, please feel free to read out more articles here or reach out to our Support Team. We'd be happy to answer any questions you have.

Was this helpful?