Heading
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
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:
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.
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.
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:
Icon Position: Change the horizontal alignment of the icon (left, right, top).
Icon Vertical Alignment: Adjust the vertical alignment of the icon (top, middle).
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.
Tracking
In this section, you can set up various tracking events to monitor your heading element's performance and user interactions.
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.
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.
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.
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.
You can read more about the ACTION parameter .
PageFly Events: Provides a general view of the page’s performance. You can read more
Google Analytics Event: Track events in your Google Analytics account. You can find out how to set it up .
Facebook Pixel: Track when a customer clicks on the element. You can read more .
You can get information about ATTRIBUTES, VISIBILITY, ANIMATION parameters in this .
For more detailed information, refer to the .
If you cannot find the font you want, you can use the Add Custom Font feature in PageFly. Check this or this l for more details.
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 article for more details.
