How to Create a Coming soon page with PageFly

You can consult this video for the holiday season

In this article, we will go through step by step how to create a coming soon page with PageFly. Related elements for this page will be included in this article along with detailed styling steps.

Step 1: Create a password page

Create a new page in the PageFly dashboard

You can quickly create a password page by selecting Password Page at the end of the list:

coming soon pagefly

After that, you need to name your page and click Next.

coming soon pagefly

You can choose a template or in this case, we’ll choose a blank page to start with to build from scratch. Then click Next.

Step 2: Upload an image

2.1 Add 50-50 section on the page canvas

On the element catalog, click on the Add element icon (the first + icon), choose the Layout element and then, drag and drop the Full Section option into the page editor.

layout element

The editor will be like the image below

2.2 Add background image

In the Styling tab, scroll down to the BACKGROUND parameter, choose an image from Background Image option like the image below.

coming soon pagefly

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.

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 300px for both Padding top and bottom.

Scroll down to the BACKGROUND parameter, click on the More Settings button.

Choose a suitable position for the Background Position and Cover for Background Size. In this case, we choose the

Left Top position for the background image.

Step 3: Add your Store Information

3.1 Add a “Under Construction” heading

On the element catalog, click on the Add element icon (the first icon), choose the Heading element and then, drag and drop the first variant into the page editor.

coming soon page

  • In the General tab, change the sample text to “WE’RE UNDER CONSTRUCTION”.
  • Click on the Styling tab, scroll down to the TYPOGRAPHY parameter, and align to the left in the Text Alignment option.
    • We choose Lato for the font family and set up 40px for the font-size. Click on the More Settings button to choose the Regular for the font-weight. You can check the screenshot below.

coming soon pagefly

3.2 Add a Paragraph

On the element catalog, click on the Add element icon (the first icon), choose the Paragraph Element and then drag and drop the first variant into the page editor.

coming soon pagefly

The page should look like this.

coming soon pagefly

Use the mouse to shorten the length of the paragraph box.

coming soon pagefly

  • In the General tab, change the sample text to some information such as why your site is not there yet or estimated time of opening.
  • Again, you need to adjust the font and font size. Click on the Styling tab, scroll down to the TYPOGRAPHY parameter, and align to the left in the Text Alignment option.
    • We choose Lato for the font family and setup 20px for the font-size. Click on the More Settings button to choose the Regular for the font-weight.

Step 4: Create a customer form

From the Shopify icon, choose the Customer Form element and then drag and drop the first variant into the page editor.

coming soon pagefly

Click on the form. From the breadcrumbs, click on the Column and use the mouse to shorten the length of the form. It should look like this.

Click on the form again. From the General tab, you can adjust the text in the field and in the button.

coming soon pagefly

Again, to adjust the position of this form lightly, use the Padding and Margin in the Styling tab.

Step 5: Save and Publish the page

After finishing editing your page, check once again the entire page.

Click on the Publish button and Live view to see the page in the live.

If you don’t want to publish yet, click on the Save button and see it in the Preview mode.

coming soon pagefly

You can see the Preview as below:

coming soon pagefly

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

PageFly Help Center is now available in French, Portuguese and Chinese.Please check the flags on the page header.

I got it!
Languages