Overview
Summary: PageFly empowers you to design and customize a Shopify About Us page without any coding skills. In this article, we’ll go through a step-by-step guide on how to create the About Us page with PageFly.
You can check this video for more visually about how to build a complete Shopify About Us page in PageFly:
Requirements
- Published Theme: Your selected theme must be published. Unpublished themes prevent PageFly pages from appearing in the Shopify menu. Publish your theme to ensure visibility.
- Publish Your Page: Activate the Publish button on your PageFly page to save and synchronize it with your Shopify store. A confirmation message will verify successful publication.
How To Create An About Us Page With PageFly
To create an About Us page with PageFly, follow these steps:
Step 1: Create Regular Page
First, go to the PageFly dashboard, click on Pages, then select “Create blank page” and choose “Regular” from the dropdown menu to start building your page from scratch.
You can choose to create a page with:
- Gen 2 Editor (Beta): A new editor featuring flex sections and flex blocks, optimized for speed with flexible, customizable layout editing and more intuitive controls.
- Gen 2 Editor Beta is now closed. Pages and sections created with Gen 2 Editor will remain fully functional. Enhanced version will be cooming soon.
- Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model (slot plans).
- Legacy Editor: The old editor that uses a section/row/column system.
Or you can click on the Create from template button to use PageFly templates for your About Us page. Templates are available for both the Gen 2 and Legacy editors.
Step 2: Upload An Image Banner
Add A Section On The Page Canvas
Legacy Editor
On the element catalog, click on the Add element icon on the left toolbar, choose the Layout element, and drag and drop the Full Section option into the page editor.
Then, click on Section on the breadcrumb > Go to the General tab > Turn off the Set fixed width option.
Gen 2 Editor
With the Gen 2 Editor, the steps are slightly different:
- Step 1: Click on “Element” in the left toolbar. In the PageFly tab, click on Layout, then drag the Flex section layout onto the page.
- Step 2: Go to the Styling tab, scroll down to Content Max Width, and choose “Fill Container.”
Add Background Image For The Banner
In the Styling tab, scroll down to the Background parameter > Choose an image from the Background Image option.
You can upload the image which is available in the Image Manager or upload it from the Internet. Read more here to know more details.
Next, scroll down to the Spacing section > Edit the top-padding and bottom-padding values to change the height of the section to fit your image’s height. The little box in the middle will set the same value for all four sides of the Padding and Margin.
In this case, we set 200px for both the padding top and bottom.
Continue scrolling down to the Background parameter > Click on the More Settings button > Choose the Center for the Background Position and Cover for Background Size.
Add An “About Us” Heading
Legacy Editor
On the element catalog, click on the Add element icon > Choose the Heading element > Drag and drop the first variant into the page editor.
Then, In the General tab, change the heading text to “ABOUT US”.
Click on the Styling tab > Content color > Choose white color.
In Spacing, adjust the margin top and bottom to 0px. Scroll down to the Typography parameter > Choose Libre Baskerville for the font family and set up 50px for the font size.
Click on the More Settings button > Choose Bold for the font-weight.
Click on the section > Go to Styling tab > Choose align center in Text Alignment.
Gen 2 Editor
With the Gen 2 Editor, adding a heading and adjusting its styling is similar to the Legacy Editor. However, the steps to align the heading within the section are slightly different:
- Click on the Flex section and go to the Styling tab.
- Under Align Items, choose Center.
Step 3: Add An Introduction
Legacy Editor
On the Element catalog, click on the Add element icon > Choose the Layout element > Drag and drop the Full Section option into the page editor.
After that, drag and drop the Heading element and Paragraph element into the section as well. Now this section is for your brand summary or story.
In the General tab, change the text to suit your business content. Use the Styling tab to adjust the font and font size.
Gen 2 Editor
With the Gen 2 editor, the styling settings are similar to the Legacy editor. However, there are some differences in how you align content within a section:
- Click on the Flex section and go to the Styling tab.
- Scroll to Align Items and choose Center.
Step 4: Create A “Reason” Section
This step is to show why customers should choose your product.
On the Element catalog, click on the Add element icon > Choose the Layout element > Drag and drop the ⅓ – Section option into the page editor.
Drag and drop a heading into the section as well. Change the text in the heading to “WHY CHOOSE US”. Adjust the font and font size in the Styling section again.
Now, drag and drop the Image element and Heading element in each column > Apply the content > Switch to the Styling tab to customize the text.
Step 5: Add An Instagram Feed Element
The Instagram element lets customers get a glimpse into your brand personality, enhances brand trust, customer engagement, and ultimately, drives sales.
Add A Call To Action Headline
Add a Call to action headline “Follow us on Instagram” by using the Heading element. Click on the Add element icon in the Element Catalog > Drag and drop the Heading element. Switch to the Styling tab to customize the text.
Add An Instagram Feed Element
In the Element Catalog, click on Add element icon > Drag and drop the Instagram feed element in the same section with the heading above.
Note that you have to connect to your Instagram. Check this article about the Instagram feed element for more information.
Step 6: Save And Publish The Page
Finally, click on the Publish button and Live view to see the page in the live. If you don’t want to publish yet, click on the Save button and see it in the Preview mode.
Check out this best Shopify About Us page template examples article for reference.
Use Cases
- SEO Optimization: Optimize your About Us page for search engines by using relevant keywords, meta descriptions, and alt text for images.
- Clarity and Conciseness: Keep your content clear and concise to ensure visitors quickly understand your brand’s story and mission.
Frequently Asked Questions
What type of information is on the About us page?
- Your brand story: Explain your origin, mission, and what sets you apart.
- Your team: Introduce the faces behind the brand, fostering a human connection.
- Your values: Highlight what matters most to your business and how it reflects in your products or services.
- Customer testimonials: Showcase positive feedback to build trust and credibility.
- Call to action: Encourage visitors to learn more, subscribe, or follow you on social media.
Can I use PageFly to create my About us page?
Absolutely! PageFly’s drag-and-drop interface allows you to easily design and customize an engaging About Us page for your Shopify store.
Previous article
