How To Create a Homepage with PageFly

Firstly, you can check this video about how to create a basic Shopify Home page in PageFly:

Note that you cannot use PageFly to edit the home page made by your theme.

In this article, we will go through step-by-step how to create a Shopify Homepage with PageFly Page Builder. 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 Home Pages list

In the PageFly dashboard, click on Page listing then choose Homepage to open the Homepage listing. You can see all of the home page you have created here.

homepage pagefly

Click on Create a blank page button to start building your page from scratch.

homepage pagefly

Or you can click Create from a template button to use one of our awesome pre-made templates here.

homepage pagefly

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, choose the Layout element and then, drag and drop the Full Section option into the page editor.

homepage pagefly

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.

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.

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.

homepage pagefly

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 250px for the Padding top and bottom.

homepage pagefly

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, choose the Heading element and then, drag and drop the first variant into the page editor.

homepage pagefly

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.

homepage pagefly

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

  • Choose white color for Content Color
  • Change the font-family to Roboto Slab font
  • Adjust the font-size to 80px
  • Click on the More Settings button and choose the font-weight as Bold style and Line height to 2em
  • Set 0px for Padding top and 20px for Padding bottom

homepage pagefly

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, 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 DISCOVER NOW.
  • Switch to the Styling tab, we will style for the button in the normal state.
    • Set up 15px for the Padding top and bottom and 30px for the Padding right and left.
  • And we will set up the Monsterrat font and Font size to 20px for the text in the TYPOGRAPHY parameter.
  • Scroll down to the BACKGROUND parameter, we will set rgb(245, 166, 35) code for the background color.
  • In Border parameter, click on More settings button, set 30px for Border radius.

homepage pagefly

  • Staying in the Styling tab, we will style for the button of the Mouse over and Active state.
    • Set rgb(208, 108, 9) for the BACKGROUND COLOR
    • And finally, when you hover on the button, you can see the change.

homepage pagefly

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, choose the Layout element and then, drag and drop the 1/1 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, choose the Paragraph element and then, drag and drop the first variant on the section.

homepage pagefly

  • 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

homepage pagefly

  • 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
    • Set 0px for Margin top and bottom
    • Click on the More Settings button and choose the font-weight as Bold style and set up 1.5 em for Line Height.

homepage pagefly

3.3 Add a background image for the description

  • Click on the Section, in the Styling tab, scroll down to the BACKGROUND parameter, choose an image from Background Image option
  • Set 150px for padding top and bottom, 40px for Padding left and 650px for Padding right

homepage pagefly

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.

Step 4: Show featured collections of your store

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, 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 50px
      • Set Font weight as Bold and Line height as 2em

homepage pagefly

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

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, choose the Collection List and then, drag and drop the first variant into the same Row with the heading element above.

homepage pagefly

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, choose the Layout element and then, drag and drop the ½ – ½ layout into the page editor.

5.2 Add image element

  • On the Add elements, drag the Image element onto the right column
    • Click on the Image, go to General tab, in Enable Full Width, select No and Custom for Image Ratio
    • Adjust 680px for Image Width and 500px for Image Height

homepage pagefly

5.3 Add campaign’s titles

On the element catalog, click on the Add element icon, drag and drop the Heading, Paragraph and Button element into the left column.

  • Go to the General tab, change the content in the Heading, Paragraph  Button Text
  • Go to the Styling tab, change the Styling of the three elements.

homepage pagefly

Step 6: Add a product details

  • On the element catalog, click on the Add Shopify elements 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.

homepage pagefly

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.

Hover or click on the section above the testimonial section, you will see the plus icon on the bottom right, hit the icon. In the PRE-MADE SECTIONS, choose the Testimonial and then, drag and drop the one that you need.

homepage pagefly

Or you can create your own unique testimonial by using the Content list element in the left toolbar.

homepage pagefly

  • 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
  • Click on the Testimonial section.
  • Go to the Styling tab, scroll down to the BACKGROUND parameter and choose a background color

homepage pagefly

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.

homepage pagefly

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.

Let check these blog to learn more about how to personalize your homepage and how to make the full use of your homepage on PageFly. If you are looking for some example for the homepage, you can also find it here.

You can check the video tutorial about how to build a complete Shopify Home page in PageFly

 

Thank you for your feedback!

Navigate this category

Could not find the answer to your question?

No worries, contact Our LiveChat Support 24/7

Contact PageFly LiveChat
PageFly Languagues

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

I got it!