tutorial

7 Little Known Squarespace Tricks

7 Little Known Squarespace Tricks | Lemon and the Sea

Part of the reason I love using Squarespace so much for website design is that there are quite a few ways to customize your site without having to be a designer or developer. This is especially helpful because almost all of my clients come to me because they have no idea how to design a website on their own, but they want to be able to make basic changes once the website is live.

These are some of my favorite tricks to make designing on Squarespace easier and think outside of the restrictions you might have with the template you’ve chosen.

1. Duplicating a Page

This is one of my favorite tricks (I share it with all my clients), but most people have no idea it’s possible. You can easily duplicate any regular page on your website by opening the page settings, scrolling to the bottom, and clicking Duplicate Page. Then you just need to rename it, place it where it needs to be, and start editing.

I use this feature to create page templates that my clients can then duplicate to make adding new pages or projects easy. This really comes in handy when you have a portfolio with different project pages – you want them to have the same layout, but it can take a long time to recreate a page full of images each time you feature a new project.

You can also duplicate pages if you want to update your design without having the changes go live as soon as you save. Simply duplicate the page you want to work on and move it under Unlinked Pages in the side menu. Then you can change anything you want without worrying about your visitors seeing all sorts of crazy changes.

2. Adding Custom CSS to One Page

If you want to really customize your Squarespace website, custom CSS is a great way to get the look you want without having to be a website developer. (If you want to learn more about Custom CSS, check this post out. )But sometimes you want customizations on one page instead of throughout your website.

To add Custom CSS to one page at a time, simply open the page settings, go to the Advanced tab, and paste your CSS into the Page Header Code Injection area. You will need to make sure your code is read by adding Style tags like this, <style>/* Insert Custom CSS Here */</style>, but otherwise it works the same as the Custom CSS section.

You can also add Javascript, metatags, or other custom code to the Page Header Code Injection area to further customize your Squarespace website. (To see how I use this section to build my SEO, check out this post [http://www.lemonandthesea.com/blog/squarespace-seo-tricks-you-should-be-using].)

3. Creating a Faux Sidebar

While I love Squarespace, there are some limitations based on the template you choose. One of the biggest is that there is very little flexibility in how a blog displays.

For example, I recently had a client who wanted her blog page to be very simple and streamlined with the blog post thumbnail and excerpt laid out in columns. Because of her template, there was no way to create that look using her current template (even with Custom CSS).

Instead, we found a solution by creating a regular page and adding a Summary Block to display her blog posts. The problem with this? There was now no sidebar.

This is where Squarespace’s column design comes in handy – I was able to create a faux sidebar by lining up all the items in her previous sidebar and making them only a few columns wide. Then the Sumamry Block with here posts could look the way she wanted and the page still looked like the blog visitors see when they open a post to read more.

If you want to see how this works, check out Maggie Richard’s new website design featuring a custom designed page for her main blog.

4. Adding Permissions

Have you ever shared your Squarespace user name and password with someone who needs to access your website? You don’t have to!

Squarespace has built in a really great (and easy) system for adding people to your website with different permissions based on what they need access to. Check out my in-depth tutorial on how to set permissions and the different types of users you can have on your Squarespace website.

Just a note – on the Personal plan, you can only add one other person to your account, so if you have multiple people who need to access your website, you will need to upgrade to a Business plan.

5. Using a Cover Page instead of LeadPages

One of the reasons that I’m willing to pay a little more for Squarespace than I might for WordPress is that I can cut out other plugins and services.

LeadPages has become a very popular tool lately because it allows you to easily get people onto your email list (or signed up for your event) with great analytics and a high conversion rate. But if you’re on a budget or just starting out, LeadPages may seem overwhelming.

That’s where I like to use Squarespace Cover Pages. You can create a great looking landing page in just a few minutes that’s hosted on your website and doesn’t cost anything extra. Then you can set it up to connect to your email list, send people to a PayPal link, or anything else you want to do.

For a tutorial on how to create a Cover Page in Squarespace, check out this post[http://www.lemonandthesea.com/blog/creating-a-cover-page-in-squarespace]. It even includes a video tutorial from my Tutorial Library.

6. Changing the Squarespace Block Spacing

One of the biggest complaints I get from clients using Squarespace is that the blocks are all too far apart. While Squarespace does this on purpose to add white space to the design, sometimes it is too much for what you’re trying to accomplish, especially since each block has padding around it that can add up.

The solution for this is simple if you just add a little Custom CSS to your website. Go to Design > Custom CSS and add this code into the CSS block. You can adjust the margin numbers based on your design, but I’ve found that there work well to still allow for space while reducing it enough that your design doesn’t look too spread out.

/*SS Block Size*/

.sqs-block {margin-top: -5px; margin-bottom: -5px;}

There is also Custom CSS you can add to individual block types to adjust the spacing on those further, but that can vary by template.

7. Connecting Social Media Accounts

Did you know that Squarespace makes it really simple to connect to and share on your social media profiles?

Simply go to Settings > Connected Accounts and add any social media accounts you want to display (add them in the order you want them to appear). Then allow Squarespace to connect to your account and changes any settings as needed.

Now, when you add a Social Links block, the icons for those social platforms will display and will automatically link to your profile or page.

Here’s one more tip if you are trying to connect to a Facebook Business page: You will need to sign into Facebook with your regular account and then change the Push Target to the page you want blog posts to post to and update the Profile URL so it links to your business page instead of defaulting to your personal page.

To-Do for You: Check out your own Squarespace website and see if you can take advantage of any of these little known tricks.


Lemon and the Sea is a brand and website design company located in Richmond, VA. I specialize in making the branding process personal. I work with creative women who have a heart to serve others grow their businesses so they can focus on what's most important - family.   I work closely with small businesses to help them dig into what makes them unique, share their vision, and build a business that genuinely represents who they are.


How to Use Index Pages in Squarespace

How to Use Index Pages in Squarespace | Lemon and the Sea: Step-by-step guide to index pages in Squarespace including custom CSS you can use to make your website design unique.

If you've been to Lemon and the Sea before, you may have noticed that I made some changes to my website design. I updated the colors, making the brighter and more vibrant, updated my copy, organized some pages, created new awesome resources in The Vault, and redesigned quite a few of my page layouts.

While some changes are small, the thing that took the longest and has the most impact are the new layouts for the Home, About, and Services pages. In addition to changing the content on these pages, I also redesigned them using Index pages.

Why I Love Index Pages

I love Squarespace's Index pages because they make it so easy to create beautiful layouts with sections that are easy to customize. This is a feature you'll see on a lot of WordPress websites, with full-bleed images and colored backgrounds helping to divide up a page so it's easy to read, but it's not easy to replicate in Squarespace.

But now that Index pages have become more popular and are offered of many different templates, you can get this look without a lot of custom coding on the back-end of your website. (Just a note: Each page of an Index and the Index itself all count towards your pages, so if you're on the Personal plan, you may have to upgrade to have more pages available.)

 

Templates that Use Index Pages

Squarespace offers three types of Index pages. Templates that offer Index pages will have one of the following types, but not multiple types:

  • Grid Style - each page in the Index creates a thumbnail image on the Index page. To open the page, a visitor would click on the thumbnails. This style created a visual navigation grid. See an example.

  • Stacked Style - each page in the Index creates a section on a single scrolling page. Each stacks vertically, giving the look of one page, but with more options for customization. See an example.

  • Slideshow Style - each page in the Index displays as a full-age background image with content on top. Visitors click on the page title to open the connected page. See an example.

Many Squarespace templates offer Index pages, but some do not. If you want to use Index pages as part of your design, make sure you choose a template with the type of Index options you want.

  • Avenue - Grid with required thumbnails

  • Beford, Anya, Bryant, Hayden - Stacked

  • Brine, Basil, Clay, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne - Stacked

  • Flatiron - Grid with required thumbnails

  • Forte- Slideshow with required thumbnails

  • Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift - Stacked

  • Momentum - Slideshow with required thumbnails

  • Montauk, Julia, Kent, Om - Grid with required thumbnails

  • Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi - Stacked

  • Supply - Grid wtih required thumbnails

  • Tremont, Carson, Henson - Slideshow with optional thumbnails

  • York, Artesia, Harris, Lange, Jasper, Shibori, Taylor - Grid with optional thumbnails

If your current template does not offer Index pages, you can create something similar on your own.

  • Grid Style - create a grid on images with clickthrough links on a regular page. This will look very similar to a grid-style Index page, but you will have to create and align each image yourself.

  • Stacked Style - Add images and text to a regular page. This will limit you somewhat because your images will not be full-width and it is more difficult to add different backgrounds to each section.

  • Slideshow Style - Add a Cover Page with multiple images that will rotate. This will give you a similar appearance to a slideshow-style Index page, but will not have a menu bar or footer.

 

Creating an Index Page

To create an Index page, you will need to start by creating an Index. You can do this by creating a new page and selecting Index.

You can adjust the settings of an Index as you would any other page by clicking on the gear icon. Here you can add a banner image, update the Index name and URL, and add custom code.

Once you've created the Index, you will need to add pages to it. You can either add a new page into the Index by Adding a Section or by dragging an existing page under the Index.

 

Adding Pages

Once you have the Index created and some sections added, you will need to design each section. This works just like editing a regular page. In a stacked-style Index, you will see an Edit option for each section as you scroll down the page.

If you want to reorder the pages in your Index, simply drag and drop them in the order they should appear.

If you are using a grid- or slideshow-style Index, make sure you have added the thumbnail you want to display for each section.

 

Styling

Each Idex style and template will allow for different style options, which you can find in the Style Editor (Design > Style Editor).

  • For grid-style Index pages, you can change the number and shape of the thumbnails, adjust the padding, and change how the page title appears.

  • For stacked-style Index pages, you can change the fonts, navigation elements, and how the page content appears. These options will vary by template, so be sure to check out which options are available for the template you are using in Squarespace's tutorial.

  • For slideshow-style Index pages, you can style the page names and how visitors click through to the connected page.

 

Custom CSS

If you want to add a custom background color or image to any section of the Index, you can do so with some custom code. This needs to be placed in the Advanced tab of the Index settings, not in the settings for the section itself.

Start by adding the Style designations to the Advanced tab. This will tell Squarespace that you are adding CSS code.

<style> custom css goes here </style>

Adding a Colored Background

If you want to add a colored background to an Index section, use the following code. You will need to change the "section-url" text to match the URL of the page within the index you are targeting. You can then add the custom color in rgba or hex format.

RGBA: #section-url {background: rgba(173, 222, 224, 0.3);}

Hex: #section-url {background: #59c4c0;}

Adding a background image

You can also add a background image to each index section. To do this you will need to upload the image to Squarespace and then assign it to the section you want it to appear in.

Start by resizing and making any adjustments to the image in a photo editing program such as Canva or Adobe Photoshop (this may take some trial and error, so save any files you've been working on so you can access them later).

Then, upload the image to Squarespace by going to Design > Custom CSS > Manage Custom Files. You can either drag the image into the Custom Files section or upload it by clicking on the arrow. I like to add Custom Files by opening the Custom CSS section in a window because it is easier to read.

Once your image has been added to Squarespace, you will need to find it's unique URL. Do this by going to the top or bottom of the custom CSS that is already on your website and then clicking on the image. You will then see the URL of that image appear in your code. Copy the entire code, then remove it from the code section (so you don't mess up any customizations), and save.

Once you have the image's URL, you can navigate back to the Index settings and add it to the code there using the following:

#section-url { background-image: url(your-image-url);

You will need to replace the "section-url" with the page you are targeting and "your-image-url" with the URL you just copied.

Once you save the Settings, you can refresh the page and your changes will appear.

The best types of images for Index page backgrounds are repeating patterns because you won't have to worry about parts being cut off, but you can use other images as well. I used both in my website redesign, but it did take some trial-and-error to get the image size and cropping correct.

 

And that's how you can use Index pages in your own Squarespace website design. If you're using Index pages, I'd love to see what you've done with them to customize your website.


Lemon and the Sea is a brand and website design company located in Richmond, VA. I specialize in making the branding process personal. I work with creative women who have a heart to serve others grow their businesses so they can focus on what's most important - family.   I work closely with small businesses to help them dig into what makes them unique, share their vision, and build a business that genuinely represents who they are.


Stop Sharing Your Squarespace Password - How to Set Permissions

Stop Sharing Your Squarespace Password - How to Set Permissions | Lemon and the Sea: Step-by-step instructions for giving permissions to contributors, designers, and assistants

In a digital age when sharing passwords is common for running an online business, it can be a little scary to give that information to someone you haven't known every long and may have never met in person.

As a Squarespace website designer, I work with many clients who are already on the Squarespace platform, but are ready to hire a professional to make updates or finish their website design because they are overwhelmed. And almost every time, the client asks me if they should give me their Squarespace user name and password.

Luckily, Squarespace makes it easy to give someone access to edit and update your website without sharing your login information. This also means that it's easy to remove someone from your website if you stop working together without having to change your password.

How to Give Permissions

First, log into your website back-end so you can make changes. You will need to have Administrator permissions to add anyone else to a Squarespace website.

Stop Sharing Your Squarespace Password - How to Set Permissions | Lemon and the Sea: Step-by-step instructions for giving permissions to contributors, designers, and assistants

In the main menu, navigate to Settings.

Stop Sharing Your Squarespace Password - How to Set Permissions | Lemon and the Sea: Step-by-step instructions for giving permissions to contributors, designers, and assistants

Open the Permissions tab and choose Invite Contributor.

Stop Sharing Your Squarespace Password - How to Set Permissions | Lemon and the Sea: Step-by-step instructions for giving permissions to contributors, designers, and assistants

Enter the new contributor's name and email address and assign which type of permission they have. Once you save this information, they will receive an email from Squarespace notifying them that they have been invited. Then, they can either log in to their existing account or create an account.

Stop Sharing Your Squarespace Password - How to Set Permissions | Lemon and the Sea: Step-by-step instructions for giving permissions to contributors, designers, and assistants

Depending on the type of Permissions a user has to your website, they will see different options in the menu limited by what they have access to.

Updating Permissions

If you have given someone access to your website, you can always remove them or change their permissions. To do this, go back to Settings > Permissions and click on the user's profile. A box will pop up allowing you to modify or remove permissions for that person (unless they are the owner of the website).

Working with Multiple Squarespace Websites

If you have been granted permissions on multiple Squarespace websites, you can navigate between them without having to bookmark each site individually. When you log in to one website, click on your profile image at the bottom of the menu and a list of all the websites (live and trial) that you can access. Then, choose the website you want to work on and it will open in a new tab.

Types of Permissions

  • Administrator - this gives the user full permission to access and change everything on the website. When I am designing a website, both I and my client have Administrator permissions.
  • Content Editor - this allows the user to edit website content, but not to change settings. This is useful for allowing a virtual assistant or copywriter access to your content without worrying about them changing the settings.
  • Billing - this lets the user update the credit card information on file for processing payments to Squarespace.
  • Reporting - this gives the user access to the website statistics and reports. This can be useful for a VA or social media manager who wants to see which pages are the most popular and where visitors are coming from.
  • Comment Moderator - this allows the user to edit, approve, and add comments as a contributor and website administrator instead of as a website visitor. A VA who helps to monitor and edit comments can be allowed access to the comments without needing to adjust any settings.
  • Trusted Commenter - this lets the user bypass comment moderation, meaning that their comments are automatically approved. This could be useful if you have a business bestie or tribe who regularly comments and you trust.
  • Store Manager - this allows the user to receive store notifications via email, manage custom orders, and edit website content, including products. If you want to have an assistant help you manage orders, they will need to be given Store Manager or Administrator permissions in order to receive order emails and update products.

How I Use Permissions with my Clients

When I'm working with a website design client, I get access to their website one of two way - either I create the website as a trial version myself (and am the owner of the website) or my client invites me to their already existing website.

Either way, as a designer, I need Administrator permissions so that I can add and design pages, update the website styling, and add any custom coding. I also recommend that my client has Administrator permissions as well so they can get used to the back-end of their website before it goes live.

As an Administrator, I can also give permissions to my team members if they need access to the website without the client needing to worry about it. It also means that I can set up my client's VA, office manager, or blog contributor for them.

If I've created the website, I will transfer ownership to my client once the final invoice has been paid and the project is complete. Then they can choose to leave me with access to their website to continue offering on-going support or remove me if they no longer need my help.

Are you using Squarespace Permissions with your clients or employees?


Lemon and the Sea is a brand and website design company located in Richmond, VA. I specialize in making the branding process personal. I work with creative women who have a heart to serve others grow their businesses so they can focus on what's most important - family.   I work closely with small businesses to help them dig into what makes them unique, share their vision, and build a business that genuinely represents who they are.


How to Integrate ConvertKit and Squarespace

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

If you're one of my VIP's you've probably noticed that I've moved my newsletter from MailChimp to ConvertKit (if you're not, you can join here). I resisted this move for a long time because MailChimp integrates so easily with Squarespace and because the price (at least a small list) is lower.

But lately I've been trying to find ways to automate more of my process and make it easy for me to stay on top of inquiries and messages from readers and MailChimp just wasn't cutting it. I have nothing against them (I used them for over a year), but ConvertKit offers more of the tools that I needed to grow my business.

Setting up Convertkit

Before you can integrate ConvertKit with your Squarespace website, you'll need to set up a ConvertKit account and create a Form that people can subscribe to.

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

Once you've created an account, you'll see your Dashboard. Here you can see how many subscribers you have and how each of your forms are performing. In order to create a new Form, click +Create Form.

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

Then you have the option of creating a Landing Page or a Form. Choose Form here so that you can make it a part of your Sqaurespace website (including any Cover Pages you've already created).

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

Then, choose the type of form you want to use. The options are pretty simple and you can do some customization to fit your branding.

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

Make any changes to the Settings you need, including naming your form in a way that you'll know where you've placed it on your website later.

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

If you want to add a new subscriber to an email sequence (such as a course or Welcome series) when they sign up, you can do that under Automations.

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

To create an Automation Rule, you need to choose the Trigger (subscribing to a form) and the Action (subscribing to a sequence). I use this to add new subscribers to my Welcome sequence and to create an automatic response when someone contacts me using my Contact page form.

Once your ConvertKit form is set up, there are two options for integrating it with Squarespace. You can use either on your main website pages, but only Option 2 will work for Cover Pages.

option 1: Embedding a form on Squarespace

In your Form settings, you'll find an Embed code already created for you. 

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

Copy the Javascript code that ConvertKit supplies.

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

Then on the Squarespace page where you want the form to appear, add a Markdown block.

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

Paste the Javascript code into the Markdown pop-up and save it.

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

The form that you'll see is exactly the one created in ConvertKit and it's already connected with ConvertKit, so when someone fills it out and hits Subscribe, they'll automatically be added to your list.

Option 2: Using Zapier with Squarespace Blocks

The second option for integrating ConvertKit and Squarespace takes more work up front, but will work with the Form and Newsletter blocks and maintains your design style throughout your website. This is also the only option that will work if you are having people subscribe from a Cover Page, as you can't add a Markdown block to those pages.

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

To integrate this way, start by adding a Newsletter or Form block to your Squarespace page. (If you're using a Form block, be sure to delete the Name option that is the default and add a Text question requesting the First Name since ConvertKit doesn't collect last names.)

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

In the Storage tab, you want to connect the block to a Google Drive form. Make sure to name this form something that makes sense to you.

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

Then, go to your Zapier account and Make a Zap. (To get these next steps to work you'll need to submit a test through your Squarespace form.)

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

When you make a new Zap, you'll have the option of choosing from many different apps. If the ones you need for this Zap don't show up, simply search for them in the search bar.

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

Your first step will be to create a Trigger. Do this by selecting Google Sheets from the Apps and choosing Updated Spreadsheet Row. Save and Continue.

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

You'll need to connect your Google Drive account is you haven't already.

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

Then fill in the information Zapier needs. These fields will all populate with the information from your Google account so that you can make sure everything is connected correctly.

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

You can then test your connection to make sure everything is working.

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

Next you'll create an Action by selecting ConvertKit from the Apps. Choose Add Subscriber to Form.

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

Connect your ConvertKit account.

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

Then you'll fill out the information requested. The Form should link to the form you just added to your account and then the other rows should correspond to the information from your Google Sheet. Make sure the the Email address is in the Email spot and the Name (if you collect it) is the the First Name spot. This way, ConvertKit will know what information to add to the subscriber list so that your emails send correctly.

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

Test the connection. (If you tested this with your email address, you should receive the Opt-In Confirmation email from CovertKit.)

How to Integrate ConvertKit and Squarespace | Lemon and the Sea

Once everything is working correctly, name your Zap and turn it on. Now you can start collecting subscriber information directly into your ConvertKit list!

Why I switched from MailChimp to ConvertKit

While connecting MailChimp with Squarespace is certainly easier because it's already built in to Squarespace's functions, sometimes MailChimp doesn't make the most sense for your business. Using a tool like Zapier makes it easier to connect your preferred newsletter service to your Squarespace website without losing the design consistency that you've worked hard for.

Once I knew how I could integrate ConvertKit with my Squarespace website, I decided that it really did make sense to switch. I now have more control over who I send emails to using tags and tracking, and I'm only charged for subscribers once (even if they're on multiple lists). While this wasn't a change I needed to make right now, it made sense to start preparing for my business to grow - because that's what we're all working towards.

It did take some time to convert all of my existing subscribe locations over to this new connection, but in the end I think the change was worth the effort.

And if you're interested in becoming a VIP (and seeing how this works as a subscriber) you can sign up for my newsletter.


Lemon and the Sea is a brand and website design company located in Richmond, VA. I specialize in making the branding process personal. I work with creative women who have a heart to serve others grow their businesses so they can focus on what's most important - family.   I work closely with small businesses to help them dig into what makes them unique, share their vision, and build a business that genuinely represents who they are.


How to Create Multiple Opt-Ins in Squarespace

How to Create Multiple Opt-Ins in Squarespace | Lemon and the Sea: Using Squarespace blocks and forms, it's easy to set up multiple opt-in offers so you know exactly what your audience is interested in.

If you've been running an online business, you've probably heard about the importance of creating an opt-in offer. An opt-in (or content upgrade) is something that you're going to give to your audience in exchange for an email address. This gets them onto your email list, which then allows you to communicate more directly with them.

Types of Opt-Ins

There is almost an endless list of opt-in offers you can create, but you should choose one that will resonate with your audience and fit your business. It doesn't make sense for me as a brand and website designer to offer a dance tutorial to my audience - it has nothing to do with my work and my audience won't get to see how I can help them (and I'm not very good at dancing).

Some of the opt-in types you can create include:

  • Worksheets
  • Tutorial Videos
  • Webinars
  • Tutorials
  • E-books
  • Email courses
  • A resource library (like mine)
  • Printable posters
  • Challenges
  • Resource Lists
  • Audio
  • Swipe files
  • Checklists
  • Toolkits

The goal of any opt-in is to add value to the content that you're already offering your audience through your blog and other content platforms. You also want to make sure that your opt-in is some of your best information, not just something you put together because you thought you had to. The better the content in your opt-in, the more likely people are to work with you because they get to see your expertise.

Having Multiple Opt-Ins

Depending on your audience and business, it may make sense to have more than one opt-in. This offers some variety to your audience so that they can choose which one is most relevant to them. For example, I have a client who is a dance instructor. Instead of creating one opt-in, she's decided to create three different videos of sample classes so that her audience can choose which type of class they are most interested in (ballet, Pilates, or yoga). By offering all three, she can then track which class is the most popular and customize her newsletters and offerings to the specific type of dance the person showed an interest in.

Setting Up an Opt-In: EMail Lists

To set up an opt-in, you first need an email list. The easiest way to do this in Squarespace is through MailChimp, because it's already integrated. You want to create a list for each type of opt-in in order to track who signs up for which.

In MailChimp, start by creating a new list.

Make sure to name the list so that you'll know which opt-in it is related to. Then fill out the remainder of the list information as you normally would.

Next, you're going to want to customize your welcome and confirmation emails by updating the Signup Forms for the new list.

Give your automatic emails so personality and make sure that they match your brand.

To give easy access to your opt-in offer, you can include a link in your final Welcome Email with any passwords they need to know.

SETTING UP AN OPT-IN: Squarespace

Once your lists are created, you'll need to set up the actual signup in Squarespace. To do this, I like to create a new page that can be added to your menu. This is an easy way to keep the page free of clutter and you can link to it throughout your website.

Start your page with a brief explanation of the offerings and encourage people to signup.

From there, add an image for each opt-in offer that relates to that content upgrade (make sure these still fit your overall brand).

Under each image, include the title of your opt-in and a detailed explanation of what they will receive (video tutorials, emails, etc.). Then you need to add a Squarespace Form block in order to collect the emails and send the actual content upgrade.

Make sure to name your Form after your opt-in so that it's easier to track and troubleshoot. Then update which information you need to collect - this is usually just a name and email address.

Under the Storage tab, make sure to connect your MailChimp account and choose the relevant list.

Finally, under the Advanced tab, make sure to update your wording and enable Lightbox Mode so that only the button will appear. Lightbox basically means that when someone clicks on the button, a box will pop-up over the page to gather their information. I like using the Form block with Lightbox enabled instead of the Newsletter block because it's cleaner and encourages more signups.

Now you have a page that give three different opt-in offers. In this example, I would be able to see which offer is most popular and this could guide the next products or services I offer.


Lemon and the Sea is a brand and website design company located in Richmond, VA. I specialize in making the branding process personal. I work with creative women who have a heart to serve others grow their businesses so they can focus on what's most important - family.   I work closely with small businesses to help them dig into what makes them unique, share their vision, and build a business that genuinely represents who they are.