How to Create a Coming soon page with PageFly

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.

You can also check this blog to find some tips when creating a password/coming soon page.

You can consult this video about creating a password/ coming soon page in PageFly:

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 on Pages tab:

After that, click on the Create a new page button on the bottom right to start build a new page from scratch.

Or hit the Create a new page from templates to use PageFly pre-made templates for your password page.

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.

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.

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

Center Center 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.

• In the General tab, change the sample text to “SOMETHING AWESOME IS COMING”.
• Click on the Styling tab, in Content color, choose white color.
• On Spacing, set the margin top to 0px and the margin bottom to 20px to create some space between the header and the paragraph below it.
• Scroll down to the TYPOGRAPHY parameter, and align to the left in the Text Alignment option.
  • We choose Raleway 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, set Line Height to 1.5em. You can check the screenshot below.
• Then click on the Section on the breadcrumbs, go to Styling tab, in Text Alignment, select align center.

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.

• 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 styling of the paragraph. Go to Styling tab, in content color, choose White color.
• On Spacing, set the margin top to 0px and the margin bottom to 40px to create some space between the paragraph and the element below it.
• Then scroll down to the TYPOGRAPHY parameter, and align to the left in the Text Alignment option.
  • We choose Raleway 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, set Line Height to 1.15em.

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.

Click on the form. From the breadcrumbs, click on the Row, go to Styling to to adjust the padding left and right to shorten the form. In this example, I will set 250px for the padding left and right.

Click on the form, go to  General tab, you can adjust the text in the field.

Click on the Submit button to customize it. Go to General tab, you can change the text and enable the icon on the button here.

Then switch to Styling tab, customize the Content color, font and font size for the text. Scroll down to Border parameter to adjust button border.

Remember to adjust in Hover and Active state as well so that the button can be more attractive.

You can find more about styling for a Customer form button here.

Step 5: Save and Publish the page

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

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

After the page is done, click on the Save&Publish button and Live view to see the page in the live.

You can see the Preview as below: