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.
Note that you cannot use PageFly to edit the home page made by your theme.
You can consult this article for building a landing page.
You can also check this video about how to create a basic Shopify Home page in PageFly:
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.
Click on Create a blank page button to start building your page from scratch.
Or you can click Create from a template button to use one of our awesome pre-made templates here.
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.
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.
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.
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.
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:
- 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
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.
- 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.
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.
- 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
- 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.
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
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
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.
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
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.
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.
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.
Or you can create your own unique testimonial by using the Content list element in the left toolbar.
- 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
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.
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
Previous article
