You can create a pop-up that appears when visitors land on your site to collect emails, advertise a promotion, or drive traffic to content. This guide reviews how to add a promotional pop-up and choose when and where it appears on your site.
Promotional pop-ups are great for:
- Inviting visitors to join your mailing list
- Advertising a sale or discount code
- Announcing your latest blog post, a new album, 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 enable a newsletter or button pop-up, but not both at the same time.
- If you change the pop-up significantly, reset the views to ensure that repeat visitors see the new version.
Pop-ups and SEO
While Squarespace works hard to help you build an SEO-friendly site, using pop-ups may affect 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.
Google recently announced that if web content isn’t easily accessible from mobile search, the site might not rank as highly in search results. To help you avoid this issue, promotional pop-ups fill half the page on mobile. You can also choose to prevent the pop-up from displaying on mobile altogether.
Note: SEO strategy falls outside the scope of Squarespace support, and 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.
- 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-ups 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.
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.
- 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 message and HTML appears below the headline and body text after a submission. It doesn't replace it.
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 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 the pop-up can show on 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.
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. 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.
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.
Can I set the pop-up to appear when someone is leaving a page?
No, it’s not possible to set an exit intent pop-up. The pop-up will only appear on the first page where your visitor lands, based on the rules you specify in the Timing & Display panel.
Can I use multiple images?
Yes. Upload multiple images to the Image panel to create an autoplay slideshow on your pop-up.
Can I upload a video to my pop-up?
No. Only .jpg, .png, or .gif files are supported. To simulate the look of a video, we recommend using an animated .gif.
Can I enable a sequence of multiple pop-ups?
No. You can only enable one pop-up at a time. To display another message to your site, add an announcement bar.
Will the pop-up appear on a password-protected page?
Yes. 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.
Can I connect newsletter submissions to email or another third-party service?
Can I add custom code to my pop-up?
No. Pop-ups don’t support custom code.
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.