# Sign up popup

The **Sign up** popup encourages customers to add their email to your newsletter.

Newsletter subscribers are added to your "accepts marketing" [Customers](https://shopify.com/admin/customers?query=\&accepts_marketing=1) list. You can learn more in Shopify's guides to [Email subscriber list management](https://help.shopify.com/en/manual/promoting-marketing/create-marketing/shopify-email/email-subscriber-list-management) and [Using Shopify Email for email marketing](https://help.shopify.com/en/manual/promoting-marketing/create-marketing/shopify-email) article.

{% hint style="info" %} <mark style="color:blue;">**Note**</mark> The popup does not automatically give 10% off. This default text is only a placeholder for your own text. See [Shopify's discounts guide](https://help.shopify.com/en/manual/discounts) to learn how to set up discounts and offer discount codes.
{% endhint %}

## **Add sign up popup**

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the arrow next to the **Popup** section to show the nested content blocks.
2. Click **(+) Add block** and choose **Sign up Popup** or **Sign up Flyout**.

   > Click the new **Popup block** to open the settings.

</details>

### **Behaviour**

The **Behaviour** options control when, where, and how often your popup appears. Click the **Popup block** to open the settings.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Set the **Delay Appearance** option to choose when to show the popup: **immediately**, after a set amount of **time**, or when customers **scroll** down a percentage of the page.

   ![](https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Fgit-blob-be11a5862af89d5dfae0927b6f00d5b098fa150b%2Fpopup-behavior.png?alt=media)

   > Select **Show on exit-intent** to show the popup when the customer's cursor accelerates or leaves your site before your popup is set to appear.
2. Set the **Frequency** to control how often a popup appears to the same customer once they have dismissed the first popup.

   > Popups that appear too frequently can overwhelm your customer. Limit the timing and frequency of your popup for the best results.
3. Select **Disable for account holders** so customers who have signed up for a store account won't see the popup.
4. Select **Show on specific page** and click on the **Target page** field to select a page from your store.

   > Use this option to create a popup that's relevant to specific products, collections, or other pages.
5. Click **Save**.

</details>

### **Content**

Customize the headings, buttons, and text content of your Popup.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Enter **Accent** text to display a small label above the main heading.

   We recommend one or two words that label what the popup is about.

   ![](https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Fgit-blob-cb0494015aa5662f10deb6ff4bd52ed64d53fcf3%2Fpopup-content.png?alt=media)
2. Enter **Heading** text for the title of your popup.

   > We recommend a short title of a few words.

   > Set the **Heading Size** to **Small**, **Medium**, or **Large**.
3. Enter **Text** to display below the heading.

   > Add a few sentences to tell customers about a promotion or other information.
4. Select or paste a URL for the **Button link**.
5. Enter text for the **Button label**.

   > The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
6. (*Optional*.) Change the default "No thanks" **Dismiss text** of the button that closes the popup when clicked.
7. (*Optional*.) Enter the **Footer text** to display a short note at the bottom of the popup.

   The Footer text works well for disclaimers or additional information.
8. (*Optional*.) Enter **Tags** to label customers who sign up to help organize your customer list.

   Tags are added to Customer profiles in the Shopify admin. Customers will not see these tags. See > Shopify's guide about [managing customer profiles](https://help.shopify.com/en/manual/customers/manage-customers#edit-customer-profiles) to learn more about using tags.
9. Enable **Show social icons** to display icons that link to your social media accounts.
10. Click **Save**.

</details>

### **Design**

Design your popup with custom colors, images, and content layout.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. If using the **Flyout popup**, select the **Flyout position** to display it on the **Bottom left** or **Bottom right** on desktop screens.
2. Set the **Popup size** to **Small**, **Medium**, or **Large**.
3. Select the **Content alignment** to position the headings and buttons to the **Left**, **Right**, or **Center** of the popup.
4. Add an **Image** to show within your Popup.

   > Set the **Image position** to the **Top**, **Center**, or **Left** or use it for the entire popup **Background**.
5. Use **Image focal points** to specify the main focus of your images. The focal point of your image will remain centered and within frame when your site adapts to different screen sizes.

   > See our [image guide](https://help.fluorescent.co/cornerstone/general/image-guide/theme-image-settings) to learn more about specifying a focal point for an image used within a section or for an uploaded image file when used anywhere on your site.
6. Select custom colors for the **Background**, **Text**, and **Buttons**.
7. (*Optional*.) Select an **Overlay** color and enable it by increasing the **Overlay opacity** with the slider.

   > These settings help make your text clear and readable by increasing the contrast between the text and background image
8. Click **Save**.

</details>

### **Sticky tab**

The **Sticky tab** displays a small floating banner with text that re-opens the popup when clicked.

{% hint style="info" %} <mark style="color:blue;">**Note**</mark> The popup does not automatically give 10% off. This default text is only a placeholder for your own text. See [Shopify's discounts guide](https://help.shopify.com/en/manual/discounts) to learn how to set up discounts and offer discount codes.
{% endhint %}

![](https://github.com/fluorescent/kb-cornerstone/blob/main/.gitbook/assets/popup-sticky-tab.png)

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Enter **Text** that prompts your visitor to open the popup.

   > We recommend using only a few words, like the default: "Get 10% off".
2. Set the **Size** of the text to **Small**, **Regular**, or **Large**.
3. Set the **Tab position** to display it along the bottom or sides of the window or screen.
4. Select the **Colors** for the tab text and background.
5. Click **Save**.

</details>

\\

***

> **Related links**\
> [Promotional popup](https://help.fluorescent.co/cornerstone/pages/popups/promotional-popup)\
> [Countdown signup popup](https://help.fluorescent.co/cornerstone/pages/popups/countdown-popup)\
> [Age verification](https://help.fluorescent.co/cornerstone/pages/popups/age-verification)
