landing page

How To Make a Landing Page on Shopify

Written by admin

How To Make a Landing Page on Shopify: Hi. Welcome to PageFly video tutorial series. In today’s video, I will guide you how to create a complete landing page using elements in PageFly. The landing page will show your on-sale products, the collection you are having, your promotion campaign or help you to collect customers email.

To create a landing page, you need to go to the Regular Pages in PageFly dashboard. Click Create a landing page here. I will give our landing page a title “landing page” I choose to hide the header and footer. Click Next. Choose Blank to create the landing page from scratch. Click Next. Firstly, I will add a hero banner to the page.

Click Add element here drag and drop a full section element into the page editor. Go to the Styling tab and change the background of the section Click More Settings choose Center position and Cover for background size. Scroll up to change the padding to make the section bigger. On this banner, I will add a heading, a button, and a real-time countdown timer to create urgency and increase sales.

How To Make a Landing Page on Shopify, With the heading, I will change the text in the General tab and switch to Styling tab to set color, choose font family and adjust the font size. With the button, I will change the button text in the General tab and add an icon inside it. Go to the Styling tab. For normal state, adjust the padding of the button, change the font family and the font size.

Set background color. I will choose blue color. Scroll down to Border parameter, choose solid border. Click More Settings and set the border width to zero, adjust the border radius. Move to the Hover state, change the background color to lighter blue color.

The button will look like this. With the countdown timer, you can change the setting in the General tab and move to the Styling tab to change its style. Choose this element and you can set a transparent background to it. Let me show you. Choose the row in the breadcrumbs. With the Text Alignment option, click here to make all content center.

Next I will create a promotion banner that shows the current promotion campaigns. Add a full section here and then I will add a three column layout inside the section. In each column, I will add an icon and a paragraph. Click on the icon to change the icon and click on the paragraph to change the text. Go to the styling tab, scroll down to Display here.

Click Inline to put icon and paragraph in a same line. Adjust the margin of the paragraph to make space between these two elements. Choose the column Go to the Styling tab scroll down to the Text Alignment and click Center. And then I will choose the whole section and set a background color to it. Next section, I will show on-sale products in my store.

Add a heading inside the section and then add a product list here. With the heading, change the heading text in the General tab. Switch to Styling tab, change background color, font family and the font size and make it center. With the product list, change the product source in the General tab.

I will choose Custom Collection and click here to pick the collection I want. More details about this element, please check the video in the description section. In the next section, I want to show collections in my store. Firstly, I have a heading and then use a collection list. Change the heading text, scroll up, click on this heading and copy style and paste the style to this heading.

With the collection list, choose Custom Collection(s) and click here to choose display collections. Adjust the Item Spacing. Then choose the section, click here to set the section full width and move to the Styling tab and set background color to the section. You can feature a product using the product details element.

Add product details inside the section. Go to the Styling tab to choose the displayed product. More details about this element, please check the article in the description section. In my landing page, I need to add a newsletter to collect my customers email. I add a heading, a paragraph and a customer form.

You can also use the contact form here. Copy style of this button to paste to this button. Choose the customer form field and change its border like this. Testimonials will make your site more professional and reliable.ย ย  You can find the testimonial element here and drag and drop it into the section.

How To Make a Landing Page on Shopify

Choose the image to add customer’s imageย ย  and insert their feedback using the paragraph element here Finally, link the landing page to the Instagram account. Find the Instagram element here and add it into your page. Insert the access token to show your Instagram images and videos. Now I will save my page, and click Publish and then Live View to see the live page. This is the end of the tutorial.

Please follow to our website and turn on the notification to get more tutorial. If you need any assistance, reach us via 24/7 in-app Live Chat or leave us any questions in the comment section below. Join PageFly ecosystem and proactively get updated support, tips to boost conversion rate. Thank you for reading! See you next time.

How To Make a Landing Page on Shopify moere๐Ÿ‘‰ TRY PAGEFLY FREE: http://pagef.ly/free-installโ€‹ — ๐Ÿ‘‰ PAGEFLY VIDEO TUTORIALS: How to Use the Button Element in PageFly: http://www.pagef.ly/dghhโ€‹ How to Customize the Paragraph Element with PageFly: http://www.pagef.ly/92dwโ€‹ How to use Countdown Timer in PageFly: http://www.pagef.ly/tshnโ€‹ How to Use Icon element in PageFly: http://www.pagef.ly/rkpeโ€‹ How to Customize Product List element in PageFly:http://www.pagef.ly/juqhโ€‹ How to Use Collection List in PageFly: http://www.pagef.ly/foh3โ€‹ How to Show Product Details on your PageFly page: http://www.pagef.ly/7qetโ€‹ Use the Customer Form – Contact Form element in PageFly: http://www.pagef.ly/a6c8โ€‹ Build page Faster using Pre-made Section with PageFly: http://www.pagef.ly/9u44โ€‹ ๐Ÿ‘‰ PAGEFLY RECOMMENDED TOOLS: Discover Other Shopify Storesโ€™ Success Secrets with Koala Inspector – GET IT FREE http://www.pagef.ly/1ayqโ€‹

About the author

admin

Leave a Comment