Creating a promotional pop-up

Trigger a new subscribers form, share a discount, or make an announcement that appears when a visitor loads your site.

You can create a pop-up that appears when visitors land on your site. This guide covers how to add a promotional pop-up to your site, and your options for choosing when and where pop-ups appear.

Promotional pop-ups are great for:

• Inviting visitors to join your mailing list
• Advertising a sale or discount code
• Announcing your latest blog post or a new product
• Asking visitors to verify their age before proceeding to age-restricted content

Promotional pop-ups are a premium feature available in Business, Commerce, Professional, and Premium plans. To create one, you need to use a computer. It's not possible to add promotional pop-ups in the Squarespace App.

Watch a video

Add a promotional pop-up

To add a promotional pop-up:

1. Open the Promotional pop-up panel.
2. Choose a promotional pop-up layout. 
3. Customize the pop-up's text, timing, and appearance using the Action, Content, Display & timing, Image, and Style settings. Review the table below for more details.
4. Switch the toggle on beside Display pop-up, then click Save. 

To test your pop-up after you create it, visit your site in an incognito window.

Pop-up settings

Click the setting in the Promotional pop-up panel to customize the pop-up. Use this table as a guide.

Setting	Description
Display pop-up	Switch the toggle on or off beside Display pop-up to enable or disable the pop-up, then click Save. A disabled pop-up keeps all settings intact until you’re ready to enable it again.
Change layout	Choose the size of the pop-up, and if it will cover the entire page or a small part of it. You can only add images to templates that include them.  Hover over a layout and click Select to preview, then click Save to apply the layout. Note that larger layouts may affect SEO.
Action	Choose if the pop-up will prompt visitors to sign up for a newsletter or click a button. Follow these steps to apply the settings.
Content	Add text to the pop-up. Click the Headline and Body fields to add text, then click Save. Keep this text short. Too much text may cause display issues.
Display & timing	Choose when, where, and how often the pop-up will display. Follow these steps to apply the settings.
Image	Add an image to the pop-up, if they layout you chose supports one.  Follow these steps to upload an image.
Style	Style the pop-up to match your site's look and feel. Click an area of the pop-up to display only the style tweaks available for that area and hide the rest. Click Show all to see all available tweaks. The post-submit message follows the Body font and color tweaks.

Action settings

Use the Action settings in the Promotional pop-up panel to add a call-to-action for your visitors.

Subscribe to a newsletter

To invite visitors to subscribe to your email list, choose Sign up for a newsletter.

Button

Click the Button tab to change the text that displays in the newsletter pop-up.

• Email field placeholder text - Text that appears in the email address box. The default text is Email Address.
• Submit button label - Text on the button visitors click to submit their email address. The default text is Submit, but you can change it to something like Join Us or Sign Up.
• Disclaimer - Text that appears below the email address box.

Storage

To collect visitor responses, click the Storage tab to connect a storage option.

• Click Squarespace Campaigns, or click Connect other services to choose Mailchimp or Google Drive to store your submissions.
• You can't connect newsletter submissions to email or another third-party service.

Verification

Click the Verification tab to review subscriber verification options. The default option is Send confirmation email, but if you enable Google reCAPTCHA, you can disable the confirmation email. At least one verification method is required for Squarespace Email Campaigns mailing lists.

Post-submit

Click the Post-submit tab to change the text that appears after a visitor signs up for your mailing list.

• Post-submit message - The text that appears after a visitor submits a form, below the headline, body text, and disclaimer. 
• Post-submit HTML - If you have coding knowledge, you can add custom code to this box to display along with the post-submit message below the headline, body text, and disclaimer. The post-submit HTML doesn't replace the post-submit message.

Click a button

You can add up to two buttons that link to your site's pages, a file, a different site, or anything else you want visitors to discover. 

1. In the Action settings, choose Click a button.
2. Add a button label in the first box. This becomes the text for the button.
3. Add a link for the button in the URL box, or click for more link options.
4. Repeat these steps for the second button. If you only want one button, leave the second label and URL box blank.

Display & timing settings

Use the Display & timing settings in the Promotional pop-up panel to add a call-to-action for your visitors.

Select pages for the pop-up

Choose the pages where the pop-up shows in the Pages section. To display the pop-up on the first page the visitor sees, select Any first page from the drop-down menu.

Select Only certain pages to limit where the pop-up appears. This can be useful for hiding the pop-up from a page that already has a newsletter form on it, or only showing it on your homepage. The pop-up will appear on whichever of your chosen pages the visitor lands on first. After you've chosen the pages, click outside the page menu to close it.

Keep in mind:

• You can't have a pop-up on pages within a member area, or on Index sub-pages.
• If you select multiple pages, the rules you set below will apply to those pages.

Choose when the pop-up appears (on scroll or a timer)

Select if the pop-up should appear on a timer and/or scroll in the Timing section. After making your selection, use the other drop-down menus to set the time, the scroll percentage, or both.

If you set a time and a scroll position, the pop-up will appear when the first action happens. For example, if you’ve set the time to After 10 seconds and the scroll percentage to 25% Down, there are two ways that the pop-up can appear:

• The visitor lands on the page and immediately scrolls down 25% of the page.
• The visitor lands on the page and doesn’t scroll, but stays there for 10 seconds.

If your visitor lands on a password-protected page, your pop-up will follow the set display and timing rules after they enter the password.

Choose a frequency

Set how often returning visitors see your pop-up with the Frequency drop-down menu. If they’ve seen it once, you might not want them to see it the next time they visit. For a less disruptive experience, you can show again after a certain amount of time or hide it for return visitors altogether.

You can choose between the following frequency options:

• The next day - returning visitors see the pop-up again after 24 hours
• In 1 week
• In 2 weeks
• In 30 days
• Never - returning visitors never see the pop-up a second time

We use cookies to identify new and returning visitors. If a visitor has our pop-up cookie in their browser, your site will count them as a repeat visitor. If they clear their cache or visit your site from a new browser, they’ll count as a new visitor.

Don't show again after newsletter signup

If you’re using a newsletter pop-up, you can hide the pop-up from visitors who already subscribed by checking Don’t show again after newsletter signup.

Tip: Only subscriptions from the pop-up count toward this rule. If someone subscribes from another area of your site, like a newsletter block or at checkout, the pop-up can still appear.

Show or hide on mobile

To show your pop-up to visitors using a mobile device, check Show on mobile.

For the best display, the pop-up will have a different look on mobile. To customize it, use the style tweaks in the Mobile section of the Style panel. You can test how this will appear using device view.

Reset views

To show the pop-up again to all visitors the next time they visit, even if your settings would otherwise prevent it, click the Reset button.

This is helpful if you changed the pop-up and want repeat visitors to see the new design on their next visit. After your visitors have seen the new content once, the pop-up will revert to the set frequency rule.

Image settings

In Image settings, click the image upload box, then click Upload image. You can also reuse an image that you've already added to your site or use a stock image. To use a solid background color instead of an image, leave the Image panel empty and choose a background color in the Style panel.

Keep in mind:

• Only .jpg, .png, or .gif files are supported.
• Ensure you properly format your images before uploading them.
• Review stock image best practices if you're using them.
• Uploading multiple images creates a slideshow. It's not possible to add navigation controls or set the transition speed in a slideshow.
• For more control over image dimensions, enable Overlay advanced layout tweaks under Overlay design in the Style panel.

Example pop-ups

Click the tabs to review possible settings for common promotional pop-ups. You can use any template and style settings to build these pop-ups, but only templates that include images can support images. 

Track promotional pop-up engagement

Use form & button conversions to see how visitors engage with your promotional pop-ups. You can track your conversion rate, which compares the number of views a pop-up received with the number of submissions or clicks it got.

Promotional pop-ups on mobile

Promotional pop-ups work on mobile but display differently than on computers:

• The pop-up fills half the screen
• Background images don't display
• For layouts that center text on computers, text is always left-aligned on mobile to ensure the X icon is visible

You can set mobile-specific styles in the Style panel, or disable mobile pop-ups in the Display & timing panel.

Pop-ups and SEO

Using promotional pop-ups can negatively impact your site's ranking in search engines. If you’re concerned about SEO, we recommend choosing a pop-up layout that only covers part of a computer screen.

It's especially important to ensure that pop-ups don't restrict access to your web content on mobile. Otherwise, Google may not rank your site high in mobile search results. To help you avoid this issue, all promotional pop-ups only fill half the page on mobile. You can also choose to disable pop-ups on mobile altogether.

Note: SEO strategy falls outside the scope of Squarespace support. We offer SEO-friendly features and a full SEO checklist to optimize your site for search engines and visitors, but we’re unable to provide specific advice on site ranking.

Troubleshooting

The pop-up keeps reappearing after dismissing it

If your visitors see the pop-up reappear during the same browsing session, they may be visiting your site in a private or incognito window. Private windows won’t recognize individual visits, meaning the pop-up will follow the set timing and frequency rules each time the visitors refreshes or visits a new page of your site.

The pop-up displays a scroll bar 

Too much text adds a scroll bar and may cause display issues on mobile. Try to limit the headline to one sentence, and the body to three.

The pop-up loads slowly

Uploading too many high-resolution images can affect your pop-up's load time.

Limitations

• You can only enable one pop-up at a time. To display another message on your site, add an announcement bar.
• Pop-ups don’t support custom code.
• Promotional pop-ups only appear when a visitor lands on a page. It's not possible to set a pop-up that appears as someone exits your site.
• You can't upload a video file to a pop-up. To simulate the look of a video, we recommend using an animated .gif.