There are two ways to create a pop-up in Squarespace: using code or using a third-party app. We’ll cover both methods below.
Method 1: Using Code
The first method is to use code to create a pop-up. This method is best for those who are comfortable working with code and are familiar with HTML and CSS. To get started, you’ll need to add the following code to your site:
Adding the Pop-Up Code
1. Go to Settings > Advanced > Code Injection.
2. In the Header box, paste the following code:
3. Click Save.
Your pop-up will now appear on your site after a delay of 1 second. You can change this delay by changing the value in the code (1000 = 1 second).
Customizing the Pop-Up Design
To customize the design of your pop-up, you'll need to edit the CSS code. This can be done in two ways: by using an external CSS file or by adding inline CSS to your site's code injection area.
We recommend using an external CSS file as it will keep your code organized and make it easier to make changes in the future. To learn how to do this, check out our support documentation.
Method 2: Using a Third-Party App
There are many third-party apps that allow you to create pop-ups for your Squarespace site without having to touch any code. These apps are great for those who want an easy way to add a pop-up to their site without having to mess with code.
Some of our favorite pop-up apps are PopUp Domination, Justuno, and OptinMonster.
Once you've chosen an app, follow their instructions on how to add the pop-up to your Squarespace site.
That's it! You now know how to add a pop-up to your Squarespace site using either code or a third-party app.