How to Style Your Promotional Squarespace Popup

Despite their reputation for being annoying, popups have proven again and again to be one of the most effective ways to grow your email list.

Luckily, Squarespace offers nine different popup styles to choose from–including some that are fairly non-intrusive–along with a range of detailed customization options.

To customize the appearance of your promotional popup, login to your Squarespace account, click on your site, and then go to Marketing > Promotional Popup > Style. You can customize pretty much every single aspect of your form in the settings including fonts, colors, the style of the newsletter signup form, entry animation, image overlay, and more.

But there’s one customization feature missing.

If you use third-party fonts on your site that are not listed in the style settings, you’ll have to add some CSS to make sure your Squarespace popup matches the rest of your site.

Fortunately, this is pretty simple. Just go to your CSS panel (Design > Custom CSS) and paste in the following code:

.sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="heading"]:not([data-compound-type]) h1#sqs-slash-page-header {
font-family: YOUR-FONT !important;
}

.sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="body"] p, .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper p {
font-family: YOUR-FONT !important;
}

.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] [data-compound-type="popup-overlay-action"] input[type="text"], .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] [data-compound-type="popup-overlay-action"] .error-message {
font-family: YOUR-FONT !important;
}

.sqs-slide-wrapper[data-slide-type="popup-overlay"] .button-style-solid [data-slice-type="buttons"] a, .sqs-slide-wrapper[data-slide-type="popup-overlay"] .button-style-solid .sqs-slice-custom-form a, .sqs-slide-wrapper[data-slide-type="popup-overlay"] .button-style-solid~.sqs-modal-lightbox .form-wrapper input[type=submit], .sqs-slide-wrapper[data-slide-type="popup-overlay"] .button-style-solid [data-compound-type="popup-overlay-action"] button[type=submit] {
font-family: YOUR-FONT !important;
}

.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] [data-compound-type="popup-overlay-action"] .form-disclaimer-text p {
font-family: YOUR-FONT !important;
}

Replace YOUR-FONT with the actual name of your font as you defined it in the CSS when you installed it. (Click here for instructions on how to install a custom font on Squarespace.)

Let’s break this down. There are five snippets of code here, so I’ll show you which part of the popup each one targets by number.

1. The first snippet targets the header font.

2. The second snippet targets the body font.

3. The third snippet targets the filler text on the form.

4. The fourth snippet targets the button font.

5. The fifth snippet targets the privacy disclaimer.

That’s it! The CSS is the same for each of the nine popup styles.

Have questions or want to request a specific Squarespace tutorial? Drop a note in the comments below!