How To Set Up A Sign Up Pop Up for Squarespace With Mailchimp

How to set up a sign up pop up in squarespace

Hello creatives!

I’m always making little changes on my website to improve the overall user experience and to also generate leads and conversions in order to build up my mailing list so I could actually have several people to share useful secrets and freebies with and to rant.

I have several opt-in forms on my website; one on my landing page, one on my blog sidebar and I sometimes share the sign-up form on relevant blog posts. But I felt like it wasn’t enough. Sometimes readers need that little nudge to be reminded that yes, there is a mailing list you can sign up to!

The most popular way to do this is through subscriber pop ups (seriously, my favourite bloggers have opt-in pop ups which got me to sign up to their lists.) I had also read a few articles on how pop ups can be able to increase mailing list subscribers so I decided to create one for my website.

Now, my website is hosted on Squarespace and if your template doesn’t support pop ups, you may need some heavy coding skills and my coding skills are minimum at best. I wanted something simple and easy to do for now just to test things before I give myself a bald patch by trying to figure out a way to code a perfect pop-up. Since I was already using Mailchimp for my email list, I felt that it would be easier to design a pop-up from Mailchimp and yes, easy it was! Today, I’m going to show you how to create an email pop up for Squarespace using Mailchimp.

When you first sign in into Mailchimp, click on ‘lists’ on the navigation bar at the top. You’ll see a list of the lists you have saved onto Mailchimp. At this point I’m assuming that you’ve already set up your newsletter list. If you have several lists, click on the one that you want your readers to sign up for then click on ‘sign up forms’. Then select ‘subscriber popup’ in the menu. You’re ready to design your pop up now!

Mailchimp sign up forms menu

Mailchimp sign up forms menu

Click on 'Subscriber popup'.

Click on 'Subscriber popup'.

In the working window on the top right, you’ll see a style panel where you can play around with the styles to see which design will best suit your needs and/or your website. In the content area you can fill in your call to action copy and depending on the design style, your accompanying image.

The content field.

The content field.

Before uploading an image to accompany the popup box, make sure it will fit. The size of the images differ according to the layout design you choose but I chose the third one for my pop up and and the size dimensions were  is 450px by 400px.

creating a pop up box in squarespace-3

You can also change the wording font, the button colours and the button hover colours. I found out that when I typed in the hex # colour values, the colours didn’t change but when I typed in the RGB values, that worked. So you may face the same problem but now you know what to do, yay! *fist bump*

In the ‘fields’ tab, you can choose which fields you want to appear on your pop up but I suggest keeping it simple with 2 or 3 fields.  When you’re done designing the pop up, you can set the delay time before the pop up appears in the ‘settings’ tab. I set mine to 5 seconds so visitors get a little time to check out my website before they’ll be given the option of signing up .

Popup box fields.

Popup box fields.

And now, at this point you’re probably done with the design. You may want to see how it looks. To do this, just click on ‘Popup Preview’ in the navigation panel at the top. Your pop up will appear after the delayed time set. You can also click on 'mobile'  right above the popup box to see how the box will look on mobile phones. When you’re done previewing the popup just click on ‘close’ (make sure that the close link colour is a visible enough colour because you don’t want to annoy visitors with a pop up that they can’t close :O).

Popup preview! Steel yourself, it's like standing next to a toaster while the bread pops up, haha!

Popup preview! Steel yourself, it's like standing next to a toaster while the bread pops up, haha!

And there! You’re done. Well, almost. Now you just need to make sure that the pop up appears on your Squarespace site. To do that just click on ‘view code, at the very bottom of the style panel in Mailchimp, right next to the publish button. Then copy that code and open up Sqaurespace.

In the Squarespace home panel, just click on ‘settings’ then ‘advanced’ then ‘code injection’ and paste the code you copied in the ‘header’ field box. Then save.

creating a pop up box in squarespace-6

Back in Mailchimp, click on ‘publish’ then click on ‘save and exit’ at the top navigation panel!

Click on that little turquoise button there at the bottom to publish! 

Click on that little turquoise button there at the bottom to publish! 

And you’re done! I hope these instructions were easy to follow. If not, just email me and I’ll reply soonest to help you!  Now you can go on your own website and “aahh” happily when your newly designed pop-up appears!

If this post helped you, please leave a comment below with a link to your website and I’d love to check out your pop –up! Or you can just leave a link, I’m always looking for new websites and blogs to check out and new creative friends to make!