Overview
A FAQ (Frequently Asked Questions) page is an essential part of any website. It helps answer common questions your customers might have, saving them time and providing them with immediate assistance.
An effective FAQ page can improve customer satisfaction, reduce support requests, and build trust with your audience. In this guide, we’ll walk you through the steps to create a professional and functional FAQ page using PageFly.
Requirements
Before you start creating your FAQ page with PageFly, make sure you have the following prepared:
- List of Frequently Asked Questions: Prepare common questions and answers organized into categories if needed.
- PageFly Installed on Shopify: Ensure the PageFly app is installed and set up on your Shopify store.
- Content and Images: Prepare any additional content and images you might need for your FAQ page, such as product images, icons, or graphics to enhance the visual appeal.
Legacy Editor – How To Create A FAQ Page With PageFly?
Check out this informative video showcasing a great example of a Shopify FAQ Page built by PageFly!
Step 1: Create A Regular Page
- In the PageFly dashboard, select the Pages tab.
- Click on the “Create blank page” button on the right side of the screen, then select “Regular”
- Select “Legacy Editor”
Alternatively, you can click on the Create from a template button to use PageFly templates for your FAQ page.
Step 2: Build Your FAQ Page
1. Add A Heading
Start by adding a heading:
- Navigate to the left menu, select Elements, go to the PageFly tab, and drag the Heading element to the canvas.
- Navigate to the General tab and enter the heading in the heading text box.
- Move to the Styling tab to adjust the heading’s size, color, font, spacing, etc.
- Set the background color or upload a background image (optional):
- Set the background color: Select the section covering the heading > navigate to the Styling tab > scroll down to Background color > choose your desired background color.
- Add a background image: Select the section covering the heading > navigate to the Styling tab. Scroll down to Background image > Choose your desired image from the Image Manager or upload one from your device.
For more information, check out the Styling tab here.
2. Add A Paragraph
Next, add a paragraph to your FAQ page. This can be a short introduction for your FAQ page:
- Select the Paragraph element from the left menu and drag it to the canvas.
- Navigate to the General tab and enter your content in the Paragraph text box.
- Move to the Styling tab to adjust the heading’s size, color, font, spacing, etc. You can also set the background color or add a background image (optional).
For more information, check out the Styling tab here.
3. Organize Your FAQs
For organizing your FAQs, consider the Accordion and Tab elements.
3.1 Using Accordion Element
Use this element to create collapsible content.
- Navigate to the left menu, select Elements, go to the PageFly tab, and select the Accordion element and drag its variant to the canvas.
- Clicking on the Accordion item and navigate to the General tab > enter your question in the Header text.
- Add the answer by dragging the Paragraph element to the Accordion item.
- Navigate to the General tab to type the answer into the Paragraph text box.
Below is an example of an FAQ section using the Accordion element:
3.2 Using Tab Element
Use this element to categorize questions, such as “Shipping” or “Sizing & Fit”.
- Navigate to the left menu > select Elements > go to the PageFly tab > select the Tab element and drag its variant to the canvas.
- Name your question categories by clicking on the Tab and navigating to the General tab > enter the category name in the Header text box.
- Add the questions and answers for each category using the Heading and Paragraph element. Select them in the PageFly tab from the left menu and then drag and drop them to the Tab element.
- Navigate to the General tab of Heading and Paragraph elements to add questions and answers.
Below is an example of an FAQ section using the Tab element:
To save time, you can also use the FAQ section from PageFly’s premade sections:
- On the left menu, go to Page content > hit the Add section button.
- Click Template > select “FAQs” in the Category dropdown menu > hit the Select button.
- Customize the content in this section with your prepared FAQs.
Step 3: Save And Publish The Page
- After completing your page, click on the Save button to save your page.
- Click the Publish button to publish it.
- Check the live view by clicking the Live view button.
Step 4: Add FAQ Page To Your Shopify Store’s Menu
Now your FAQ page is ready, let’s add it to your Shopify Store’s menu so your customer can access it:
- Go to your Shopify dashboard > navigate to Online Store > Click on Navigation.
- Decide where you want customers to access the FAQ page (Footer, Main Menu, Quick Links). In the following example, we choose Footer.
- Click Add menu item.
- Enter the name (FAQs) and select the FAQ page you created.
- Hit the Add button and then click Save menu to save your change.
Gen 2 Editor – How To Create A FAQ Page With PageFly?
Step 1: Create A Regular Page
- In the PageFly dashboard, select the Pages tab.
- Click on the “Create blank page” button on the right side of the screen, then select “Regular”
- Select “Legacy Editor”
Alternatively, you can click on the Create from a template button to use PageFly templates for your FAQ page.
Step 2: Build Your FAQ Page
1. Add A Heading
Start by adding a heading:
- Navigate to the left menu, select Elements, go to the PageFly tab, and drag the Heading element to the canvas.
- Navigate to the General tab and enter the heading in the heading text box.
- Move to the Styling tab to adjust the heading’s size, color, font, spacing, etc.
For more information, check out the Styling tab here.
2. Add A Paragraph
Next, add a paragraph to your FAQ page. This can be a short introduction for your FAQ page:
- Select the Paragraph element from the left menu and drag it to the canvas.
- Navigate to the General tab and enter your content in the Paragraph text box.
- Move to the Styling tab to adjust the heading’s size, color, font, spacing, etc. You can also set the background color or add a background image (optional).
For more information, check out the Styling tab here.
3. Organize Your FAQs
For organizing your FAQs, consider the Accordion and Tab elements.
3.1 Using Accordion Element
Use this element to create collapsible content.
- Navigate to the left menu, select Elements, go to the PageFly tab, and select the Accordion element and drag its variant to the canvas.
- Clicking on the Accordion item and navigate to the General tab > enter your question in the Header text.
- Add the answer by dragging the Paragraph element to the Accordion item.
- Navigate to the General tab to type the answer into the Paragraph text box.
Below is an example of an FAQ section using the Accordion element:
3.2 Using Tab Element
Use this element to categorize questions, such as “Shipping” or “Sizing & Fit”.
- Navigate to the left menu > select Elements > go to the PageFly tab > select the Tab element and drag its variant to the canvas.
- Name your question categories by clicking on the Tab and navigating to the General tab > enter the category name in the Header text box.
- Add the questions and answers for each category using the Heading and Paragraph element. Select them in the PageFly tab from the left menu and then drag and drop them to the Tab element.
- Navigate to the General tab of Heading and Paragraph elements to add questions and answers.
Below is an example of an FAQ section using the Tab element:
To save time, you can also use the FAQ section from PageFly’s premade sections:
- On the left menu, go to Page content > hit the Add section button.
- Click Template > select “FAQs” in the Category dropdown menu > hit the Select button.
- Customize the content in this section with your prepared FAQs.
Step 3: Save And Publish The Page
- After completing your page, click on the Save button to save your page.
- Click the Publish button to publish it.
- Check the live view by clicking the Live view button.
Step 4: Add FAQ Page To Your Shopify Store’s Menu
Now your FAQ page is ready, let’s add it to your Shopify Store’s menu so your customer can access it:
- Go to your Shopify dashboard > navigate to Online Store > Click on Navigation.
- Decide where you want customers to access the FAQ page (Footer, Main Menu, Quick Links). In the following example, we choose Footer.
- Click Add menu item.
- Enter the name (FAQs) and select the FAQ page you created.
- Hit the Add button and then click Save menu to save your change.
Use Cases
- Customer Support: An FAQ page helps answer common questions, reducing the number of support tickets and emails. Customers can find answers quickly, leading to higher satisfaction.
- Product Information: It provides detailed information about products, such as specifications, usage instructions, and troubleshooting tips, helping customers make informed purchasing decisions.
- Shipping and Returns: FAQs about shipping policies, delivery times, and return processes give customers clarity on what to expect, reducing confusion and potential disputes.
- Company Policies: An FAQ page can outline company policies, such as privacy, security, and terms of service, ensuring transparency and building trust with customers.
Tips And Best Practices
- Write Clear, Concise Answers: Craft straightforward, easy-to-understand answers, avoiding jargon.
- Optimize for Mobile: Ensure your FAQ page is optimized for seamless viewing on mobile devices.
- Include Relevant Visuals: Add supporting images, graphics, or videos to illustrate concepts.
- Link to Other Resources: Include links to related pages like returns, shipping, and contact info.
Frequently Asked Questions
1. Can I customize the design of my FAQ page?
Yes, PageFly allows you to fully customize the design of your FAQ page, including fonts, colors, and layout, to match your brand’s style.
2. What should be included in a FAQ page?
A FAQ page should include common questions and answers about your products or services, shipping and returns policies, company information, and any other relevant details that customers frequently inquire about.
3. How do I ensure my FAQ page is easy to navigate?
Use elements like Accordions and Tabs to organize questions into categories. This helps visitors find the information they need quickly and efficiently.
4. What is the difference between section and flex section (Gen 2)?
Sections allow users to design page layout in row-column container structure and can be added both in PageFly Sections and PageFly pages. Flex sections, on the other hand, don’t have row-column structure. It allows adding elements directly on PageFly pages and more flexible customized layout by Flex blocks.
Version Update
In addition to the traditional page building mechanism (row, column), PageFly 4.16.0 adds Gen 2 Editor, a more flexible and efficient technology that allows creation of complex and highly customizable layouts, which comes with an intuitive and user-friendly interface.
Previous article
