# How to create a Coming soon page with PageFly

### Overview

In this guide, we will go through the steps to create a captivating coming soon page using PageFly. By following along, you’ll end up with a visually attractive landing page that generates excitement for your upcoming product or website launch.

A well-designed coming soon page is a powerful tool for any entrepreneur as it allows them to snag potential customers’ attention and engage them before the official opening. This guide is perfect for anyone who wants to create a buzz around their upcoming site and start building an audience early on.

In this article

* Requirement
* How to create a coming soon page with PageFly
* Tips and best practice
* Frequently asked question

### Requirement

The primary requirement is really the content and any visual assets you want to include on your page. This could involve text about your upcoming launch, images or videos that represent your brand, and perhaps a signup form to capture email leads.

Building your coming soon page with PageFly is just a breeze with the following clear and digestible steps below. And if you are a visual learner, we’ve covered you with this helpful video on creating a password/coming soon page with PageFly.

{% embed url="<https://youtu.be/Dsr7YWlNgj4>" %}

### How to Configure Password on Shopify

#### Set A Store Password

You need to set up a store password before creating any password-typed page. Follow the below steps to set up password for your store:

* **Step 1**: Navigate to **Online Store > Preferences >** **See store password**

![](/files/BP5BFvHC5LC3bRPyy1mL)

* **Step 2**: Set store password. For example: password123
* **Step 3**: Click “**Save**” to apply the changes

![](/files/FJzkIxU6I04oscU09DuZ)

#### Create A Password Page

**Create Blank Page**

On PageFly’s Dashboard, to create a Coming Soon Page, head to **Apps** > Select **PageFly** > Select **Pages**

![](/files/kbBHjN7bieLCwqy1QOcT)

Select **Create blank page** at the top right corner > Click on **Password**

![](/files/S5z89Phd2b0BbZX7HXyz)

**Create From Template**

If you don’t want to start building a page from scratch, you could select a pre-designed template by clicking “**Create from template**” > Password

![](/files/ub0JSN7bLiiZhfMfUjq9)

Click “**Select**” on desired template

![](/files/UYVc6CTh12DAXnfeF1yi)

### Gen 2 Editor - How to Create a Coming Soon Page with PageFly

{% hint style="warning" %}
**Important Note**: Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model ([slot plans](https://help.pagefly.io/manual/pricing-plans/)).
{% endhint %}

#### 1. Set Up Layout And Background For the Coming Soon Page

Visually captivating visuals on a coming soon page create anticipation, convey brand identity, and entice potential customers to engage and subscribe for updates before the official launch. Follow the guides below on how to create stunning visuals for your coming soon page.

**1.1. Add Section On The Page Canvas**

Click on **Add element >** Select **Layout element** > Drag & drop the one-column layout into the page editor.

![](/files/XMOb25u8ZUbKMkLOcGXY)

**1.2. Add A Background Image**

**1.2.1. Choose An Image**

In the **Styling** tab, scroll down to the **BACKGROUND** parameter > Choose an image from Background image option > Select image

You can upload the image which is available in the [Image Manager](https://help.pagefly.io/manual/use-image-manager-to-upload-media-files) or upload it from the Internet.

![](/files/pYJYXhHdGXbeWKai0wbq)

**1.2.2. Style The Image**

In the **Styling** tab, head to **SPACING** parameter > **Padding**

* Edit the top-padding and bottom-padding values 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](https://help.pagefly.io/manual/edit-spacing-margin-and-padding). In this case, we set 300px for both Padding top and bottom.

![](/files/ldYLz1MrZPCsdoOl5vID)

**1.2.3. More Settings**

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

In this case, we choose:

* Center Center for Background Position
* Cover for Background Size

![](/files/Sw4IPUgozxfXTckU3em0)

#### 2. Add Store Information

**2.1 Add Heading**

PageFly Heading Element is essential to create and optimize catchy content aka SEO title, to grab customer attention, in order to increase conversion rate. For more information, refer to this [article](https://help.pagefly.io/manual/heading-element/).

**2.1.1. Choose The Heading**

* **Step 1**: Click on the **Plus icon** which is the Elements function
* **Step 2**: Click on the **Heading** element in the PageFly section
* **Step 3**: Drag and drop the element you want into the page editor and then start using it.

![](/files/18uw7C5GTwiQ8GUxqaYX)

**2.1.2. Add Text To The Heading**

From the In the **General** tab, add text

![add text](/files/fQRM9e59kwmJ7Ts15RMF)

**2.1.3. Style The Headings**

* Head to the **Styling** tab, in **Content color**, and choose the preferred color for your heading

![](/files/MfnqNulKg5M0tYhTf0iV)

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

![](/files/6VezIAdUs75QIBNXyRHg)

* Scroll down to the **TYPOGRAPHY** parameter > choose the font family

![](/files/wNfQrJnJaOiDLidrFwcp)

* To align the Heading element, go to **Styling** tab > Find **Size parameter** > Width, click on the dropdown, select Fill.

![](/files/0Lzea3sJvtGlRKWCmDB7)

Then, scroll down to **Text alignment**, select the align center icon.

![](/files/Q1c39CPptRrvyu7LAwEr)

* Click on **More Settings**

For example, we chose the Font Family “**Lato**” and set up 60px for the Font Size. Set the Bold for the Font Weight and the 64px for the Line Height.

![](/files/8yEzSa7w0Wlli7GsUsVf)

**2.2 Add A Paragraph**

**2.2.1. Choose The Paragraph**

2. Click the **Add element icon** > Choose the **Paragraph element** > Drag and drop the first variant into the page editor.

![](/files/HoCY4PSCNKzxMUEfx6Dp)

3. In the **General tab**, add more details about the estimated release time or undercover the reason behind a delayed launch.

![](/files/KYCNTOPz0Eal26bQQJi3)

**2.2.2. Style The Paragraph**

Go to the **Styling** tab

In **Content color**, select your preferred color for the paragraph content

![](/files/g3Ii8JD26eFkU6YbiSWO)

* On **SPACING**, set the margin-top to 0px and the margin-bottom to 40px to create some space between the header and the paragraph below it.

![](/files/BkLogEZ6tjOXx1EQBwWP)

* Scroll down to the **TYPOGRAPHY** parameter > choose the font family
* Choose to align center in the **Text Alignment option**.

![](/files/GjP4mHPrBJqAjfdWQCHh)

* Click on **More Settings**

For example, we chose the Font Family “**Shopifysans**” and set up 16px for the Font Size. Set the Regular for the Font Weight and the 24px for the Line Height.

![](/files/Z5qEVyC3XQeXto79pkb4)

#### 3. Create A Customer Form

Having a customer form on your coming soon page will help capture valuable leads, build anticipation, and provide essential customer data for targeted marketing efforts. For more information, refer to this [article](https://help.pagefly.io/manual/shopify-elements-customer-form/).

**3.1. Choose A Form**

On the left sidebar of the Editor, click on the **Shopify section** > Choose the **Customer Form element** > Drag & drop the first variant into the page editor.

![](/files/rk1EizKnE5SzLh53o5k2)

**3.2. Style That Form**

Go to **Styling** > Adjust the padding left and right. For example, we set 250px for both padding left and right.

![](/files/xGVCepinqn8nVgiH6W8m)

**3.3. Adjust Custom Form Field**

Click on the **Custom Form Field** > In the **General** tab, adjust the text in the field.

![](/files/kbgrYKoSNF7Anwolyis8)

**3.4. Custom Form Button**

Click on the **Custom Form Button**

* In the **General** tab, there are three button types for you to choose from, which are Text Only, Text With Icon, Icon Only.

![](/files/56ibdPPGEVVS1iP7Mplv)

* Add text for the button

![](/files/LaBcEuMtPEcWfjZmJwp8)

* **Enable Full Width**: Click on Yes if you want to enable full width of the button. If not, select No.

![](/files/sXdP7nnxYlrdCIClGbCC)

In order to customize the appearance of the **Customer Form Button**, switch to the **Styling** tab. Some available styling options include:

* **Content color**: customize the text color based on the configured color of the Global Style or set it up for your own.
* **Typography**: customize the font, font size, text element, etc
* **Border**: adjust the button border
* **Normal state:** add Hover/ Active state that helps the button look more attractive

![](/files/Na3A3WFy6ZTc2asRQARo)

You can find more about styling for a [Customer form button](https://help.pagefly.io/manual/shopify-elements-customer-form-button/) here.

#### 4. Save And Publish

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

If you don’t want to publish, click on the **Save** button

![](/files/NBCOUiXYLvKuoMaYYQRr)

Click **Preview** to see it in the Preview mode.

![](/files/UykXsU3T6L6IeYyPUCKk)

You can see the Preview as below:

![](/files/JcOdjiOMWqjSMaw58kRS)

After the page is done, click on the **Publish button** to see the page in the live view.

![](/files/Pax0FvMSJMn7LBBSoheA)

### Legacy Editor - How to Create a Coming Soon Page with PageFly

#### 1. Set Up Layout And Background For the Coming Soon Page

Visually captivating visuals on a coming soon page create anticipation, convey brand identity, and entice potential customers to engage and subscribe for updates before the official launch. Follow the guides below on how to create stunning visuals for your coming soon page.

**1.1. Add Section On The Page Canvas**

Click on **Add element** > Select **Layout element** > Drag & drop the one-column layout into the page editor.

![](/files/c2ZyGWFjS2V2aeUizULu)

**1.2. Add A Background Image**

**1.2.1. Choose An Image**

In the Styling tab, scroll down to the **BACKGROUND** parameter > Choose an image from **Background image option** > Select image

You can upload the image which is available in the [Image Manager](https://help.pagefly.io/manual/use-image-manager-to-upload-media-files) or upload it from the Internet.

![](/files/dDYINTOPdx3AEIAhdnkn)

**1.2.2. Style The Image**

In the **Styling** tab, head to **SPACING** parameter > **Padding**

* Edit the top-padding and bottom-padding values 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](https://help.pagefly.io/manual/edit-spacing-margin-and-padding). In this case, we set 300px for both Padding top and bottom.

![](/files/4JEpivNVzUGNoGrRRxus)

**1.2.3. More Settings**

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

In this case, we choose:

* Center Center for **Background Position**
* Cover for **Background Size**

![](/files/QgYDL1SrrVMGvY61bUXf)

#### 2. Add Store Information

**2.1 Add Heading**

PageFly Heading Element is essential to create and optimize catchy content aka SEO title, to grab customer attention, in order to increase conversion rate. For more information, refer to this [article](https://help.pagefly.io/manual/heading-element/).

**2.1.1. Choose The Heading**

* **Step 1**: Click on the **Plus icon** which is the Elements function
* **Step 2**: Click on the **Heading** element in the PageFly section
* **Step 3**: Drag and drop the element you want into the page editor and then start using it.

![](/files/18uw7C5GTwiQ8GUxqaYX)

**2.1.2. Add Text To The Heading**

From the In the **General** tab, add text

![](/files/p0wNUIBqfIGy6GeR4pY7)

**2.1.3. Style The Headings**

* Head to the **Styling** tab, in **Content color**, and choose the preferred color for your heading

![](/files/GTDWG7s3EZLR0ABC3ntU)

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

![](/files/Cg8JERg0oKWZiwZHvUqt)

* Scroll down to the **TYPOGRAPHY** parameter > choose the **font family**
* Choose to align center in the **Text Alignment option.**

![](/files/9mpeI8hb6tom5vSi9Nrx)

To align the heading, go to **Styling tab** > Find “**Align items**” parameter > Select the align center icon

![](/files/X16rYkNCITavxojK9yZD)

Then, scroll down to the **TYPOGRAPHY** parameter > choose the font family

![](/files/zf8g7vjJHsqFfPRUUJAT)

* Click on More Settings

For example, we chose the Font Family “**Lato**” and set up 60px for the Font Size. Set the Bold for the Font Weight and the 64px for the Line Height.

![](/files/JzSj3StF4oS1MkiVx8jk)

**2.2 Add A Paragraph**

**2.2.1. Choose The Paragraph**

1. Click the **Add element** icon > Choose the **Paragraph element** > Drag and drop the first variant into the page editor.

![](/files/HoCY4PSCNKzxMUEfx6Dp)

2. In the **General** tab, add more details about the estimated release time or undercover the reason behind a delayed launch.

![](/files/G2VODmqP6tKH9pNAnY8S)

**2.2.2. Style The Paragraph**

Go to the “**Styling**” tab

In **Content color**, select your preferred color for the paragraph content

![](/files/iTRY2ktv5wJIDtwgQ4pd)

* On **SPACING**, set the margin-top to 0px and the margin-bottom to 40px to create some space between the header and the paragraph below it.

![](/files/aV80geRqwEUydVGdhKCR)

* Scroll down to the **TYPOGRAPHY** parameter > choose the font family
* Choose to align center in the **Text Alignment** option.

![](/files/Rr6Ufq5NcbOfyFuPKnjX)

* Click on More Settings

For example, we chose the Font Family “**Shopifysans**” and set up 16px for the **Font Size**. Set the Regular for the **Font Weight** and the 24px for the Line Height.

![](/files/klVxj0QyAUtQ25Mx8PZz)

#### 3. Create A Customer Form

Having a customer form on your coming soon page will help capture valuable leads, build anticipation, and provide essential customer data for targeted marketing efforts. For more information, refer to this [article](https://help.pagefly.io/manual/shopify-elements-customer-form/).

**3.1. Choose A Form**

On the left sidebar of the Editor, click on the **Shopify section** > Choose the **Customer Form** element > Drag & drop the first variant into the page editor.

![](/files/rk1EizKnE5SzLh53o5k2)

**3.2. Style That Form**

Go to **Styling** > Adjust the padding left and right. For example, we set 250px for both padding left and right.

![](/files/7DTxe2eh6QVRz8ucw9Jf)

**3.3. Adjust Custom Form Field**

Click on the **Custom Form Field** > In the **General** tab, adjust the text in the field.

![](/files/CCeIFsCrXPwrLSpAtOiU)

**3.4. Custom Form Button**

Click on the **Custom Form** **Button**

* In the **General tab**, there are three button types for you to choose from, which are Text Only, Text With Icon, Icon Only.

![](/files/3Wpzt6ho5O903lNsdwqW)

* Add text for the button

![](/files/UxB8jNESNDOx1DTrngII)

* **Enable Full Width**: Click on Yes if you want to enable full width of the button. If not, select No.

![](/files/i3EpcGDIQzier3E8Q9QE)

In order to customize the appearance of the **Customer Form Button**, switch to the **Styling** tab. Some available styling options include:

* **Content color:** customize the text color based on the configured color of the Global Style or set it up for your own.
* **Typography:** customize the font, font size, text element, etc
* **Border:** adjust the button border
* **Normal state:** add Hover/ Active state that helps the button look more attractive

![](/files/OhDX1WykIXDlAECxENHI)

You can find more about styling for a [Customer form button](https://help.pagefly.io/manual/shopify-elements-customer-form-button/) here.

#### 4. Save And Publish

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

If you don’t want to publish, click on the **Save** button

![](/files/aZ02v6DG2LJwWv6x2qkB)

Click **Preview** to see it in the **Preview** mode.

![](/files/5eU1aVFLRus4tqLxjSwg)

You can see the Preview as below:

![](/files/JcOdjiOMWqjSMaw58kRS)

After the page is done, click on the **Publish** button to see the page in the live view.

![](/files/WEgXQ5QmA27HRagTHCTV)

### Tips And Best Practice

* Use high-quality visuals and a clear headline to grab visitor interest
* Motivate visitors to sign up with a strong call to action
* Ensure your design looks great and functions flawlessly on all devices
* Include a countdown timer and engaging text about your upcoming launch

### Frequently Asked Questions

**1. What is a Coming Soon page?**

A Coming Soon Page is a hint to let your customers know that sellers are preparing to release something, for example, a new product or launching a new brand.

**2. What should a Coming Soon page include?**

Logo, Simple Sentences, a beautiful image, and a contact-us form.

**3. Great Coming Soon message examples?**

‘New Product is coming soon. We are working hard on the full version and will be back shortly.’ or ‘Stay tuned. We are launching soon. Something awesome is coming. Be first to know’


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.pagefly.io/pages-and-sections-creation/pages/how-to-create-a-coming-soon-page-with-pagefly.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.