# Product title

### About Shopify Product Title Element

**Summary**: [Shopify Product Title](https://help.pagefly.io/manual/shopify-elements-product-title/) element is designed to display the titles of your products on the Shopify product pages.

### How To Access Shopify Product Title Element

* **Step 1**: In the Editor, on the left sidebar, click on **Element catalog** and switch to **Shopify tab**
* **Step 2**: You can quickly find the **Product Title** element under the Product drop-down menu. You can also access the **Product Title** element by searching it in the **Search box**.
* **Step 3**: Drag and drop the element into the page and start editing. The **Product Title** element comes with two common variants:

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-1a6a08334c7ba61154a04b3815165540832f6d72%2FAD_4nXcOJLek9iP2-535ztRIoP7deCzU24foU6sNOMoQ3hN4y513V7d3bahy8IKfDJUAi5PZ5SO4p9IfmDfTDVstnzwDlL49EKeN7-842o8k2X6StOb3LISg-SbAfYCC08tKVDlbyFua4pRRcSi6M0dciw?alt=media)

* Product Title: Display a product title without a hover underline animation.
* Product Title: Add a hover underline animation to your title.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcUFK72HkIGtzyDQaXdhTE7IVVqEwcmKq-or_PxZSbJiKTDlQkKuoSgmBVBWW4Z332rroiLGLqz7rLa6CBCqLoOcQLTjwWTbsC_8meqIstYePcyt_U8iKvbCzh8IiSQuFFpF8KPp7EjmX_kVzBCoJ26uawP?key=kd3yWTudJK4PySk6sJwg6A" alt=""><figcaption></figcaption></figure>

### How To Configure For Product Title Element

When clicking on the Product Title element, you will see various types of parameters that help you fine-tune the look however you want.

#### General Settings

The General tab is where you find all the customizations to set up your product title.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-3adc1420d720c65bbf4706eb65aabb0d6e3840df%2FAD_4nXeNpgg3PnijSFAwpBVh8Qx8P0gR4iw7-SXbafRkBKe_8gEM8TgtZuBgehh4hrhk0-g9lG2kAIJyKCkcVhh1rlUmVw4hTcqq2FFvGATb1nOiOmBOdCPaajbzy8VxfdeWcSVxyNAXClCCrLlWjbOMNQkeykd3yWTudJK4PySk6sJwg6A.png?alt=media)

**1. Product Source**

The Auto option is the default when you use the Product Title element. The product title will update dynamically according to the product assigned.

There are 2 variants for the Product Source:

| **Auto**           | A product was assigned to the product page through Page Assignment and will be displayed in the Editor |
| ------------------ | ------------------------------------------------------------------------------------------------------ |
| **Custom Product** | You can assign any product to your product page                                                        |

{% hint style="info" %}
**Note**: If you are on the Product Page and use the Product Title element, you can choose the Product Source option. However, if you are on a Regular Page and use this element, the Product Source option is disabled and the Custom Product is chosen by default.
{% endhint %}

When you drag & drop the Product Title element, you can place the title of your product outside or inside the Product Details element.

* **Outside the Product Details element**: There are 2 options to choose from which are **Auto** and **Custom** Product.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-845e2b689b1d845f9c6d8694dc63a5323500cd53%2FAD_4nXcciO_LowomlOpABOcniiTqzZTnipvg2L-f5Mxziunxur5niO1MDFZjNH9bOyPRPceJ2rINjNAQEyzh8lYmroyp9gJ2vWQXfK8J31u3lYSyu4Agr_ejDqoUKeRM2nfonxhQ0_bGUL47bSjZ1NDdkwkeykd3yWTudJK4PySk6sJwg6A.png?alt=media)

* **Inside the Product Details element:** The Product Source option is disabled and you can’t change the assigned product on the Product Title element.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-83562fb3525fd542836b26ec52ea4ca04c02b571%2FAD_4nXcYR7buUvVA90IZl_gwHhj-6PPxGDOsPDXAvt4oHUnwifeyBXopb4Uo5iIxJr9AFjuXTObf6If-XvU2ltRJPHGdSJ8QPfKpNCT2LMaF0NDHUhz_MahyTzQl4KZyvV9PiwcUK93OfvN16UK-ek-SuQkeykd3yWTudJK4PySk6sJwg6A.png?alt=media)

{% hint style="info" %}
**Note**: To edit the assigned product, head to the top of the Editor > Choose Product Details section.
{% endhint %}

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-48f63b1f9bdc58b073e18ad7e9a30ea5c3263215%2FAD_4nXcWE7Xb5VWQaTkvAryCYw6Hdi_wuSUalCkerz9LwznfGq3bwLDuZIXxa2Ac7gKNqbV72diIXbpN4OZGpu5MIwuAYhzuqUSNwiAWcPxIW1VdrYGs9hM-wJb4PzIDQ992narrkrNMsgGCQWlg91qakeykd3yWTudJK4PySk6sJwg6A.gif?alt=media)

**2. HTML Tag**

You can set any header tag from H1 to H6. These tags are used to define the HTML headings.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-b5399d09c5166cef9fd0df0f8009aaeef9cdbe3d%2FAD_4nXcmh5froJM_qCsnxiijSd5b1FH3vdXBs28jMXNOt7FZP3bRf30J7LNQCHd7JcjVRbSWiUbWWW9gc4bZV0782fZqZcKTw1ygw-0IXBl9VLXY4HrJgPkTrG7Z7WwFmgD1l1SFCKDcJwzS-SpsuawLkeykd3yWTudJK4PySk6sJwg6A.png?alt=media)

**3. Link To Product**

Enable this option if you want to link the title to the corresponding product page.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-7d494ec7c78c03f15f9d969ad1d81bb6f522d95a%2FAD_4nXe63vN8LVo-qLSQ4uS7P-pbLRHywA5tNnwjCLQBUj1ly7cvSrI034Yg3SpTygmfy-qR7oqvK6gA1hSTvL_77qC9YeiP-9DE8aNHMiLUQ11wFLcWQh81Ks3In22Gl9-0tg0TQSbDxFsYKypnbFckkeykd3yWTudJK4PySk6sJwg6A.png?alt=media)

For further information on other “**General**” tab parameters, you can read [Page Editor – General Tab](https://help.pagefly.io/manual/elements-general-settings/) article.

#### Styling Settings

For the detailed settings guides of the “**Styling**” tab, you can read [Page Editor – Styling Tab](https://help.pagefly.io/manual/elements-style-settings/) article.

### Best Practices For Using Product Title Element

* Ensure the product title accurately reflects the product's name and core function
* Keep the product title concise and informative, avoiding overly lengthy descriptions
* Place the product title element prominently on product pages and category listings, ensuring it's easily visible to users

### Frequently Asked Questions

**1. What does the Product Title mean?**

Product Title is the name of your product to show on your eCommerce store. The product title should be functional and easy to understand.

**2. How long should a Product Title be on Shopify?**

From 70 to 90 characters

**3. What is the Difference Between a Product Title and an SEO Page Title?**

Product Title is the name of your product, and the SEO Page Title is to describe and SEO-optimized for a webpage. The SEO Page Title should contain the product name, the main keyword and necessary number.

### Additional Resources

* [Shopify Product Details | How to Create One with PageFly?](https://help.pagefly.io/manual/shopify-elements-product-details/)
* [How to Use Shopify Collection Title](https://help.pagefly.io/manual/shopify-elements-collection-title/)
* [How to Use Shopify Blog Post Title Element?](https://help.pagefly.io/manual/shopify-element-blog-post-title/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.pagefly.io/page-structure-and-elements/shopify-elements/product/shopify-elements-product-title.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
