How to use Shopify product title element?

Shopify product title element displays the name of the selected product on your storefront. It’s one of the most important elements in a product page, as it helps customers immediately identify what they are viewing or purchasing.

Purpose

• Show Product Name: Displays the title of the current product dynamically.

• Improve SEO: Helps search engines understand your product page content.

• Maintain Consistency: Ensures the product name matches Shopify’s product database automatically.

I. Product Title Element - Content Settings

1. SEO Settings

• HTML Tag

  • Choose which HTML tag should wrap the product title for SEO and semantic structure.

  • Options usually include Heading 1 (H1), Heading 2 (H2), Heading 3 (H3), and Paragraph.

  • Best Practice: Use H1 for the main product title on a product detail page to help search engines recognize the primary topic of the page.

Use Cases

• Product Detail Pages: Display the product name as the main heading.

• Collections or Featured Sections: Use a smaller heading or paragraph tag to display multiple product titles in a grid layout.

• SEO Optimization: Configure different HTML tags depending on where the element appears on the site (H1 for main product page, H2/H3 in product sliders or related product sections).

II. Product Title Element - Basic Settings

1. Alignment

• Align the product title left, center, right, or justified within its container.

2. Size

• Adjust width and height manually to control the space the title occupies.

3. Style

• Background: Add a background color behind the product title.

• Opacity: Control the transparency of the background color (0% = fully transparent, 100% = fully opaque).

4. Customize Text

4.1 Text alignment

• Align your text to the left, center, right, or justify it across the container.
• Helps structure your content according to the design layout.

4.2 Type

• Choose the text type: Paragraph, Heading 1, Heading 2, Heading 3, etc.
• This is useful for creating proper content hierarchy and SEO-friendly headings.

4.3 Font family

• Select from different fonts (e.g., Poppins).
• This changes the overall style and feel of your text.

4.4 Font size

• Adjust the text size in pixels (px).
• Example: Larger size for headings, smaller size for body text.

4.5 Text color

• Change the text color using the color picker.
• You can match it with your brand colors or background design.

4.6 Font weight

• Adjust how bold or light your text appears (e.g., 400 = normal, 700 = bold).

4.7 Font style

• Choose between default, italic, or oblique text styling.

4.8 Line height

• Control the spacing between lines of text.
• A higher value increases readability, especially for longer paragraphs.

4.9 Letter spacing

• Adjust the space between individual letters.
• Useful for creating a clean, modern, or dramatic look.

4.10 Text decoration

Add styling such as:

• Underline (U)
• Strikethrough (S)
• Overline (‾)

4.11 Text transform

Change text case automatically:

• Default – keeps original typing
• Uppercase – converts all letters to caps
• Lowercase – converts all letters to lowercase
• Capitalize – capitalizes the first letter of each word

4.12 Text shadow

• Add a shadow effect behind the text.

• Can make text stand out more against the background.

5. State (Normal & Hover)

• Configure different text colors for normal display and hover state to improve interactivity.

Use Cases

• Product Page Heading: Use as a large H1 heading to make the product name the most prominent text on the page.

• Collection Grid Item: Display multiple product titles in smaller font sizes within a product listing grid.

• Custom Styling: Add background color or hover effects to create a unique product card design.

III. Product Title Element – Advanced Settings

1. Display On

Control where the image is visible:

• Desktop: Show or hide the image on desktop devices.
• Mobile: Show or hide the image on mobile devices.

2. Animation

Add visual effects when the image appears on the page:

• Type: Choose from available animations (fade, slide, zoom, etc.).
• Loop: Number of times the animation should repeat.
• Duration: How long the animation lasts (in seconds).
• Delay: Time before the animation starts (in seconds).

3. Custom CSS

Apply custom styling for advanced design control:

• Class Name: Add a CSS class that you can reference in your stylesheet.
• Custom Style: Write inline CSS styles that apply only to this image element.

Thanks for reading! If you have any questions, please contact us via email: support@shopone.io