How to Create a Promotional Pop-Up For Your Website

In case you haven't already heard, Squarespace recently rolled out a new feature for their e-commerce plans... and I'm SUPER excited about it, FINALLY!

Instead of designing a pop-up with your email service provider, inserting the code into the backend of your site and trying to make it look all cohesive, you can now create your promotional pop-up right there in Squarespace (whoop, whoop!).

I'm all about that easy life :) and this is SO much easier!!!

P.S. Make sure to download my list of BEST websites for FREE stock images. Start creating eye catching pop-ups that convert ;) Click HERE to get the list!

how to create a promotional pop up form on your website using squarespace


There are SO many reasons you might want to add a pop-up to your website... maybe you want to inform your customers of your 40% off sale, maybe you want them to sign up for your email list, maybe you want to give them an exclusive discount code off their first purchase, maybe you want to announce your latest collection or blog post.

Whatever the reason, pop-ups are SUPER effective.

The best thing about Squarespace adding its' own pop-up is that it's 100% compatible with your website. They have lots of layouts and styles to choose from, allowing you to ensure it matches your brand. From a full page overlay, to a small and subtle bottom bar. You can set it up to display when and wherever you want it.

They even allow you to choose WHEN you'd like it to pop-up.

Today, I'll guide you through the steps to create your own promotional pop-up.


What Squarespace plans offer this feature?

Promotional Pop-Ups are available on the Business Website plan and the Commerce Basic and Advanced plans.



Step 1 - Find the Pop-Up Feature

Once logged in to Squarespace you'll want to navigate to the Promotional Pop-Up section. To get there click Settings, and then go to Marketing. From there you'll find the Promotion Pop-Up tab.


Step 2 - Choose Your Layout

Once you've navigated to the Promotional Pop-Up panel, you'll need to click Change Layout to see all the different designs. From here, scroll through all the layouts and pick your fave (I'm currently loving the one shown below), hover over it and hit Select then Save at in the top left corner.


Step 3 - Choose An Action (Newsletter or Button)

From the Promotional Pop-Up panel you'll want to click Action. This is one of my FAVORITE features because up until now, you could only prompt your visitors to sign up for your email list. Now you can send them to a specific place on your website with the button feature (hollar). 

squarespace promotional pop-up tutorial

Let's go over how to add a newsletter opt-in first.

Newsletter Opt-In

Once you've clicked the Action button, you'll want to click Sign Up For A Newsletter. This will allow your audience to sign up for your newsletter and be added to your email list. (if you want to find out more about email lists and why they're CRUCIAL for your online biz, read THIS article)

You'll then need to integrate your email service provider with your sign up form in order to properly store your new subscribers.

Under Storage Options you'll choose either Mailchimp or Google Drive to connect your account.

I use Mailchimp so I'll show you what to do next. Click the Mailchimp tab and a pop-up will appear asking you to log in to your account. Go ahead and log in.

Once logged in, the pop-up will disappear. You'll then see a drop down bar labeled Select List. Click the list you want subscribers to be added to. That's it! 


Button Option

With the button option, the possibilities are endless! You might want to use this option when you've got a new collection out that you want your audience to see, you could link to a different site (or blog post), you could add a file to the button, or anything you want your audience to discover first thing when entering your site. You can add up to two buttons.

Under the Goal section you'll select Click A Button.

You'll then add a button label in the first field. This will become the text on your clickable button.

Then in the right field, you'll add the link you want the button to take your audience to.

If you only want one button to show, just leave the label and direct link fields blank.


Step 4 - Add Text

Navigate back to the Promotional Pop-Up tab and click on Content.

Then enter your Headline and Body to the pop-up. A preview will show on the right of this panel showing you what it'll look like.


Step 5 - Choose How Your Pop-Up Appears


Back in the Promotional Pop-Up panel, you'll want to click Display & Timing. This will allow you to choose when and where the pop-up appears on your page.

Under Pages, click on Show The Pop-Up On: button. From here I suggest you choose Any First Page. This makes sure that the pop-up will appear whatever page your audience is looking at for the first time.

Or you can choose Only Certain Pages. This makes it so the pop-up only shows up on the pages you select.




From the timing drop down menu,you can choose when the pop-up will appear.

Either Show On A Timer, Show On Scroll or Show On A Timer & Scroll. I have mine set at Show On A Timer & Scroll.

For whichever option you choose, you'll get to select how many seconds until the pop-up appears and/or how far the person has to scroll down before the pop-up appears.



Under Frequency, you'll want to set how often returning visitors will see your pop-up. Once they've already seen it once, you may not want them to see it again. Or maybe you want to make sure it pops up every time they visit your site.


Step 6 - Add Your Image

Back in the Promotional Pop-Up panel, you'll want to click Image. You'll then drag and drop your image in the designated area. A preview of your pop up will show to the right.



squarespace promotional pop-up

Step 7 - Edit The Pop-Up Style

Last, you can now edit the style of your pop-up. Just click on Style and from here you can change the Fonts, Colors and any animations you might want.


Step 8 - Enable Your New Pop-Up

No worries, while you're working on your pop-up design, color and style... nothing will show to your audience just yet. You'll have to enable  your pop-up before it'll show to the public.

Just click to the right of your Promotional Pop-Up and make sure it shows ON. Then hit Save and you're good to go.

squarespace promotional pop-up

Voila! That's it, you're done :) 

Now go make yourself a kick ass new pop-up, simply because you can and it's super easy.

High five to growing your email list. Seriously, it's where the money's at yo!

If you want to create eye catching promotional pop-ups that CONVERT, make sure to download my list of best websites for stunning FREE stock images. Click below to download!