Product Title Element

What is a Product Title Element?

The Product Title element in GemPages is a dynamic element that automatically displays the title of a product from your Shopify store.

How to Add the Product Title Element

Note: The element can only be used inside the Product element or the Product List element.

Step 1: From the GemPages editor, open the page where you want to add the Product Title.

Step 2: If you already have a Product element on your page, you will see the Product Title included by default.

Step 3: To add another one, open the left sidebar, search for Product Title, and drag it into the Product element or Product List element.

Step 4: Place it in the position you want within your product module.

Once the element is on your page, click on it to open the Settings panel on the left-hand side. The panel includes two sections: Settings and Advanced.

Configure the Settings Tab

1. Product Source

The Product Source ensures that the Product Title is linked to the correct product. By default, the element pulls the title from the Product element it belongs to. This way, the displayed title always matches the product in Shopify.

2. Text styles

The Text Styles section allows you to customize how the product title looks on your page. 

You can:

• Styles: Select a predefined text format such as Heading or Paragraph.
• Font: Choose the font family for your product title.
• Size: Adjust the text size to make the title more prominent or subtle.
• Color: Pick a color for the title text.
• Align: Align the text to the left, center, or right.
• Font Weight: Control the thickness of the text, from light to extra-bold.
• Line Height: Adjust the vertical spacing between lines of text.
• Letter Spacing: Change the spacing between individual characters.
• Transform: Convert the text to uppercase, lowercase, or capitalize only the first letter of each word.

3. Effect

You can edit the product title style on hover.

4. Display option

Control how much of the product title is visible:

• Max Line: Max liner: Maximum number of lines the product title will be shown.

5. Product link

Enable this option if you want the product title to be clickable. When turned on, clicking the title will take customers directly to the product’s detail page in your Shopify store.

6. SEO

Optimize your product title for search engines:

• HTML Tag: Select the appropriate tag (e.g., H1, H2, or paragraph) to improve your store’s SEO structure. For example, using H1 for the main product title helps search engines recognize it as a primary heading.

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.

How to Change Product Title?

Since the Product Title element is dynamic, you cannot change the text directly inside GemPages. Any edits must be made in your Shopify store.

Step 1: Access your Shopify Dashboard. Go to Products and select the product you want to edit.

Step 2: Change the product title and click Save.

Step 3: Return to GemPages and choose Sync again. The updated title will appear in the Product Title element.