How to Use the (C) Desc Element for Your Collection Pages

In this article, you will learn about the (C) Desc element and how to use it to show your collection information in the best possible light.

About the (C) Desc Element

The (C) Desc element is a child element of a Collection page and only works as part of a Collection page. This element helps synchronize the collection description between your Shopify admin and the GemPages dashboard.

Add the (C) Desc Element to Your Collection Page

From the GemPages dashboard > Collection Pages, open the template you want to edit. You can find the (C) Desc element on the left side-bar of the Editor, under the Collection section, or you can search for it directly from the Search bar.

The Search bar in the GemPages dashboard

 

The (C) Desc element in the GemPages dashboard

 

Down below are the steps to add the (C) Desc Element to your collection page:

 

Step 1: Select a collection you want to feature. From the settings of the Product List element, click on Pick a collection and choose one from the pop-up list.

Alt text: Pick a collection you want to feature on your GemPages dashboard
Step 2: In the settings tab of the Product List element, turn on the dynamic product listing to enable automatic data synchronization.

 

Turn on the dynamic product listing in your GemPages dashboard

 

Step 3: Drag and drop the (C) Desc Element from the left sidebar to your preferred position on your collection page.

 

Click on the element to view its configurations in the left sidebar, including Settings and Design tabs. There, you can make changes to the typography, alignment, extra class name, and design of the element.

Configure the Settings Tab

1. Typography

You can determine the display of the text inside the input field.

  • Text Styles: There are two options you can select from the dropdown menu: Custom or Set up Global Styles. If you choose the former, you can scroll down and further customize the typography. If you choose the latter, the text styles will follow your settings in the Global Styles feature.

Configure the Settings tab in your GemPages dashboard

  • Font Size: Use the slider or input your preferred size in pixels.
  • Line Height: Use the slider or input your preferred line height in pixels
  • Letter Spacing: Use the slider or input your preferred letter spacing in pixels

Adjust the Font Size, Line Height, Letter Spacing and Text Color as you please

 

  • Text Color: Enter the code of the color that you want to apply to your text. For color codes and color recommendations, check this website.
  • Font: Choose a font from the dropdown menu or click on Open Font Manager to explore more font options. 
  • Text Transform: Transform the text to Uppercase, Lowercase, or Capitalize. Or select None to uncapitalize all your text.
  • Font Style: Transform the text to Bold, Italic, or Underlined. You can apply all of these styles to your text simultaneously.  

 

2. Alignment

This parameter allows you to determine how the element is positioned on your page. There are three options to choose including: left-aligned, centered, and right-aligned.

 


3. Extra class name

This section is exclusively designed for developers or tech-savvy users. If you wish to further customize the element with coding, please use this field to add a class name and refer to it in the CSS file.

 

Set up an extra class name for the (C) Desc element


Configure the Design Tab

Configure the Design tab


To style how the element looks, please navigate to the Design tab and follow the instructions in this article
 
And that’s pretty much it. Remember to Save and Publish your page to apply the updates to your live store. Feel free to explore our Help Center to discover other powerful features of GemPages. If you need any help, let us know directly via email and live chat to have them answered!


Was this helpful?