# Popups

Spark has two types of **Popups**: Promo popup (with optional newsletter sign-up) and Age Verification. Customize your popups with custom colors, images, and promotional text.

## Promo (Sign Up)

The regular **Popup** can be used for promotions as well as a newsletter signup.

> Newsletter subscribers are added to your "accepts marketing" [Customers](https://shopify.com/admin/customers?query=\&accepts_marketing=1) list. You can learn more about how to manage Shopify customer emails from their [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.

![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-11d1797d54904260e17ddba729bf6a6a00fac230%2Fpopup-desktop.jpeg?alt=media)

### Add popup

<details>

<summary><mark style="color:blue;">STEPS</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 select **Popup**.

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

</details>

#### **Content**

Customize the headings and text content of your Popup.

<details>

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

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

1. 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**.
2. Enter **Subheading** text to display below the heading.

   > Add a few sentences to tell customers about a promotion or other information.

</details>

#### **Background and Color**

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

<details>

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

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

1. (*Optional*.) Click **Select image** to choose an uploaded image for the popup background.

   > There are no required image dimensions or orientation.
2. (*Optional*.) If you have added an image, select an **Image position** (*Top*, *Center*, or *Bottom*) to change what part of your image appears.

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-6ec2927fdc7530b2458a5825a15532a8fcdd66c1%2Fpopup-image-top.jpeg?alt=media)

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-221ead5ea2f165cf582e95940540a77cd08730f1%2Fpopup-image-center.jpeg?alt=media)

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-21bc962e22d0012762bfb2a0e0d135033f994af2%2Fpopup-image-bottom.jpeg?alt=media)
3. Change and match the **Text**, **Button text**, and **Button background**.

   > Click on the color swatch to use the color selector or add a hexcode. Use the **Currently used** colors to ensure a perfect match with your other site colors.
4. (*Optional*.) Select an **Overlay color** to display overtop of the image and adjust the **Overlay opacity** using the slider.

   > The **Overlay** lets you control the brightness and tone of images. Use this setting to balance it with other images and to increase contrast with headings so they're readable.

   > Set the opacity to *0%* to turn off the overlay color; set it to *100%* to create a solid color block with no image.
5. (*Optional*.) Click the **Overlay gradient** option to add a color overlay that fades across a range of hues.

   > You can choose the style, angle, position, and opacity of the gradient. See Shopify's [color gradient guide](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients) to learn more
6. Click **Save**.

</details>

## Age Verification

The **Age Verification** popup appears when a customer first visits your store. They must click the verify button before proceeding.

### Add age verification

<details>

<summary><mark style="color:blue;">STEPS</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 **Age verification**.

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

   ![](https://github.com/fluorescent/kb-spark/blob/main/.gitbook/assets/popup-age-settings.jpeg)
3. Enter **Heading** text for the title of your popup.

   We recommend a short title of a few words.
4. Enter **Subheading** text to display below the heading.

   Add a few sentences to tell customers about the requirements to shop at your store.
5. (*Optional*.) Change the default **Verify button text** ("Enter").
6. (*Optional*.) Change the default **Decline button text** ("Exit") and **Decline button link**.

   By default exit link goes to your store's password page. Click the field to change which site visitors will be redirected to if they decline.
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. Leave this field blank to remove the footer text.
8. Upload and select an **Image** to display at the top of the popup, above the headings.

   We recommend a landscape (3:2) image. See our [Image guide](https://fluorescent.co/help/Spark/image-guide) article to learn more.
9. Use the color selector to change the **Text**, **Background**, and **Border** colors.
10. (*Optional*.) Select an **Overlay color** to display overtop of the image and adjust the **Overlay opacity** using the slider.

    The **Overlay** lets you control the brightness and tone of images. Use this setting to balance it with other images and to increase contrast with headings so they're readable.

    Set the opacity to *0%* to turn off the overlay color; set it to *100%* to create a solid color block with no image.
11. (*Optional*.) Click the **Overlay gradient** option to add a color overlay that fades across a range of hues.

    You can choose the style, angle, position, and opacity of the gradient. See Shopify's [color gradient guide](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients) to learn more.
12. Click **Save**.

</details>

#### Design

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

<details>

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

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

1. Click **Select image** to choose an uploaded image for the popup background.
2. Set the **Image position** to center the **Top**, **Center**, or **Bottom** area of your image.
3. Use the color selector to change the **Text**, **Button text**, and **Button background** colors.
4. (*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
5. Click **Save**.

</details>
