Complete Guide To Adding a Pop-Up to Your Squarespace Site
Adding a popup to your website can be a powerful strategy to automatically showcase enticing offers to your visitors. Fortunately, Squarespace offers a user-friendly built-in feature for creating compelling pop-ups. These versatile pop-ups can serve various purposes, such as:
Encourage visitors to subscribe and download freebies or join your email list.
Highlight new products, posts, events, or services to capture immediate attention.
Share crucial announcements effectively through a popup.
Whether it's a special offer, a product launch, or any information you want to emphasize, pop-ups are an excellent tool.
While pop-ups can sometimes be perceived as intrusive, when crafted thoughtfully, they can enhance user experience and effectively promote your offerings. Squarespace's built-in pop-up feature makes the creation and design process straightforward. Let's explore the step-by-step guide to help you craft a compelling pop-up that will impress your website visitors.
For those on the personal plan who prefer not to upgrade, there's still a possibility to integrate a pop-up on your Squarespace site by leveraging custom code or an Embed Code supplied by your email marketing provider. However, it's important to note that the feasibility of this option varies and is contingent on the compatibility with your specific email marketing provider.
If you're intrigued by this alternative, I suggest reaching out to your Email Marketing provider's support team. Inquire about whether they offer a pop-up Embed option that seamlessly integrates with Squarespace. Exploring this avenue can provide a tailored solution that aligns with your preferences and constraints within the personal plan.
Adding a Pop-Up Feature to Your Squarespace Site
Go to the editing interface of your Squarespace website.
Click the Marketing section by selecting it from the sidebar.
Once in the Marketing menu, locate and choose the option labeled "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
For Mailchimp and Squarespace Campaigns users, the connection process is straightforward. Simply select your preferred platform, follow the prompts, and connect the form seamlessly.
The Google Drive connection is useful if you prefer saving email addresses in a simple spreadsheet. However, if your intention is to utilize these addresses for email marketing in the long term, this might not be the most suitable option.
For users of alternative email marketing platforms like Flodesk, Convertkit, Mailerlite, Active Campaign, etc., the only method to link your form to your platform is by storing the collected information in Google Drive and then using Zapier to establish the connection. Zapier serves as an intermediary service, facilitating connections between platforms that may not naturally integrate. This versatile service proves valuable for tasks like linking the Newsletter Block to various 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
The next step leads you to the Content section, where you'll define the headline and body text for your pop-up display.
When formulating a pop-up headline and text, prioritize brevity and clarity. Clearly convey what visitors will receive or where they'll be directed. A concise and attention-grabbing message is key; otherwise, visitors might opt to close it.
Now, if you wish to include an image in your pop-up, simply navigate to the Image section and click "Upload Image." It's a straightforward process.
Upon upload, Squarespace automatically adjusts and positions your image within the chosen layout. If you find the positioning or cropping unsatisfactory, start by adjusting the focal point, represented by the dot in the middle of the image. Click and drag this dot to alter the focus.
If adjustments are still needed, the upcoming section on Style Settings will provide further options to ensure your image is perfectly framed for maximum impact.
Customize the Pop-Up Style
Welcome to the Style section, your hub for refining the visual elements of your pop-up. Here, you have the flexibility to tweak style settings such as colors, fonts, and even spacing, which influences the image crop.
Click the Style list systematically, updating each design setting to align with your vision. Feel free to experiment with these settings; there's no need for concern about making permanent changes. This is your creative space to explore and refine the aesthetics of your pop-up. Let your creativity flow!
Advanced Styling for Overlay Layouts
For those seeking to fine-tune aspects like padding, width, and height, the Overlay Advanced Layout Styles come into play, conveniently positioned near the bottom of the Styles list.
Begin by switching from "Disabled" to "Enabled" to unlock a range of advanced layout styles. This opens up opportunities to modify text alignment, overall width, and padding for the pop-up.
This feature proves particularly useful when aiming for unique image cropping. As you experiment with these settings, you'll notice shifts in how your image is framed. I recommend delving into these options and tweaking them until you achieve a design that resonates with your vision. The more you play around, the more your image cropping will evolve, providing ample room for creative exploration.
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 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!