How to add and style a popup on your Squarespace website - video tutorial
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:
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.
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
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.
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.
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.
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!
MORE SQUARESPACE TUTORIAL VIDEOS
- How to disable the escape key login on your Squarespace website
- How to add and customize a form on your Squarespace website
- How to add and customize a Squarespace announcement bar
- How to name photos for increased SEO in Squarespace
- How to add and remove pages from the navigation in Squarespace
- 4 Squarespace templates I recommend for business websites
- How to add videos to your Squarespace website
- How to use tags and categories in your Squarespace blog
- Favicons: how to create one in Canva and upload it to your Squarespace website
- How to set up a blog on a Squarespace website
- How to add related posts to the bottom of Squarespace blog posts
- How to connect social media accounts to your Squarespace website
- How to easily find out which Squarespace template a website is using
- How to update and edit banner images in Squarespace
LAUNCH YOUR BEST SITE - FREE ECOURSE
Interested in learning more about what it takes to get a website up and running? Sign up for my free 7 day e-course!