How to add and style a popup on your Squarespace website

There's a reason why your favourite websites hit you with a popup - because they work. Really well.

Love 'em or hate 'em, popups are here to stay. Not only are popups an effective way to collect emails to grow your list (which you should start asap, if you haven't already!), they can also be used to advertise and notify visitors of a promotion, or even drive traffic to specific content/pages on your website.

Web design has advanced a lot in recent years and popups have become less intrusive, which is a #win for everyone on the internet. Squarespace's built-in popup feature is fully customizable and lets you choose between different layouts and styles. Branding is seamless and you also have full control over where and how the popup appears on your website.

Now that popups are designed to be less "in your face" and they no longer butcher the user experience of a website, they're a design element that I totally get behind.

If you're curious about adding a popup to your Squarespace website, I hope this video tutorial shows you how easy they are to create and just how much customization is available to you!

Note: want to watch more of my Squarespace video tutorials? I've linked to them at the bottom of this post or you can head over to my Youtube channel to binge them now. #aintnoshame

How to create and style a popup on your Squarespace website

In this video you will learn:

How to enable/disable popups on your Squarespace website
How to add popups to your Squarespace website
How to style popups on your Squarespace website
How to customize the settings of your Squarespace popup

* This video shows a demo website using the Rally template

How to create and style a Squarespace popup

Step 1 - Choose a popup layout

Squarespace has different popup layout options and depending on which one you choose, it will appear differently on the page. The most common choice is a popup that covers only part of the page, but you can also select a popup that fills the entire page area.

Log into your Squarespace website backend. From 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 a popup 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.

Step 3 - Add text to your popup

Click the Content panel to add Headline and Body text to your pop-up. Use the preview to see how your text displays. Best practice is to set the Headline text to one sentence and keep the Body text to 2-3 sentences. When you add too much body text, you'll end up with a scroll bar in the popup which is NOT good, especially for people viewing your website on a mobile device.

Step 4 - Choose how the pop-up appears

Click the Display & Timing panel to choose where and when the pop-up displays:

Pages

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.

For popups that appear on the first page:

Select Any first page from the drop-down menu.

For popups that display 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.

If you select popups that display on multiple pages, set the rules from drop down.

Timing

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

Frequency

Use the Frequency drop-down menu to set how often popups are shown to visitors returning to your website. 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.

FYI Squarespace uses cookies to identify new and returning visitors.

Don't show again after newsletter signup

Squarespace lets you hide the popup from visitors who already subscribed to your newsletter popup by checking Don’t show again after newsletter signup.

Show or hide on mobile

Check Show on mobile to show your pop-up to visitors using a mobile device.

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.

Step 5 - Add an image

Click the Image panel to upload at least one background image
Uploading multiple images creates a slideshow
To use a solid background colour instead, leave the Image panel empty and select a background colour in the Style panel

To add your own image:

Click the Add Images box, then click Upload
You can also drag and drop one or more image files into the uploader

Step 6 - Customize the style

Click the Style panel to customize the look of your pop-up and brand it to match the rest of your website.

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

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.

Note: Even if you disable a popup, Squarespace will keep all settings intact/the same until you’re ready to enable it again.

Final Thoughts

Popups are basically the strongest call-to-action (CTA) on your website and you will see great results and high conversions if you take advantage of that feature.

Squarespace makes it super easy to customize a popup so that you've got the settings exactly you how you them, the design and layout matches your overall branding, and you aren't ruining the user experience.

Rather than using a popup to demand or force an action from your website visitors, I love seeing popups set up to be something that benefits everyone - whether that's with a valuable resource, exclusive coupon code, insider updates and early access, etc.

If you don't have a popup on your website yet, try one out and see what happens. I think you'll be pleasantly surprised how effective popups can be and just how much control and customization is available to you.

Now it's your turn to tell me, do you have any popups on your website? How do you use them? Have they helped you grow your email list? Increase sales? What are your favourite customizations and styling choices? I'd love to know so leave me a note in the comments below!

Want to create your own stunning, professional Squarespace website? I build custom sites and I’d love to work with you. If you’d rather take the DIY route, I highly recommend the online course Website that Wows. It's a simple, step-by-step program designed to help coaches and service-based entrepreneurs create their own client-winning website from scratch. Plus, it's beginner-friendly with no coding required! You can start with a free trial here.