Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Popup

The Popup can be used as a newsletter signup or any promotional content with optional images, text, and buttons.

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.

Note that the Newsletter section and Footer features also include a newsletter signup block, so you might want to check those out, too.

Enable popup

To enable the popup, click on the Popup section and check the Enable checkbox.

Stiletto scans for "exit intent" to automatically display when customer's cursor accelerates or first leaves your site.

Set up content

Add multiple headings, an optional newsletter signup, an image, and button.

Steps

In your theme editor (Customize):

  1. Click the arrow next to the Popup section to show the nested content blocks.

  2. Click on the Heading block ("Subscribe") to enter text and change the Heading Size.

  3. (Optional) To disable the newsletter signup, click Remove block or the eye icon to remove or hide it.

  4. Add a Subheading by using the +Add block button.

    Change the default Subheading text and select a Subheading size.

  5. Add an Image by using the +Add block button to display within the popup.

    There are no required image dimensions. Use the Image size sliders to adjust your image.

    Click on the Popup section if you want to add a background image.

  6. Add a Text block by using the +Add block.

    Change the default Text and select a Text size.

  7. (Optional.) Use the drag and drop handles ⋮⋮ to change the order of the popup content blocks.

    Shopify content blocks nested in a section
    Shopify content blocks nested in a section

    Click Remove block or the eye icon to remove or hide blocks.

  8. Click Save.

Add buttons

Add a Button block to link to your collections or products or any other page with a custom label.

Steps

In your theme editor (Customize):

  1. Click + Add block and select Button, the click on the new button block to open the settings.

  2. Select or paste a URL for the Button link.

  3. 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?"

  4. Select a Button style: either Solid, Outline, or Text.

    The button uses the theme-wide button color set in the Theme settings.

  5. (Optional.) Use the drag and drop handles ⋮⋮ to change the position of the Button:

    Shopify content blocks nested in a section
    Shopify content blocks nested in a section
  6. Click Save.

Change the popup style with custom colors, overlays, and a background image.

Steps

  1. Click on the Popup section to open the settings.

  2. (Optional) Under Background, click Select image to upload a background image.

    For optimal quality across all devices, we recommend images width or height of 2048px.

  3. Select the Image focal point to choose which area of the image to keep centered and visible when cropping occurs.

  4. Use the color selector to change the Text and Background color.

    The background color appears when there's no background image.

  5. (Optional) Change the Overlay color and Overlay opacity using the slider to increase the contrast between the text and background image (if used).

    These settings help make your text clear and readable.

  6. (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.

  7. Click Save.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.