How to add tabs or accordions in product descriptions

 

This article aims to help you organize your product description elegantly and efficiently on your page with the help of the Tabs and Accordion elements. Before editing in GemPages, make sure your product description is updated and formatted properly in the Shopify Admin.

 

Update Product Description in the Shopify Admin


Step 1: Go to your Shopify Admin > Products > All Products and select your product.

 


Step 2: Make your edits in the description box. Remember to separate your headings and body text for formatting later on.

 

 

Step 3: Format your text with the toolbar. To set a text line as a heading, click the "A" button.


You can choose from Heading 2 all the way to Heading 6, whichever one you prefer, however, it’s recommended to use the same format for all of your headings.

 


In this example, we’ll be using Heading 3. Remember this format choice, as we will need to configure the (P) Description element later correspondingly to what we’ve chosen here.


Step 4: Save your changes before exiting the Shopify Admin.

 

 

Organize Product Description In Tabs

Step 1: In the GemPages Dashboard, select the page you would like to edit and enter the Editor by clicking the “Edit” button.

 


Step 2: Drag and drop a Product module onto your page. If you already have a Product module, skip this step.


Step 3: Drag and drop a Tabs element inside the Product module. 

 


The Tabs element comes with 02 tabs by default. Your number of tabs should match the number of headings you have in the product description. In this example, we will be needing 03 tabs. 


Add or remove tabs using the Duplicate or the Trash icon at the end of the tab list.

 


Step 4: Nest a (P) Description element inside each tab.

 


Step 5: Click on a (P) Description element.


In the “Section” section under the element’s Settings tab, enable the Divide Section switch, two expanded options will then appear: Section Divider and Section Number.

 


Step 6: In Section Divider, select the heading format from the drop-down menu that matches the one you set earlier in the Shopify Admin. 


This action will split your product description into sections with Headings as the divider.

  • Heading 2 in Shopify Admin equals H2 in GemPages Editor
  • Heading 3 in Shopify Admin equals H3 in GemPages Editor and so on.

For this demo, since we’ve defined the heading format in Shopify as Heading 3, we’ll go ahead and select H3 in the Editor.

 


Step 7: In Section Number, select the section you want to display using the slider or the box. 

Headings in Shopify Admin will be numbered, with a maximum of 6.

 

In this example: 

How it’s made” heading equals section number 1.
Our commitment” heading equals section number 2.
30-day money-back guarantee”  heading equals section number 3.

 


Step 8: Replace the Tab labels with your Headings.

 


Step 9: Repeat Steps 6, 7, and 8 for the remaining (P) Description elements.

 

 

 

 

Organize Product Description In Accordions

Step 1: In the GemPages Dashboard, select the page you would like to edit and enter the Editor by clicking the “Edit” button.


Step 2: Drag and drop a Product module onto your page. If you already have a Product module, skip this step.

 

Step 3: Drag and drop an Accordion element inside the Product module and adjust the number of rows to match the number of headings you have in your product’s description in Shopify Admin.

 


Add/Remove rows using the Duplicate/Trash icon.

 


Step 4: Adjust the Accordion’s number of rows to match your number of headings by 


Step 5: Fill each row with a (P) Description element.

 


Step 6: Select a (P) Description element to start configuring.


In the “Section” section under the element’s Settings tab, enable the Divide Section switch, two expanded options will then appear: Section Divider and Section Number.


Step 7: In Section Divider, select the heading format corresponding to the one chosen in your product description set up in Shopify earlier.

This action will split your product description into sections with Headings as the divider.

  • Heading 2 in Shopify Admin equals H2 in GemPages Editor
  • Heading 3 in Shopify Admin equals H3 in GemPages Editor and so on.

For this demo, since we’ve defined the heading format in Shopify as Heading 3, we’ll go ahead and select H3 in the Editor.

 

 

Step 8: In Section Number, select the section to be displayed using the slider or the box. 

Headings in the Shopify admin will be numbered, with a maximum of six.


In this example: 

How it’s made” heading equals section number 1.
Our commitment” heading equals section number 2.
30-day money-back guarantee” heading equals section number 3.

 


Step 9: Update the rows label to match your headings.

 


Step 10: Repeat Steps 6, 7, 8, and 9 for all remaining (P) Description elements.


Once finished, your product description will be tidily organized in Tabs or Accordion. You can custom with more options under the Settings tab (Typography, Color, Alignment, etc.) or design how it looks with the Design tab.


 


The Product page is usually where your customers find out all the details about your product, and a neat product description is the first step toward a high-converting Online Store.

Try this out and if you require any further assistance along the way, don’t hesitate to contact our GemPages Support Team via email or live chat.

 


Was this helpful?