How To Create a Homepage with PageFly

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

You can consult this article for building a landing page.

Step 1: Create a new home page

Create a new page in the PageFly dashboard

You can quickly create a blog post page by selecting one of the two options:

  • (+) icon
  • [ Create a page ] button

Create a new page in the PageFly Home Pages list

In the PageFly dashboard, choose the Regular Pages list and click on the Create a home page button on the right screen. You can see the screenshot below

After that, you need to add a title for the page and save it to start to build from the scratch.

You can watch the short video below

 

Step 2: Create a banner for the home page

2.1 Add a section on the page canvas

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

The editor will be like the image below

2.2 Add background image for the banner

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

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 485px for the Padding top and 55px for the Padding bottom

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

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

2.3 Add a slogan for your store

A quote or a slogan makes your store unique. Customers will remember your store if you have a special slogan, especially when you customize it visually prominent.

So we will use a Heading element on the banner

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

After dragging and dropping the element on the banner, we will change the content for it.

  • Heading over to the General tab, change the content in the Heading Text box of the CONTENT parameter.
  • Change the HTML Tag to H2. Adding HTML Tag is good for SEO for your store.

Switching to the Styling tab and change the styles for it:

  • Change the font-family to Playfair Display font
  • Adjust the font-size to 40px
  • Click on the More Settings button and choose the font-weight as Bold style.

2.4 Add a primary call to action button on the banner

It’s very important to determine a primary call to action for an online store, especially on the home page. This call to action button will let users take action that you – store owner expect the most.

  • On the element catalog, click on the Add element icon (the first icon), choose the Button element and then, drag and drop the first variant on the banner

  • Now, head over the General tab and change the content for the button.
    • In the Button Text box, change the default content into SHOP NOW.
  • Switch to the Styling tab, we will style for the button in the normal state.
    • Set up 20px for the Padding top and bottom and 40px for the Padding right and left.

    • And we will set up the Josefin Sans font for the text in the TYPOGRAPHY parameter.
    • Scroll down to the BACKGROUND parameter, we will set rgb(180, 23, 36) code for the background color.

  • Staying in the Styling tab, we will style for the button of the Hover state.
    • In the OVERALL parameter, change the content color to the black one.
    • Scroll down to the BACKGROUND parameter, change the background color to the white.
    • And finally, when you hover on the button, you can see the change.

Step 3: Add a description of your store section

When customers visit your store, one of the most essential things you need to do is letting them know what products/ services that your store provides. Don’t make customers confused or don’t make them wonder themselves what sold in this store.

3.1 Add a section layout

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

3.2 Add a paragraph element to describe shortly your store

  • On the element catalog, click on the Add element icon (the first icon), choose the Paragraph element and then, drag and drop the first variant on the section.

  • Click on the paragraph element to change the content. In the General tab, put the content that describes shortly about your store you want here

  • Continue to the Styling tab to customize style for the paragraph:
    • Change the font-family to Playfair Display font
    • Adjust the font-size to 30px
    • Click on the More Settings button and choose the font-weight as Bold style and set up 1.5 em for Line Height.

3.3 Add a background image for the description

  • In the Styling tab, scroll down to the BACKGROUND parameter, choose an image from Background Image option like the gif below
  • Click on the Paragraph and change to the white color to make the paragraph element highlight.

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.

  • Choose the Column and align to the center so the paragraph can be displayed nicely.

Featuring a broad range of product types of your store will let customers have the best general view of all products.

If your store provides different types of products and they are not featured, this can lead to misinterpretations for customers, and losing sales can be the result of this.

And PageFly has the Collection List element to help you to feature your collections.

4.1 Adding a heading

Before adding the collection list element, we will add a Heading element and give it a name.

  • On the element catalog, click on the Add element icon (the first icon), choose the Heading element and then, drag and drop the first variant.
    • Go to the General tab, change the content of the heading in the Heading Text box. Here we change to FEATURED COLLECTIONS
    • Switch to the Styling tab, style for the heading as following options:
      • Adjust the margin-top to 0px and 60px for the margin bottom
      • Change the font-family to Playfair Display font
      • Adjust the font-size to 30px

Click on the Row which contains the heading, align center for the Row so the heading can be centered.

Click on the Section which contains the Row and change the background color for it.

4.2 Adding collection list elements

After we have a heading, we will use the Collection List element to display collections of your store.

On the element catalog, click on the Add Shopify elements icon (the second icon), choose the Collection List and then, drag and drop the first variant into the same Row with the heading element above.

It will automatically show all collections of your store and you can adjust the items per loading to display the number of items you want. And by default, it shows 4 items. You can check this article to know more about settings configuration for the Collection List.

Step 5: Promote the store’s campaign or new arrival

5.1 Add a ½ – ½ layout

On the element catalog, click on the Add element icon (the first icon), choose the Layout element and then, drag and drop the ½ – ½ layout into the page editor.

5.2 Add background images

  • Click on the Column. In the Styling tab, scroll down to the BACKGROUND parameter and add a background image
    • Click on the More Settings button, choose Center Center for background-position and Cover for background-size
    • Scroll up to the SPACING parameter, adjust 200px for padding-top and bottom; 70px for padding left and right.
    • Do the same with the other column.

5.3 Add campaign’s titles

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

  • Go to the General tab, change the content in the Heading Text
  • Go to the Styling tab, style for the heading:
    • Change the color in the content color box
    • Adjust the margin top and bottom to 0px
    • Change the font family to the Josefin Sans
    • Adjust the font-size to 30px.

To apply the same styles for the heading of the right column.

Click on the “30% Off items” heading, choose “Copy styles” in the element toolbar and click on the “New arrivals” heading, choose “Paste styles” (in the element toolbar).

Step 6: Add a product details

  • On the element catalog, click on the Add Shopify elements icon (the second icon), choose the Product List and then, drag and drop the first variant into the same Row with 2 columns above.
  • Head over to the General tab, choose the Custom Product option and select the Product you want to display.

Step 7: Add testimonials

Testimonials as well as social proof will be helpful for your online store because basically, they help to build trust and credibility for your store’s products. And this encourages other customers to buy products from your store.

PageFly provides a Testimonial option as one of premade sections so you can use it to show customer’s feedback.

On the element catalog, click on the Add section icon (the fourth icon). In the PRE-MADE SECTIONS, choose the Testimonial and then, drag and drop the first variant.

  • Click on the image element to choose the customer’s image in the General tab,
  • Switch to the Styling tab to change the Style Preset for the image.
  • Click on the paragraph element to change the customer’s content review in the General tab.
  • Switch to the Styling tab, you can customize style for the paragraph here
    • Adjust the margin top to 0px and bottom to 15px
    • Change the font family to the Josefin Sans
    • Adjust the font-size to 15px.

To apply the same styles for other columns, you can use the Copy styles and Paste styles function of the element toolbar (Check the step 5.3)

  • Click on the Testimonial section.
  • Go to the Styling tab, scroll down to the BACKGROUND parameter and choose a background image

Voila! We’ve just finished making a home page with PageFly.

This home page’s structure helps you to have a basic and standard home page for a Shopify online store, just remember that you need to show the store’s products on the home page, a primary call to action and tell customers what you are selling.

Click on the Publish button to see it on the live view.

Note that when you publish the PageFly home page, it will replace the current home page of your store which was made by theme. If you unpublish the PageFly home page, the home page made by theme will be displayed back.

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

PageFly Help Center is now available in French and Portuguese.Please check the flags on the page header.

I got it!
Languages