About Shopify Product Title Element![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
Summary: Shopify Product Title element is designed to display the titles of your products on the Shopify product pages.
This product title works best if you put it inside the product details element.
Before diving into the details, watch this step-by-step video tutorial:
How To Access Shopify Product Title Element![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
- Step 1: From PageFly’s Dashboard, go to the page listing and choose the page you want to edit.
- Step 2: In the Editor, on the left sidebar, click on Add shopify element
- Step 3: You can quickly find the Product Title element under the Product drop-down menu
- Step 4: Drag and drop the element into the page and start editing
You can also access the Product Title element by searching it in the Search box.
The Product Title element comes with two common variants:
- Product Title: Display a product title without a hover underline animation
- Product Title: Add a hover underline animation to your title.
How To Configure For Product Title Element![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
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![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
The General tab is where you find all the customizations to set up your product title.
Content![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
- 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 |
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.
Inside the Product Details element: The Product Source option is disabled and you can’t change the assigned product on the Product Title element.
Note: To edit the assigned product, head to the top of the Editor > Choose Product Details section.
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.
- HTML Tag
You can set any header tag from H1 to H6. These tags are used to define the HTML headings.
- Link To Product
Enable this option if you want to link the title to the corresponding product page.
Tracking![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
This is a place where you can set up the page analytics:
- PageFly Events to track the number of clicks on an element. For more information about this feature, check out our guidelines.
- Google Analytics event to your GA account. We’ve gathered a step-by-step guideline on how to set up Google Analytics here.
- Facebook Pixel when a customer clicks on the element. Discover further details on how to set up Facebook Pixel on your pages now.
We’ve also put together detailed information about Attributes, Visibility, and Animation in this article. Don’t hesitate to check it out!
Styling Settings![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
Global style![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
- There are 7 default heading options you can choose for the product title element.
- You could also define the state for the product title element. Three options include Normal state, Mouse over state, and Active/selected state
Overall![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
- Content Color: Change the color of Product Title content by using the available parameter
Spacing![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
- Padding: edit to adjust the inner spacing of the element’s container
- Margin: edit to adjust the outer spacing of the element’s container
Typography![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
- Font Family: choose your desired font for Product Title
- Font Size: Adjust font size by dragging the black dot or by entering a number in the box on the right
- Text Alignment: There are 4 text alignment options available, including Left, Right, Middle, and Justify
Background![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
- Background Color: choose background color for product title by using the available parameters
- Background image: Click Select image > Choose image > Click Select
Best Practices For Using Product Title Element![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
- 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![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
What Product Title Means?![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
Product Title is the name of your product to show on your eCommerce store. The product title should be functional and easy to understand.
How Long Should A Product Title Be On Shopify?![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
From 70 to 90 characters
What Is The Difference Between A Product Title And An Seo Page Title?![Copy Click to copy](https://help-cdn.pagefly.io/wp-content/themes/manual/images/icons/link.svg)
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 main idea, main keyword and necessary number.