(P) Description element

In this article, you will learn about (P) Description and how to use it.

What is a (P) Description?

The (P) Description is a child-element of the Product module. You will need to drag this element into a Product module to make it work. The (P) description element is designed to upload your Shopify product description on your page to drive conversions. You can find this element in the left sidebar of the editor page.

 

Settings tab's parameters

  1. Section: This setting allows you to divide your product description into multiple parts and show specific parts intentionally. This function works extremely well when incorporated between the (P) Description and Tabs element. For further instructions, you can read more about it here

  2. Typography: GemPages provides you powerful styling options for the (P) Description element.


    • Font Size (in pixel), Line Height (in em), Letter Spacing (in pixel): For these parameters, you just simply slide the adjustment bar from left to right and vice versa to configure them.
    • Color: This parameter allows you to choose the color for the text

    • Font: You can choose between any fonts available in the Font Manager or you can add any custom font from external sources. For better page loading and graphic design, the maximum font displayed on a page is three fonts. However, there are no limits when configuring fonts in your store. You can take a look at this article to know how to add a custom font to your site. 

  3. Alignment: This parameter allows you to determine how the text is positioned within the description box. The four primary types of text alignment include left-aligned, centered, right-aligned, and justified.

  4. Read More: If your product description is too long, you can enable this feature to limit the number of characters in the product description and make your visitors click on "Read more" to reveal the remaining part of the description. 

  5. Extra Class: If you wish to customize the variant's content element in a particular way, kindly use this field to add a class name and then refer to it in the CSS file.

Design a (P) Description on different screen versions

You can adjust any parameters on different screen modes without them affecting each other, only if that parameter goes along with the Responsiveness icon as below. You can also design a (P) Description that separates the mobile and desktop versions with the Visibility feature. Further information can be found here.

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


Was this helpful?