[V6] Divide Product Descriptions into Sections

Update Product Descriptions 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.

In the example below, the headings are How it’s made; Our commitment; and 30-day money-back guarantee.

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

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

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

Organize Product Descriptions 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 descriptions. 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 same heading format as the one chosen earlier in the Shopify Admin from the drop-down menu. This action will split your product descriptions 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.