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. With multiple layouts and styles to choose from, you can design it to match your brand and stand out how you want, from a full-page overlay to a subtle bottom bar. You can set when and where the pop-up displays through different timing and display rules.
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
This guide reviews the steps to create and style a Promotional Pop-Up and different ways you can use it with 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, you can 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 layout that only covers part of the screen on a desktop.
Google recently announced that if web content isn’t easily accessible from mobile search, the site might not rank as high in search results. To help you avoid this issue, Promotional Pop-Ups fill up to 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.
Step 1 - Choose a layout
The pop-up layout determines how it will appear on the page. You may want the pop-up to subtly cover one part of the page or fill the whole page area. We recommend previewing a few different layout options.
- In the Home Menu, click Marketing.
- Click Promotional Pop-Up.
- In the Promotional Pop-Up panel, click Change Layout to browse all pop-up designs.
- Hover over a layout and click Select to preview.
- Click Save at the top of the page to apply the selected layout.
Step 2 - Choose an action (newsletter or button)
In the Promotional Pop-Up panel, click Action. From here, choose whether your visitors will sign up for a newsletter or click a button.
Option 1 - Newsletter
- Under Goal, select Sign up for a newsletter.
- Choose Sign up for a newsletter to invite visitors to subscribe to your email list.
- 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.
- Optional: Edit the Submit Button Label to change the text on the Submit 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.
- Optional: Enter a Post-Submit Message to appear after a visitor submits a form.
- Optional: For a more advanced message, enter code in the Post-Submit HTML box to display along with the post-submit message.
Note: The Post-Submit Message and HTML appears below the Headline and Body text after a submission, but doesn't replace it.
Option 2 - Button
You can add up to two buttons that link to another page of your site, 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 field. This becomes the text for the button.
- Add a link for the button in the URL field.
- To hide a button, leave the label and URL fields blank.
Tip: If you switch the action for your pop-up (for example, from a newsletter pop-up to a button pop-up), reset views so repeat visitors will see the new version.
Step 3 - Add text
Click the Content panel to add Headline and Body text to your pop-up. Use the preview to see how your text displays.
- Limit the Headline text to one sentence and the Body text to two or three sentences.
- Adding a lot of body text can add a scroll bar, which might be difficult to navigate on mobile.
Step 4 - Choose how the pop-up appears
Click the Display & Timing panel to choose where and when the pop-up displays:
In the Pages section, choose the pages the pop-up can show on. You can show it on any first page on 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 have the pop-up appear on the first page:
- Select Any first page from the drop-down menu.
To show in on specific pages:
- Select Only certain pages.
- Click the Select Pages button that appears.
- Select any pages where the pop-up should appear.
- Click outside the page menu to close it.
Note: You can show a pop-up on a main Index Page, but not on an sub-page within an Index.
If you select multiple pages, the rules you set below will apply to those pages.
From the Timing drop-down menu, choose when the pop-up should appear:
- Show on a timer
- Show on scroll
- Show on a timer and a scroll
For each option, 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%,” there are two ways that the pop-up can appear:
- The visitor lands on your site and immediately scrolls down 25% of the page.
- The visitor lands on the page and doesn’t scroll, but stays there for 10 seconds.
Use the Frequency drop-down menu to set how often returning visitors should see your pop-up. If they’ve seen it once, you might want them to see it the next time they visit. Or, for a less disruptive experience, you can set it to show again after a certain amount of time or to 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
Check Show on mobile to show your pop-up to visitors using a mobile device.
For the best display, the pop-up will automatically 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.
Step 5 - Add an image
If you're using a layout that supports images, click the Image panel to upload at least one background image. You can also reuse an image that you've already added to your site.
- Uploading multiple images creates a slideshow.
- To use a solid background color instead, leave the Image panel empty and select a background color in the Style panel.
- Pop-ups support .jpg, .png, and .gif files.
- Not all pop-up layouts support images.
To add your own image:
- 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 Add Images box, then click Search Images. This is a great option if you don't already have an image to use.
There are a few things to note about adding an image:
- Ensure that you’ve properly formatted your images before uploading.
- If you want to use a stock image, review our best practices before searching for an image.
- Most layouts feature full-bleed background or profile images.
- Uploading a large number of high-resolution images can affect your pop-up’s load time.
- It isn’t possible to add navigation controls or set the transition speed in a slideshow.
- In the Style panel, enable the Advanced Layout tweaks under Overlay Design to help set the dimensions of your image within the pop-up.
Step 6 - Customize the style
Click the Style panel to customize the look of your pop-up and help it match the rest of your site’s branding.
Using the style tweaks, you can:
- Set fonts and colors
- Style the email address box for newsletters
- Style buttons
- Choose how visitors dismiss/close the pop-up
- Change animation
- Set how the pop-up appears on mobile
- Under Overlay Design, enable Advanced Layout for more custom control over padding and spacing
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.
Step 7 - Enable or disable
When you’re ready to enable your pop-up, switch the toggle at the top of the Promotional Pop-Up panel so it turns green. To disable the pop-up, switch the toggle back to gray.
A disabled pop-ups keeps all settings intact until you’re ready to enable it again.
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.
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?
Will the pop-up work on mobile?
Yes. It will fill half the screen on mobile and won’t include any background imagery.
You can set mobile-specific styles in the Style panel, or disable mobile pop-ups in the Display & Timing panel.
Can I add custom code to my pop-up?
No. Pop-ups don’t support custom code.
My pop-up keeps reappearing after I dismissed 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.