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 list. You can learn more about how to manage Shopify customer emails from their Email subscriber list management ↗ and Using Shopify Email for email marketing ↗ article.

Add popup

STEPS

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.

Content

Customize the headings and text content of your Popup.

STEPS

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.

Background and Color

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

STEPS

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.

  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 ↗ to learn more

  6. Click Save.

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

STEPS

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.

  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 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 ↗ to learn more.

  12. Click Save.

Design

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

STEPS

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.

Last updated

Was this helpful?