How to Add a Promotional Popup In Squarespace
Watch the video or read the transcript below:
Transcript:
Hi guys, welcome back to my channel! In today's video, I want to show you how you can quickly add a promotional pop-up to your Squarespace website. This will work for Squarespace 7.0 and 7.1 -- the feature is located in virtually the same place.
Before I show you how to create one, let me just briefly say what it is. A promotional pop-up basically shows up when somebody lands on your website. The purpose is to promote something:
you can promote a sale
you can invite somebody to follow you on any social media channel
you can promote your services
you can promote your blog posts
you can promote your email list
your freebie download...
Basically, whatever you want to promote at any given time in your business--that's what you can use the promotional pop-up for.
So now, with that out of the way, let me show you how you can set it up.
So basically you're going to go to your Squarespace website and then you're going to click on marketing and under engagement click on the promotional pop-up.
Now, if you don't have a business or commerce plan it'll tell you that this is a premium feature so you will need to be on one of those plans if you want to use this so keep that in mind.
The first thing you're going to want to do is to choose the layout for your pop-up. As you can see, there is a very plain looking one, then you have one that has an image on the side or at the top; you can also choose one that shows up at the very corner, or you can even select one that shows up as the bar at the bottom of your site; or even one that takes up the entirety of your website--basically, covers your homepage or any page that they're on. Then, they have to click this x button to turn it off. There is no right or wrong choice--just pick one that you like best and then go crazy with customizing it to your liking.
So, just to keep everything simple, we're going to choose this simple pop-up that shows up in the middle of the screen practically. And then, we're going to go on with styling and customizing the form.
The first thing you're going to customize is to choose an action for your form. You can choose between signing up for a newsletter or clicking a button. Squarespace gives you two links here so you can-- let's say you want to invite people to follow you on Instagram.
So you can say follow me on Instagram--keep in mind that the characters are limited here and then you would link to your Instagram profile right here.
So for right now, we're just going to put Instagram.com and then you're going to click save. And that's basically how you would get them to go to another page on the internet or another page on your website.
If you don't want to promote this, you can click sign up for a newsletter and then you can customize later on what the text says--I'll show you that when we get to that--but here, you can customize what the button says.
You can add or remove a disclaimer and the most important action that you can do here is choosing the storage option. You can choose Squarespace email campaigns, you can also connect other services such as Mailchimp, or if you use something like MailerLite or ActiveCampaign, you can use Google Drive and store them in a spreadsheet and then upload them to your email service provider.
If you want to redirect them to another page on your website you would enter that under post submit HTML--and I will leave the code down in the description of the video so you can easily do that--and then click on save. And that's it for the action!
So now we have to actually give them a reason to sign up, and this is where customizing the content comes in handy. So we're going to say... Download my guide to Pinterest and then you can customize the body. The last two steps are to choose when the pop-up will display. Here, under the display rules you can basically show the pop-up on any first page which means that no matter what page a visitor lands on your website, the pop-up will show up.
Or, if you want to show it only on certain pages then you would select only certain pages, and then you can select those pages from the menu that pops up. So, let's say you want to show it on your home page and you also want to show it on your blog page--you would select those two pages: simply click on them and this little checkmark will appear and that means that it will only show up on those two pages.
You can also choose to show the pop-up on a timer, on a scroll, or on a timer and a scroll. So if you select both those options, basically that means that the timer will show up when somebody has spent five seconds on your website and they've scrolled 25 down a particular page.
That's good so that you don't annoy them the minute they land on your website. You can choose to have the pop-up show up after 5 seconds 10 seconds or 30 seconds.
And then, after they see a pop-up and then they close it--you can choose to show it again the next day, in one week, in two weeks, and 30 days or never. So I'm gonna set it to the next day and then be sure to tick this option--don't show again after newsletter sign up so you don't annoy people who have already subscribed to you.
And you can decide whether you want to show it on mobile or not and then click Save. Then, you can customize the fonts and the colors that are used on the pop-up. So, you can choose a different font and then you can customize the color using the tools that you're already used to using in Squarespace.
A few options here:
the background color behind will put a color overlay behind the actual pop-up so it'll be like this grayish color but you can also customize it to whatever you want
the color behind the text is the one that will actually change the color of the pop-up itself
We're going to change the font for the button, you can also change the color, and then you can decide whether you want the email fields to stack up like this or if you want to show them one on top of the other.
You can choose fonts for the email fields, the privacy disclaimer, and all that happy stuff. You can customize the close button--we're gonna, in this case, I'm just going to make it a little darker so it's visible.
Then you can choose how the overlay appears; whether you want the pop-up to fade-in, slide-in, or scale-up. So we're just going to go with fade in and then you can also choose advanced layout styles which allows you to tweak how wide it is, what's the padding on it, how the content is aligned...I'm going to disable it right now. You can also customize how the pop-up looks on mobile devices.
When you're done customizing it, all you have to do is click on save, and then the last thing is to click on the toggle-- this little switch-- on and then the pop-up will display whenever somebody lands on your website; according to the rules that you set under display and timing.
And if you’re working on your website and need help getting it up and running, be sure to download my website roadmap below!
