Adding a Pop-Up to Squarespace: Everything You Need to Know
One highly effective way of showcasing on-your-face offers to your visitors without having to do that personally is by adding a pop-up to your website. Luckily for that, Squarespace has accessible, built-in pop-up creation. These pop-ups can do a lot of things, including:
So, try to get your readers to subscribe and/or download free offers or join your mailing list.
Make sure to showcase new products, new posts, new events, or new services that command immediate attention.
Send important notices with a pop-up.
Pop-ups can also be an amazing sales tactic, be it a limited-time offer, a new product launch, or any piece of information you want to highlight.
Although pop-ups are often seen as annoying, a well-designed pop-up can be beneficial for user experience, as well as an effective marketing tool to promote your products. The pop-up feature is built into Squarespace, so the whole creating and designing process is very simple. So, without further ado, here is a step-by-step process to create a stunning pop-up that will impress your website visitors.
If you're on the personal plan and are not looking to upgrade, then you can still embed a pop-up on your site using custom code or an Embed Code provided by your email marketing provider. Nonetheless, it's worth mentioning that the viability of this choice is contingent upon the specific email marketing provider you are using.
If you're interested in this alternative, I would recommend contacting your Email Marketing support team. ZZZ It looks like you have made a big effort before considering reading Encompass, but why not check if they provide a pop-up Embed, which would be perfectly working with Squarespace? This approach can offer a customized solution, taking into account your specific goals and constraints in the personal plan.
Adding a Pop-Up Feature to Your Squarespace Site
Accessing the Promotional Pop-up Panel:
Log in to your Squarespace account.
Go to the "Marketing" tab.
Select "Promotional pop-up."Layout Adjustments
Select The Layout Section
Initiate the layout selection process by clicking on "Change Layout." Explore the list and opt for the one that aligns seamlessly with your promotional offer.
For those intending to incorporate an image into the Pop-up, it's crucial to select a layout option that includes a designated area for image placement.
Personalizing Pop-Up Actions
Select Layout Section, Click "Action"
Having settled on your preferred layout, proceed to the "Action" tab.
In this section, you'll define the purpose of your pop-up. Squarespace provides two distinct options:
Sign Up to a Newsletter
Click a button
Option 1:Sign Up to a Newsletter
The Newsletter Block serves as a tool for gathering subscribers for your email list. However, before attempting to link it to your email marketing platform, it's essential to be aware that it exclusively integrates with the following platforms:
Mailchimp
Squarespace Campaigns
Zapier
Google Drive
The connection process is pretty simple for Mailchimp and Squarespace Campaigns users. All you need to is choose from a menu of your favorite platform, follow the onscreen prompts, and your form is linked in seconds.
The Google Drive integration can be helpful if you want to store email addresses in a basic spreadsheet. But, if you plan on using these addresses for email marketing in the long-run, this is probably not the best route to go.
If you are using any alternative email marketing platform like flodesk, convertkit, mailerlite, active campaign etc, then only veway to connect your form to your platform would be to save the detail in google drive and then use zapier to connect them. Zapier is an intermediary service: a service that helps connect two platforms that don't necessarily integrate natively with each other. This generic service can be used to perform actions in the Newsletter Block to be connected to many of the email marketing providers.
Option 2: Use a button
The button option offers a straightforward approach. By adding a link, Squarespace automatically transforms it into an aesthetically pleasing button.
The versatility of the button lies in its ability to link to various destinations across the web. The possibilities are virtually endless, allowing you to customize its use.
To add a link, click on the small cog/wheel icon, opening the Squarespace link settings panel. Here, you can input:
A web address
A link to a page on your website
An email address (prompting visitors to send you an email)
Phone number (prompting visitors to call you)
A file (automatically initiating a file download on the visitor's computer)
Upon completion, click save at the top left of the screen before proceeding to the next step.
If your goal is to use the pop-up to sign up visitors to your email list, and you can't utilize the newsletter block options mentioned earlier, consider using this button option.
Edit The Content
Click the next step and immediately find yourself in the Content section, where you set the headline and body text that shows up on your pop-up.
Lots of white space makes pop-ups feel less aggressive — keep the headline and text short and clear. Make it clear what visitors will get or what they're taking. Context. A short and catchy message is critical, or else visitors will simply hit the close button.
S, if you want to add an image to your pop-up, go to Image and click on Upload Image. It's pretty simple.”
After you upload, Squarespace automatically crops and positions your image in the layout of your choice. If you’re not happy with how the image is positioned or cropped, begin with adjusting the focal point, which is the dot in the center of the image. Use this dot to click and drag to change the focus.
However, if this needs additional adjustments, you can use the Style Settings that follow to ensure your image is framed perfectly for the biggest impact.
Customize the Pop-Up Style
Welcome to Style, the section that’s all about fine-tuning the aesthetic details of your pop-up. Here is where you can customize style settings like colors and fonts, and even spacing that influences the image crop.
Systematically go through the Style list and adjust each design setting to match your vision. Go ahead and play around with these; no need to worry about making irreversible changes. This is your sandbox to learn how you design the look and feel of your pop-up. Let your creativity flow!
Advanced Styling for Overlay Layouts
The Overlay Advanced Layout Styles, found near the bottom of the Styles list, are for those who want to adjust padding, width, and height.
Start by changing from Disabled to Enabled to unlock a bunch of advanced layout styles. This allows you to change the text alignment, total width, and padding for the pop-up.
This is especially helpful when trying to achieve innovative cropping of the image. As you play around with these settings, you’ll take note of how your image is framed differently. My suggestion is to explore these options and edit them until you find a design that is similar to what you had in mind. The more mess you make, the more your image cropping designs will expand, giving you plenty of creative space.
Mobile Styles
For Squarespace 7.1: Click the mobile icon situated in the top right corner of the editor page.
For Squarespace 7.0: Click the small line in the top center of the editor page to reveal a mobile icon; click on it.
This feature allows you to observe precisely how your changes will appear on mobile devices, providing valuable insights during the editing process.
Upon inspection, you'll likely notice that the mobile pop-up differs significantly from its desktop counterpart. It deliberately lacks an image and is positioned at the bottom of the screen. Squarespace adopts this approach following mobile design best practices, aiming for a smaller, unobtrusive, and easily dismissible pop-up to enhance user experience and retention.
The mobile pop-up intentionally deviates from the desktop version for practical reasons. While you have the option to customize it using CSS, it's advisable to retain the default mobile design to align with user-friendly principles.
Regarding Overlay Mobile Styles:
If Disabled, the main settings will mirror those from the desktop configuration.
If enabled, a plethora of additional mobile-only settings will emerge, providing room for experimentation.
Remember to hit save once you've fine-tuned your styles to ensure all changes are preserved.
Configuring Pop-Up Appearance and Timing
Before officially launching your pop-up, the crucial last step involves deciding when, where, and how often it will appear. Navigate to Display and Timing for this important configuration.
Pages:
Choose the pages where you want the pop-up to appear from the first drop-down menu. Notably, the pop-up will only display on the first page of your selected pages that the visitor lands on, ensuring a non-intrusive experience.
Timing:
Select whether the pop-up should appear based on a timer, a percentage of scroll down the page, or a combination of both. While there's no one-size-fits-all answer, it's advisable not to display the pop-up too soon. Allowing visitors to explore your site before encountering the pop-up increases the likelihood of a positive response.
Frequency:
Decide when the pop-up should reappear after the visitor has seen it. The frequency is a personal preference, tailored to the nature of your offering.
Reset:
Utilize the Reset feature to clear all data on your pop-up. This is especially handy when you've modified the offer, design, or created an entirely new pop-up.
Check Live:
Finally, the most critical step is setting up your new pop-up live. Activate it to make it officially visible on your Squarespace site.
And there you have it! Congratulations on successfully creating a promotional pop-up on your Squarespace site. Squarespace's user-friendly features make the process seamless, offering endless possibilities for promoting various elements on your website.
I hope you found this tutorial enjoyable and helpful. Thanks for reading!
FAQ
Q: Is it possible to customize the design of my Squarespace pop-up to match my website's branding?
A: Absolutely. Squarespace enables you to design your pop-up's layout, colors, fonts, and images to make it reflect your brand.
Q: What is the best way to get the timing of the pop-up to appear right?
A: Think about both your audience and the purpose of your pop-up. Different timing options (time delay, percentage of scroll, etc.) should be tested to see what works best for your results. Avoid pop-ups that are too intrusive, as they can lead to the irritation of visitors.
Q: Can I use third-party pop-up plugins with Squarespace?
A: You can use third-party pop-up plugins or copy and paste embed code provided by external email marketing services, but the built-in feature Squarespace offers is usually enough for most users.
Q: What is the best size for the images in my Squarespace pop-up?
A: Use high-resolution images optimized for the web. While your pop-up will look fine on a computer, make sure to test it on other devices as well. Responsive design is handled by Squarespace, but big files will hamper page load.
Q: Is there any way to turn off the pop-up on mobile?
A: Your pop-up is made mobile responsive by Squarespace. There are ways to customize settings to not have this intrusive mobile experience.
