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 selecting 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
- Letting visitors choose between two different language versions of your site
Before you begin
- 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.
- You can't create and edit promotional pop-ups in the Squarespace App. Edit your site on a computer when you want to add a pop-up.
- Promotional pop-ups only appear when a visitors lands on a page. It's not possible to set a pop-up that appears as someone exits your site.
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.
Create a promotional pop-up
To add your promotional pop-up:
- In the Home Menu, click Marketing, then click Promotional Pop-Up.
- Use the Change Layout panel to choose a layout.
- Use the Action panel to add a newsletter sign-up or a button.
- Use the Content panel to add text.
- Use the Display & Timing panel to set how the pop-up appears.
- If the layout you chose supports images, use the Image panel to add a background image.
- Use the Style panel to style the pop-up.
When you're ready to enable your promotional pop-up, switch the Display Pop-Up toggle at the top of the panel to black, then click Save.
Disable the pop-up
To disable the pop-up, switch the Display Pop-Up toggle back to white, then click Save. A disabled pop-up keeps all settings intact until you’re ready to enable it again.
Choose a layout
Select your layout in the Change Layout panel. The pop-up layout determines its size and how it appears on your site. You can choose to cover a small part of the page for a subtle look, or fill the whole page for a prominent pop-up. We recommend previewing a few layout options.
To choose a promotional pop-up layout:
- Hover over a layout and click Select to preview.
- Click Save at the top of the page to apply the selected layout.
Choose an action
Choose whether your visitors will sign up for a newsletter or click a button in the Action panel. You can enable a newsletter or button pop-up, but not both at the same time.
Option 1 - Newsletter
You can invite visitors to subscribe to your email list:
- Under Goal, select Sign up for a newsletter.
- In the Button tab, edit the Email Field Placeholder Text to change the text that appears in the email address box. The default text is Email Address.
- Edit the Submit Button Label to change the 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.
- Edit the Disclaimer that appears below the email address box.
- Click Storage and select Squarespace Campaigns, or click Connect other services to select Mailchimp or Google Drive to store your submissions. This tells the pop-up where to send new emails so you can collect and take action on them. You can't connect newsletter submissions to email or another third-party service.
- Click Verification to see 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 method is required for Squarespace Email Campaigns mailing lists.
- Click Post-Submit and edit the Post-Submit Message that appears after a visitor submits a form.
- For a more advanced message, you can enter code in the Post-Submit HTML box to display along with the post-submit message. The post-submit HTML doesn't replace the post-submit message; instead, they appear together below the headline and body text after a submission.
Option 2 - 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:
- Under Goal, select Click a button.
- Add a button label in the first box. This becomes the text for the button.
- Add a link for the button in the URL box, or click for additional link options.
- Repeat these steps for the second button. If you only want one button, leave the second label and URL box blank.
Tip: If you change the action for your pop-up (for example, from a newsletter pop-up to a button pop-up), reset the views in Display & Timing so repeat visitors will see the new version.
Add Headline and Body text to your pop-up in the Content panel. Use the preview to see how the text displays.
For the best design and the biggest impact, keep the text in the pop-up short. Try limiting the Headline to one sentence and the Body text to two or three sentences. Too much text will add a scroll bar to the pop-up, which might be difficult to navigate on mobile.
Choose how the pop-up appears
Choose where and when the pop-up displays in the Display & Timing panel.
Select pages for the pop-up
Choose the pages where the pop-up can show in the Pages section. You can show it on any first page the visitor sees or only on certain pages. 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.
To display the pop-up on the first page the visitor sees, select Any First Page from the drop-down menu.
To only display the pop-up on specific pages:
- Select Only certain pages.
- Click the Select Pages button that appears.
- Select any pages where the pop-up should appear. (You can show a pop-up on a main Index Page, but not on an Index sub-page.)
- Click outside the page menu to close it.
If you select multiple pages, the rules you set below will apply to those pages.
Tip: The pop-up will only appear on the first page where your visitor lands. If you choose to only show the pop-up on certain pages, it won't appear on each selected page, but on whichever of these pages the visitor lands on first.
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.
Select when the pop-up appears (on scroll or a timer)
Choose when the pop-up should appear in the Timing section:
- Show on a timer
- Show on scroll
- Show on a timer and a scroll
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.
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.
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.
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.
Add an image
If you're using a layout that supports images, you can add a background image in the Image panel. You can also reuse an image that you've already added to your site or use a stock image if you don't have an image to use.
To add your own image:
- Click the Images panel.
- Click the Add Images box, then click Upload Image. You can also drag and drop one or more image files into the uploader. Only .jpg, .png, or .gif files are supported.
Tip: You can't upload a video file to a pop-up. To simulate the look of a video, we recommend using an animated .gif.
To add a stock image:
- Click the Images panel.
- Click the Add Images box, then click Search Images.
Keep in mind:
- Not all pop-up layouts support images.
- Properly format your images before uploading.
- Review stock image best practices if you're using a stock image.
- Uploading multiple images creates a slideshow. It isn’t possible to add navigation controls or set the transition speed in a slideshow.
- Uploading too many high-resolution images can affect your pop-up’s load time.
- To use a solid background color instead, leave the Image panel empty and select a background color in the Style panel.
- For more control over image dimensions, enable Overlay Advanced Layout tweaks under Overlay Design in the Style panel.
Customize the style
Customize the look of your pop-up and help it match the rest of your site’s branding in the Style panel.
Using style tweaks, you can choose:
- Email address box style
- Fonts and colors
- How the pop-up appears on mobile
- How visitors dismiss/close the pop-up
- Padding and spacing (enable Advanced Layout)
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.
As you make changes, the pop-up preview updates. We recommend experimenting until you achieve a design you like.
Track promotional pop-up signups
Use Form & Button Conversions to see how visitors engage with your promotional pop-ups. You can track your form submission conversion rate, which compares the number of views a pop-up received with the number of submissions 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 will always be left-aligned on mobile to ensure the X icon is visible to visitors
You can set mobile-specific styles in the Style panel, or disable mobile pop-ups in the Display & Timing panel.
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.