How to Create a Pop Up in Squarespace: Step By Step Tutorial

Pop-ups can be an incredibly effective way to capture attention and drive action on your website. Whether you're offering a freebie, promoting a special deal, or simply building your email list, having the right pop-up in place can make all the difference. In this tutorial, I’ll walk you through how to set up a pop-up on your Squarespace website. Don’t worry—it's easier than it sounds, and I’ll guide you through each step to make sure it works perfectly for your needs.

WATCH THE STEP BY STEP VIDEO ON YOUTUBE:

Step 1: Navigate to Your Squarespace Website Settings

To get started, you’ll need to access the pop-up feature from your website’s backend:

1. Go to Pages: From your Squarespace dashboard, head to the “Pages” section.

2. Scroll to Website Tools: Once you're in the Pages section, scroll all the way down to the “Website Tools” area.

3. Select Promotional Pop-Up: Click on the “Promotional Pop-Up” option. Here, you’ll be able to set up and customize your pop-up.

At this point, you'll see the default pop-up set up for your site (if you’ve previously added one). Don’t worry—we’re going to go step by step to customize it exactly how you want.

Step 2: Choose Your Pop-Up Layout

Now it’s time to decide how your pop-up should appear on the screen. Squarespace offers a few different layout options:

• Full-Screen Pop-Up: While this is an option, I don’t recommend it. Full-screen pop-ups can overwhelm users and distract them from the content they’re interested in.

• Overlay Pop-Up: This is the one I recommend. It takes up only a portion of the screen, allowing the background content to remain visible. This makes it less intrusive and much more user-friendly.

Once you’ve selected your layout, click to proceed.

Step 3: Define the Action for Your Pop-Up

What do you want people to do when they see your pop-up? You have two options:

• Sign Up for a Newsletter: This option allows visitors to sign up for your newsletter directly through the pop-up.

• Click a Button: If you use a different email marketing platform (like Mailchimp or ConvertKit) or want to direct users to a landing page, this is the option for you. Simply choose “Click a Button,” type the button text (e.g., “Download Now”), and link it to the destination page.

For my own website, I prefer the button option because I use a separate email marketing platform. But if you’re using Squarespace’s email marketing, signing up directly through the pop-up can be a great way to grow your list.

Step 4: Craft Engaging Content for Your Pop-Up

Next, you’ll need to create the text that will appear on your pop-up. Keep it short, snappy, and to the point. The goal is to capture attention quickly and get visitors to act right away. Here’s an example:

• Headline: "Download Your Free Website Care Guide!"

• Subtext: Briefly explain what they’ll get in exchange for taking action (e.g., “Get tips and tools to maintain your website easily”).

Avoid generic phrases like “Sign up for our newsletter.” Instead, offer something of value—people are more likely to click when they know exactly what they’ll get.

Step 5: Adjust Display and Timing Settings

The next step is to customize when and where your pop-up will appear on your website. Here’s where you can get creative:

1. Choose Pages for Display: You can choose to show your pop-up only on specific pages. For example, I set mine to appear only on blog pages, homepage, and about pages. I don’t want the pop-up to distract people on sales or contact pages.

2. Set the Timing: You don’t want your pop-up to appear immediately—this can feel spammy and even hurt your SEO. I recommend setting a slight delay before it pops up. I typically set mine to show after 10 seconds. This gives users time to engage with your content before the pop-up appears.

3. Frequency Settings: Decide how often you want someone to see the pop-up. I recommend setting it to show again 30 days after the first visit. You could also set it to disappear after a user has subscribed to your newsletter (if that's your goal).

4. Mobile Settings: If you want your pop-up to show on mobile devices, be sure to review your settings for mobile view as well.

Step 6: Add an Eye-Catching Image

Images can make or break a pop-up. A striking visual can grab attention and make the pop-up feel less intrusive. I recommend using an image that’s relevant to the content you’re offering—whether it’s a picture of the freebie, a webinar, or a promotional offer. This helps make the pop-up more engaging and enticing.

To add an image, simply upload your chosen graphic and position it where it fits best in the layout.

Step 7: Customize the Style to Match Your Brand

The next step is to adjust the colors and fonts to match your brand’s style. Squarespace gives you the option to change:

• Background Colors: Customize the pop-up background to reflect your brand colors.

• Fonts: Choose fonts that align with the rest of your website for a cohesive look.

Make sure to review how it will appear on both desktop and mobile devices. The mobile settings will automatically adjust based on your choices, but it’s still important to check that everything looks good.

Step 8: Save and Display Your Pop-Up

Once you’ve customized everything to your liking, make sure to save your changes. The final step is to toggle the pop-up to "Display" so it goes live on your site.

That’s it! Your pop-up will now show up on your website according to the settings you’ve defined.

Final Tips for a Successful Pop-Up:

• Keep it User-Friendly: Don't overwhelm visitors. Your pop-up should complement the experience, not hinder it.

• Offer Something Valuable: People are more likely to engage with your pop-up if you're offering something that benefits them, such as a free guide or discount code.

• Timing is Key: Don't bombard users with pop-ups as soon as they land on your site. A slight delay can make all the difference.

• Test and Adjust: Test different styles, messages, and timing settings to see what works best for your audience.

Conclusion

Setting up a pop-up on Squarespace is simple and effective for capturing attention and increasing engagement. By following these steps and customizing the pop-up to align with your brand and goals, you can create an engaging experience for visitors without coming across as spammy.

Remember, a pop-up should add value to the user experience, not distract from it. So, have fun with the customization and find a style that works for you!

Thanks for reading, and if you found this tutorial helpful, make sure to subscribe for more Squarespace tips and tricks. Happy website building!