How To Create an About us page with PageFly

In this article, we will go through step by step how to create a contact us page with PageFly. Related elements for an About us page will be included in this article along with detailed styling steps.

You can also check this video about how to build a complete Shopify About Us page in PageFly:

Step 1: Create a regular pageClick to copy

In the PageFly dashboard, choose the Regular Pages on Pages tab and click on the Create a new page button on the right screen to start building your page from scratch.

about us page pagefly

Or hit the Create new page from templates button to use PageFly templates for your About us page.

about us page pagefly

Step 2: Upload an image bannerClick to copy

2.1 Add a section on the page canvasClick to copy

On the element catalog, click on the Add element icon on the left toolbar, choose the Layout element and then, drag and drop the Full Section option into the page editor.

about us page pagefly

The editor will be like the image below

about us page

2.2 Add background image for the bannerClick to copy

In the Styling tab, scroll down to the BACKGROUND parameter, choose an image from the Background Image option like below.

about us page

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.

In the Styling tab, find the SPACING section.

  • Edit the top-padding and bottom-padding value 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 Padding and Margin.

In this case, we set 200px for both Padding top and bottom.

about us page

Scroll down to the BACKGROUND parameter, click on the More Settings button.

Choose the Right Center for the Background Position and Cover for Background Size.

background image

2.3 Add an “About Us” headingClick to copy

On the element catalog, click on the Add element icon, choose the Heading element and then, drag and drop the first variant into the page editor.

about us heading

  • In the General tab, change the sample text to “ABOUT US”.
  • Click on the Styling tab, in Content color, choose White color.
  • Then, in Spacing, adjust Margin top and bottom to 0px.
  • After that, scroll down to the TYPOGRAPHY parameter.
    • We choose Libre Baskerville for the font family and set up 50px for the font-size.
    • Click on the More Settings button to choose the Bold for the font-weight and set Line Height to 2em. You can check the screenshot below.
  • Click on the section > Go to Styling tab > choose align center in Text Alignment

about us page

Step 3: Add an IntroductionClick to copy

On the element catalog, click on the Add element icon, choose the Layout element and then, drag and drop the Full Section option into the page editor, under the first section.

After that, drag and drop the heading element and a 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.

about us

Step 4: Create a “reason” sectionClick to copy

This section is to show why customers should choose your product.

On the element catalog, click on the Add element icon, choose the Layout element and then, drag and drop the ⅓ – Section option into the page editor, under the previous section.

about us

After that, drag and drop a heading into the section as well. Change the text in the heading into “WHY CHOOSE US”. Adjust the font and font size in the Styling section again.

about usNow, drag an Image Elementand a Heading element in each column. We’re changing the text and its styling of the heading. Then click on the image element, go to General tab > Image Source > Upload the image.

In the General tab, select the image size. We’re choosing the Custom size option and set it to 60px for each width and height.

Step 5: Add an Instagram elementClick to copy

You will get to be known more by adding social media to your store. In this case, we will use the Instagram element.

5.1 Add a Call to action headlineClick to copy

We will add a Call to action headline “Follow us on Instagram” by using the Heading element. Just do like the previous steps, click on the Add element icon in the Element Catalog, and then drag and drop a heading element.

You can see all the styling settings for this heading in the image below

instagram about us

5.2 Add an Instagram elementClick to copy

In the Element Catalog, click on Add element icon and then drag and drop the Instagram element in the same section with the heading above.

about us

Note that you have to connect to your Instagram. Check this article about the Instagram element for more information.

Step 6: Save and Publish the pageClick to copy

After finishing editing your page, check once again the entire page.

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.

about us

You can see the preview as below:

about us

You can also check this blog to find a suitable About us example for your store.

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese. Please check the flags on the page header.

I got it!