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 pageClick to copy

Create a new page in the PageFly dashboardClick to copy

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

create password page pagefly

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

coming soon page pagefly

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

password page pagefly

Step 2: Upload an imageClick to copy

2.1 Add 50-50 section on the page canvasClick to copy

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.

password page pagefly

The editor will be like the image below

coming soon page pagefly

2.2 Add background imageClick to copy

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

coming soon page 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.

password page pagefly

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 InformationClick to copy

3.1 Add a “Under Construction” headingClick to copy

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.

 

  • password pageflyIn 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.

password pagefly

3.2 Add a ParagraphClick to copy

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.

password page

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

password pagefly

Step 4: Create a customer formClick to copy

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

password pagefly

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.

password

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

password page

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.

coming soon page
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 pageClick to copy

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.

password pagefly

You can see the Preview as below:

password page pagefly

Navigate this category

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

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

I got it!
Boost Father's Day Sales: Utilize PageFly's templates to create captivating pages that drive results - Discover Now