How to create a Homepage with PageFly?
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
Summary: Your homepage is the storefront window of your online store. It's the first thing visitors see, and it sets the tone for their entire shopping experience.
The homepage is prime real estate for promoting your products. You can highlight best-sellers, new arrivals, or special offers through high-quality images, clear descriptions, and calls to action that encourage visitors to click and learn more, ultimately leading to sales.
In this article, we will explore how to with .
You can also check this video about how to create a homepage with PageFly:
There are 2 ways to create a PageFly home page:
Create the page from scratch
Create the page from templates
Create New Homepage From Scratch
In the PageFly dashboard, head to the Pages tab > Click on the Create blank page button on the right sidebar to start building your page from scratch > Select Home.
Create New Homepage From Templates
Add A Section On The Page Canvas.
Add A Background Image For The Banner
​​Click on the section, then head to the Styling tab, scroll down to the BACKGROUND parameter > Choose an image from the Background Image option.
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 values to change the height of the section to fit your image's height.
In this case, we set 250px for the Padding top and bottom.
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 Element icon > PageFly tab > choose the Heading element > 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 H1. Adding HTML Tag is good for SEO for your store.
Switching to the Styling tab and change the styles for it:
Choose red 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 2px
Set 20px for the Padding top and 20px for the Padding bottom
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 – the store owner expect the most.
On the element catalog, click on the Element icon > PageFly tab > choose the Button element > drag and drop the first variant on the banner
Now, head over to the General tab and change the content for the button. In the Button Text box, change the default content to DISCOVER NOW.
Switch to the Styling tab, we will style 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 Montserrat font and Font size to 20px for the text in the TYPOGRAPHY parameter.
Scroll down to the BACKGROUND parameter, we will set rgba(74, 144, 226, 0.99) code for the background color.
In the Styling tab, we will style for the button of the Mouse over and Active state. Set rgba(74, 144, 226, 0.99) for the BACKGROUND COLOR. And finally, when you hover on the button, you can see the change.
Featuring a broad range of product types in 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.
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 Element icon > PageFly tab > choose the Heading element > 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 EXPLORE OUR 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 Roboto Slab font
Adjust the Font size to 50px
Set the Font weight as Bold and Line height as 1.5em
Click on the Row which contains the heading and align center for the Row so the heading can be centered.
Adding Collection List Elements
After we have a heading, we will use the Collection List element to display your store's collections.
On the element catalog, click on the Elements icon > Shopify tab > choose the Collection List > Drag and drop the first variant into the same Row with the heading element above.
When customers visit your store, one of the essential things you need to do is to let them know what products/ services your store provides. Don't make customers confused or make them wonder what is sold in this store.
Add A Section Layout
On the element catalog, click the Element icon > PageFly tab > Choose the Layout element > Drag and drop the 1/2-1/2 option into the page editor.
Add A Paragraph Element To The Left Column
On the element catalog, click the Element icon > PageFly tab > Choose the Paragraph element > Drag and drop the first variant on the first column of 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 the style for the paragraph:
Change the font family to Montserrat font
Adjust the font size to 20px
Set 0px for the Margin top and bottom
Click on the More Settings button and choose the font weight as Regular style and set up 1.5 em for Line Height.
Add An Image For The Right Column
Click on Element icon > PageFly tab > choose Image element > Drag and drop the first variant into the second column of the section
Click on the Elements icon > Shopify tab > Choose the Product Details> Drag and drop the first variant into the page editor.
Head over to the General tab > Choose the Custom Product option > Select the Product you want to display.
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 the premade sections so you can use it to show customer feedback.
Hover or click on the section and you will see the plus icon on the bottom right > Hit the icon > Select Template.
In the template library popup, head to the Category dropdown button > Choose Testimonials > Select the pre-made sections.
Or you can create your own unique testimonial by using the Content list element in the Element icon > PageFly tab.
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 the style for the paragraph here.
Click on the Testimonial section.
Go to the Styling tab > Scroll down to the BACKGROUND parameter > 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.
There are 2 ways to create a PageFly home page:
Create the page from scratch
Create the page from templates
Create New Homepage From Scratch
In the PageFly dashboard, head to the Pages tab > Click on the Create blank page button on the right sidebar to start building your page from scratch > Select Home.
Create New Homepage From Templates
Add A Section On The Page Canvas.
Add A Background Image For The Banner
​​Click on the section, then head to the Styling tab, scroll down to the BACKGROUND parameter > Choose an image from the Background Image option.
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 values to change the height of the section to fit your image's height.
In this case, we set 250px for the Padding top and bottom.
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 Element icon > PageFly tab > choose the Heading element > 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 H1. Adding HTML Tag is good for SEO for your store.
Switching to the Styling tab and change the styles for it:
Choose red 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 2px
Set 20px for the Padding top and 20px for the Padding bottom
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 – the store owner expect the most.
On the element catalog, click on the Element icon > PageFly tab > choose the Button element > drag and drop the first variant on the banner
Now, head over to the General tab and change the content for the button. In the Button Text box, change the default content to DISCOVER NOW.
Switch to the Styling tab, we will style 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 Montserrat font and Font size to 20px for the text in the TYPOGRAPHY parameter.
Scroll down to the BACKGROUND parameter, we will set rgba(74, 144, 226, 0.99) code for the background color.
In the Styling tab, we will style for the button of the Mouse over and Active state. Set rgba(74, 144, 226, 0.99) for the BACKGROUND COLOR. And finally, when you hover on the button, you can see the change.
Featuring a broad range of product types in 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.
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 Element icon > PageFly tab > choose the Heading element > 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 EXPLORE OUR 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 Roboto Slab font
Adjust the Font size to 50px
Set the Font weight as Bold and Line height as 1.5em
Click on the Row which contains the heading and align center for the Row so the heading can be centered.
Adding Collection List Elements
After we have a heading, we will use the Collection List element to display your store's collections.
On the element catalog, click on the Elements icon > Shopify tab > choose the Collection List > Drag and drop the first variant into the same Row with the heading element above.
When customers visit your store, one of the essential things you need to do is to let them know what products/ services your store provides. Don't make customers confused or make them wonder what is sold in this store.
Add A Section Layout
On the element catalog, click the Element icon > PageFly tab > Choose the Layout element > Drag and drop the 1/2-1/2 option into the page editor.
Add A Paragraph Element To The Left Column
On the element catalog, click the Element icon > PageFly tab > Choose the Paragraph element > Drag and drop the first variant on the first column of 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 the style for the paragraph:
Change the font family to Montserrat font
Adjust the font size to 20px
Set 0px for the Margin top and bottom
Click on the More Settings button and choose the font weight as Regular style and set up 1.5 em for Line Height.
Add An Image For The Right Column
Click on Element icon > PageFly tab > choose Image element > Drag and drop the first variant into the second column of the section
Click on the Elements icon > Shopify tab > Choose the Product Details> Drag and drop the first variant into the page editor.
Head over to the General tab > Choose the Custom Product option > Select the Product you want to display.
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 the premade sections so you can use it to show customer feedback.
Hover or click on the section and you will see the plus icon on the bottom right > Hit the icon > Select Template.
In the template library popup, head to the Category dropdown button > Choose Testimonials > Select the pre-made sections.
Or you can create your own unique testimonial by using the Content list element in the Element icon > PageFly tab.
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 the style for the paragraph here.
Click on the Testimonial section.
Go to the Styling tab > Scroll down to the BACKGROUND parameter > 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.
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 the theme will be displayed back.
You can consult this article for building a landing page.
Note that you cannot use PageFly to edit the home page made by your theme.
1. What is a homepage on Shopify?
A Homepage is a web page, can be made from scratch or template, is the starting point for your Shopify store
2. How many websites can you host on Shopify?
Up to 20 domains or subdomains, however, it must be in the Shopify admin, as you cannot create these in the PageFly dashboard.
3. What should be included in the homepage?
Banner with clear value proposition and proper navigation
Clear call-to-action (Around 1 or 2) ...
Highlights of your content
Client Testimonials
Information about products, services and features
Contact information
Important Note: Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model ().
From the Pages Dashboard, hit the Create from template button > Choose Home. Once the Template Library is opened, you can pick a suitable for your Homepage. Click Select after you have chosen one.
In the PageFly editor, click on the Element icon > PageFly tab > choose the > Drag and drop the Full Section option into the page editor.
You can upload the image which is available in the Image Manager or upload it from the Internet. Read more to know more details.
The little box in the middle will set the same value for all four sides of the .
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 to know more about the settings configuration for the Collection List.
You can upload the image which is available in the Image Manager or upload it from the Internet. Read more to know more details.
From the Pages Dashboard, hit the Create from template button > Choose Home. Once the Template Library is opened, you can pick a suitable for your Homepage. Click Select after you have chosen one.
In the PageFly editor, click on the Element icon > PageFly tab > choose the > Drag and drop the Full Section option into the page editor.
You can upload the image which is available in the Image Manager or upload it from the Internet. Read more to know more details.
The little box in the middle will set the same value for all four sides of the .
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 to know more about the settings configuration for the Collection List.
You can upload the image which is available in the Image Manager or upload it from the Internet. Read more to know more details.
