About Heading Element
Summary: The Heading element in PageFly is a crucial tool for adding and styling headings on your Shopify store pages. Headings help organize content, improve readability, and enhance the visual appeal of your site. Additionally, well-structured headings improve your site’s SEO by making it easier for search engines to understand your content.
In this article, we’ll guide you through the steps to effectively use the Heading element in PageFly, ensuring your pages are both attractive and optimized for search engines.
To obtain further information, you can refer to this video tutorial:
How To Access Heading Element
- Step 1: In the PageFly editor, click on the Elements button on the left menu.
- Step 2: Look for the PageFly tab > Click on the Heading element in the dropdown menu, under the Basic section.
- Step 3: Drag and drop the desired Heading variant into the page editor. Now you can start configuring the element.
How To Configure For Heading Element
The Heading element comes with various parameters to help you create an effective heading for your page.
To start configuring, click on the Heading element you’ve added, then:
- Go to the General tab to adjust General configurations such as text, alignment, and heading level (H1, H2, H3, etc.).
- Switch to the Styling tab for Styling configurations to customize the appearance, including font size, color, spacing, and more.
General Configuration
The General tab consists of several parameters to help you customize your heading element:
Content
| Heading Text
Insert and style the content of the heading.
|
 |
| HTML Tag
Select the heading tag for your text. (from H1, the largest, to H6, the smallest). |
 |
| Show Icon
Choose to show or hide an icon with your heading. If you choose to show the icon, you can settings for Icon position and Icon vertical Alignment:
|
 |
Action
Let’s set action with your heading:
- Go to URL: Direct users to a specific URL.
- Open Pop-up: Trigger a pop-up window.
- Scroll to Section: Scroll to a specific section on the page.
- Send Email: Open the user’s email client to send an email.
- Call Number: Initiate a phone call.
You can read more about the ACTION parameter here.
Tracking
In this section, you can set up various tracking events to monitor your heading element’s performance and user interactions.
- PageFly Events: Provides a general view of the page’s performance. You can read more here
- Google Analytics Event: Track events in your Google Analytics account. You can find out how to set it up here.
- Facebook Pixel: Track when a customer clicks on the element. You can read more here.
You can get information about ATTRIBUTES, VISIBILITY, ANIMATION parameters in this article.
Styling Configuration
The Styling tab allows you to customize the appearance of your Heading element to ensure it aligns with your brand’s design. Here, you can adjust various visual aspects such as font, color, size, spacing, and more to make your heading stand out and look professional.
For more detailed information, refer to the Styling tab guide.
Common Cases
Cannot Find Your Desired Font
If you cannot find the font you want, you can use the Add Custom Font feature in PageFly. Check this article or this video tutorial for more details.
Change Heading Size
To change the size of the heading, go to Styling tab > Font size. Drag the slider to your desired size, or enter a specific number in the Font size box on the right.
Change Heading Text Alignment
To change the text alignment, go to Styling tab > Text Alignment. First, you need to change the heading width to “Fill”, then you can choose from four alignment options: Left, Center, Right, or Justify. You can read Align elements on a PageFly page article for more details.
Change Heading Color
To change the text color, go to Styling tab > Content Color. There are 8 default colors, but you can customize the color to your liking.
Frequently Asked Questions
1. How many headings should I include in one Shopify page?
The number of headings you should include depends on the length and complexity of your content. Generally, use headings to break up sections and improve readability. Aim for a clear hierarchy with one H1 heading, several H2 headings for main sections, and H3 or H4 headings for subsections.
2. What is the PageFly heading hierarchy level?
PageFly supports different heading levels from H1 to H6. H1 is the most important and usually used for the main title of the page, while H2 to H6 are used for subheadings and further content breakdown..
3. How can I ensure my heading is mobile-friendly?
PageFly allows you to preview and adjust your heading for different devices. Use the Device Preview option in the editor to see how your heading looks on mobile. Make necessary adjustments in the Styling tab, such as font size, alignment, and spacing, to ensure your heading looks great on all devices.
Additional Resources
Previous article