Create Stunning Landing Pages with PageFly - #1 Shopify Page Builder

Table of Contents

1. Introduction
2. What is PageFly?
3. Building a Landing Page with PageFly
   1. Creating a Banner Image
   2. Adding Heading, Paragraph, and Button
   3. Styling the Page Elements
   4. Adding Product Collections
   5. Creating Sections for Shop Essentials and Let's Go
   6. Displaying Product Lists
   7. Showcasing Collections
4. Conclusion
5. FAQs

Building a Landing Page with PageFly

In this article, we will explore the capabilities of PageFly, the number one Shopify page builder. We will guide you through the process of building a landing page using PageFly, based on the example of nike.com. A landing page is a standalone web page created for marketing or advertising campaigns. Nike's landing page aims to showcase their collections for men.

1. Introduction

Before we dive into the details of building a landing page, let's understand what PageFly is and how it can benefit you.

What is PageFly?

PageFly is a powerful Shopify page builder that allows you to create stunning and highly functional web pages without any coding knowledge. It offers a user-friendly drag-and-drop interface and a wide range of customizable elements, making it easy to build customized pages that align with your brand's aesthetics and objectives.

2. Building a Landing Page with PageFly

Now, let's start building our landing page step by step using PageFly.

2.1 Creating a Banner Image

The first section of our landing page will feature a banner image that showcases the product. Adding a hero banner with a featured product can be an effective way to promote and drive sales. To create the banner image:

1. Access the PageFly dashboard and go to the Pages tab.
2. Create a new page and select the Regular Page option.
3. Enter the PageFly page editor.
4. Drag and drop a one over one layout into the page editor.
5. Add an image element inside the section.

2.2 Adding Heading, Paragraph, and Button

Now, let's add a heading, paragraph, and button below the image to provide more information about the product. Follow these steps:

1. Drag and drop a one over one layout into the page editor.
2. Add a heading element.
3. Add a paragraph element below the heading.
4. Lastly, add a button.

2.3 Styling the Page Elements

To make our landing page visually appealing and enhance the user experience, let's customize the styling of the elements.

2.3.1 Styling the Banner Image

To make the image full width and align it with your desired styling, follow these steps:

1. Click on the image section and go to the General tab.
2. Select the desired image by clicking on the "Select Image" option.
3. Turn off the "Set Fix Width" option to make the image full width.

2.3.2 Styling the Heading and Paragraph

To customize the font style, font size, and spacing of the heading and paragraph elements, follow these steps:

1. Click on the heading element and go to the Styling tab.
2. Choose the desired font family and adjust the font size, line height, and letter spacing.
3. Adjust the padding and margin of the heading element to position it correctly.

You can apply similar styling changes to the paragraph element and the button to create a cohesive design.

2.4 Adding Product Collections

In the next section of our landing page, we will display three essential collections for men in the Nike store. To achieve this, follow these steps:

1. Add a heading element to a new section.
2. Customize the heading text to reflect the collection.
3. Drag and drop a two-column layout into the page editor.
4. In the left column, add a background image using the background parameter in the Styling tab.
5. Add a heading and a button on the image.
6. Adjust the padding and margin to create the desired spacing.

To create two small rows in the right column, use the one-half layout and follow the same steps as before.

2.5 Displaying Product Lists

The next section of our landing page will showcase popular products in the Nike store. Although PageFly does not have a carousel feature like Nike's page, we can show an alternative way to display the products. Follow these steps:

1. Click on the Shopify element icon in the left sidebar.
2. Drag and drop the product list element into the page editor.
3. Go to the General tab and choose to show all products in your store or specific collections.
4. Adjust the items per loading and items per row options.
5. Enable pagination for the loading mode option to allow users to view more products.

To customize the product list, delete the product title, product price, and add-to-cart button. Instead, add a block element, product title element, and product price inside the block. Use flex customization to arrange them in one line.

2.6 Showcasing Collections

The landing page should also include sections to showcase different collections in the Nike store. To achieve this, follow the steps below:

1. Duplicate the previous section and modify the content accordingly.
2. Adjust the styling and add links to the collection images and titles.

Repeat the above steps to add more collection sections as required.

2.7 Checking Responsiveness

To ensure that our landing page looks great on all devices, switch to different device views in the PageFly editor. Adjust the margin, padding, and font size of elements as needed to maintain responsiveness.

2.8 Finalizing the Page

Once you are satisfied with the design and layout of your landing page, save and publish it. View the live page to see the final result.

3. Conclusion

In this article, we explored the capabilities of PageFly, a powerful Shopify page builder. We learned how to build a landing page step by step using PageFly, based on the example of nike.com. By following the instructions and customizing the elements, you can create stunning and highly functional landing pages that effectively promote your products or services.

FAQs

Q: Can I use PageFly even if I don't have coding knowledge? A: Absolutely! PageFly is designed for Shopify users without coding knowledge. Its drag-and-drop interface makes building web pages hassle-free.

Q: Can I customize the styling of elements in PageFly? A: Yes, PageFly offers extensive styling options for each element. You can customize fonts, colors, sizes, spacings, and more to match your brand's aesthetics.

Q: Can I create sections with different layouts in PageFly? A: Yes, you can create sections with different column layouts, customize backgrounds, and arrange elements to achieve your desired design.

Q: How can I ensure my landing page is responsive? A: PageFly provides device views, allowing you to switch between different devices to check for responsiveness. Adjust the padding, margin, and font size of elements as needed.

Q: Does PageFly support Shopify collections and products? A: Yes, PageFly supports Shopify collections and products. You can easily integrate them into your landing page and customize their display.