091: How to Set Up Login Page for Squarespace Member Areas

You may have heard about a new feature that Squarespace recently rolled out called Member areas. You may have seen it show up in your Pages panel. And I am so excited that Squarespace released it because all this time I have been teaching the students of my online course, Host Your Course, how to use Squarespace for hosting their online programs or memberships. And now Squarespace has just made the whole thing streamlined, more professional, simplified and just simply beautiful.

Now there’s a lot to cover about Member Areas but for today, I want to address only one thing and that is how do enable a login feature so that your students can sign into your program.

What you need to know is that before you can set that up, you need to have these five things in place.

1. You need to enable Member areas
2. You need to purchase a plan - meaning subscribe to Member Areas.
3. You need to connect your payment processor - Stripe/Paypal or both
4. You need to create your member area  - meaning name your member area and set up your member fee - what your students or members will pay.
5. Then build out the content for at least the first page of your member areas such as a welcome page.

And I say at least the first page because you don’t need to have all the content created in order to enable students to enroll. This is especially helpful if you are dripping content week after week. If you want to give access to content to your students week by week, then they can already purchase and start going through your welcome page content and you can then make the content available as it becomes ready.

But now let’s take the next step which is setting up a way for your students to log in to your program from your website.

Alright, so let’s jump in.

Create a Login Page For Your Squarespace Member Areas

Click the image below to watch video:

Activate the Login Link in Top Navigation
The first thing I want to show you is how to activate the login link on the top navigation of your  website. So head over to the back end of your website. And click into Edit Site Header. And then jump into Elements. You will see four option now and you wanna go to Account and activate it like so. Notice how the Login link instantly appears in the right corner of the top navigation. I am going to click save. And look at my site as a site visitor will see it using incognito. And I can see the login link is activated.

When I click on it a box opens up. And there are two things that a student can do here. 1. they can add in their email and password to login. and 2. They can create their account which will be important to do for new students.

Better Clarity For Enrolling New Students
When I am enrolling new students in my program, this box is not very clear and helpful as to what you need to do as a new student. So I want to make it super clear for my students. And so what I am going to instead is to create a special login page where I can have better instructions to my students. I will show you that in just a second. But I am glad I activated the login link because I can now copy the url of this box and use it on my special login page. This will be used by returning students specifically.

Creating a Special Login Page
So now I am creating a special login page. I’st essentially millionairewebdesigner.com/login. First, I will add a button that says Student login or rather Returning Student login. And place paste the URL that I just copied from the login link. It says millionairewebdesigner.com/account/login. 

So any student that is returning meaning they have already created a new account, can access the member areas by clicking here.

And then what I will do is create a way for new students to enroll. So I am going to choose a content block here that lets me add the Member Areas Sign up. This is similar to a product block if you have used that before. I will choose the Member Area (MWD - Program), and uncheck everything but the Show Join Button. I will call it “Create New Account”.

Now you can see there are two buttons but they are two different content blocks, one is a button and the other is a Member Areas Sign up content block. I can now direct my new students to go to this page so that they can create a new account, purchase and enroll into my program.

When somebody clicks the “create new account”, they can add their name, email and password and be directed to purchase and enroll into the program.

The “returning student button” allows students to login (those who have already created their accounts).

Disabling the Login Link in the Top Navigation
Now I personally don’t want the login button to show up on the top right navigation of my website. And that’s why I created a separate login page for all my students and it’s linked in the lower right corner of my footer. So I’ll just go in and disable the login link so it doesn’t show up in the top nav.

That’s really it. I like how the login page looks. It has two distinct buttons presented with crystal clear clarity so both my new and returning students know exactly how they can get into the program.

How are you using Member Areas?
I’d love to know in the comments how you are using Member Areas in your business. And if you are not, what kind of decisions you still need to make in order to make it happen. Chime in the comments and let me know!

Peace,

Sophia