Are you confused about building landing pages for your Shopify store? Landing pages are essential when it comes to selling online. You can offer a lead magnet, sell products, promote your new collection, the possibilities are endless. But it can be confusing for new Shopify store owners to create landing pages for their business.
I personally use PageFly in the Shopify app store to create all my landing pages for my clients. It’s easy to use, drag and drop page builder that has all the essential features to create stunning landing pages. If you want more features and customization, they also have an inexpensive paid plan that enables you to do much more with your landing page.
Step by Step Process
Step 1: Before you begin designing your landing page, you need to download PageFly from the Shopify app store. Head over to your apps and select “Visit the Shopify App Store”. In the search bar, enter “Pagefly” and add the app to your store.
Step 2: Once the app is downloaded, go to your apps on the left side menu bar and select the PageFly application and this will then bring you to your PageFly dashboard. At the top of the page, select the “Create Page” button.
Step 3: A window will pop up to set up your page. Enter your landing page title in the page title block and change the URL if you want a custom one. By default it will enter your page title. Choose the “Regular Page” in page type and select if you want your header and footer to be visible on this page. In the page optimization section, disable lazy load images and select next. This will bring you to the next page where you can select a page template. Most templates are paid but you can start from scratch with the blank page template. Select your template and click next.
Step 4: Before you can add elements to your landing page, you need to insert a section. To do so, select add element > containers > layout > full Section and drag and drop the new section to your landing page.
Step 5: Once you insert a new section, you can add elements within that section. Let’s start by adding a heading. Select add Element > basic > heading and drag and drop the top heading in the section we just placed on the landing page.
Step 6: In the heading block, enter your landing page heading. Remember to use persuasive copywriting to get the best results from your landing page. On the right side of the page, you will see two tabs, “General” and “Styling”. In the general tab, change the HTML tag to H1 and in the styling tab, you can edit several styling attributes like fonts, colour, margins and size.
Step 7: Once you have entered your persuasive heading, you need to add a bit more content to direct and convince your audience to click on your CTA (Call To Action). To enter a paragraph, select add element > basic > paragraph and select the top one and drag it under your heading.
Step 8: After putting in a paragraph element in your landing page, you will need to write 2-3 sentences to direct your audience to your CTA. Remember to use persuasive copywriting to get the best results from your landing page. Once you have inserted your paragraph, go to the right side of the page, in the styling tab, you can edit several styling attributes like fonts, colour, margins and size.
Step 9: You are now ready to add a call to action to your landing page so your audience can complete what you are asking them to do. For this example, we will add a simple button that will link to another page on our website to buy our Vegan Cookbook. Select add element > basic > button and select the top button and drag and drop it on your page.
Step 10: After placing the button on your landing page, align it to the center of the page, enter the link and input your CTA. Use a persuasive call to action that clearly directs them to the next appropriate action. After inputting the text, set the styling of your button like colour, font, and border radius.
Step 11: Once you put all of the content on your landing page, let’s put a background to make it look more professional. Select the entire section on the top left corner, and under the styling tab, scroll down to the background section. Here you can select a colour, image or a video. To have an image as a background, upload your image, set the position to the center and background size to cover. You can also apply a background overlay to make your text easier to read.
Step 12: Before publishing your landing page, ensure that the size of the text and other elements are properly adjusted for the different devices. You can view the mobile viewer on the top bar where it says all devices. For any text that is incorrectly sized, go in the styling tab and adjust the height until it fits properly.
Step 13: Once you are fully satisfied with your landing page, save and publish the page and you now have a beautiful landing page to send potential customers to.