Help Center

Help Center

Search our help center for quick answers.

Creating a membership website using Storefront

3 minute read

Storefront makes it easy to create and manage your own membership website. In fact, once you create a Storefront Space in Plasso you’ll have a complete membership website ready to go just by visiting the Space’s Plasso URL. Your customers can sign up there, manage their account, buy your products etc. It’s super easy and needs no setup.

However, in this article, we’ll show you how to create a membership experience using Storefront on your own website.

  1. First you’ll want to create a Storefront Space in Plasso.
  2. Next, you’ll want to add some Plans to that Space. Your customers can sign up for a plan(s) and will become a member of your Space as a result.
  3. Then you’ll need to embed the Storefront Cart into your website. If you’re using a CMS or site builder, we have specific instructions on how to do that here.

Great!✨ Now you’re website has the Storefront Cart on it and customers can sign up for your plans using the Cart.
You’ll now want to create a Members Only page on your website. This would be the page you want your members to have access to IF they create an account with you. Let’s call it the ‘Member Dashboard’. You’ll create this page using your website builder or CMS, or by building it yourself.

  1. After you create this Member Dashboard, you’ll want to put its URL into the Forward URL field in the Space setup form. This tells Storefront where to send members after they ‘Sign Up’ or ‘Log In’.
  2. Next, you’ll want to tell Storefront where to send members when they ‘Log Out’ of your website by using the Logout URL field on the Space setup form.

You’re done! 🚀 You’ve just built a complete membership experience on your own website using Storefront! 👏


Protect the Member Dashboard

If you’d like to prevent access to the Member Dashboard you created above, there are two ways to do that.

Server-side protection

This is the only true protection. Protecting a page server-side means no visitor will ever have access to the page unless they are logged in.
We’ve built several Backend Clients that automatically handle this for you. Just drop em into your code-base and you’re done!
This method only works if you have access to the server (or backend) code. This method will not work with most website builders, like Squarespace, Webflow, etc. because they do not allow access to their backend.

Javascript protection

This method works everywhere. However, it is only partial protection. Protecting a page with javascript means visitors will be kicked-off the page if they are not logged in. Visitors may see your page for a split second before being kicked off.
A way around this is to hide all content from the page unless a visitor IS logged in, then they will see nothing. Just be aware that javascript protection is not full protection, whereas server-side protection is.
To protect a page, you can hook into Storefront’s javascript event system to determine if a visitor is logged in or not. Then, in the case the visitor is logged in, display your content.
Here’s how you can protect your pages using the Javascript method:

<script>
  Plasso.Cart.setup({ 
    spaceId: "abc123",
    eventListener: function(message) {
      if (message.title === 'Plasso.memberDataSuccess') {
        alert('Member is logged in.');
        // write code to show content here
      }
      if (message.title === 'Plasso.memberDataError') {
        alert('Member is NOT logged in.');
        // kick visitor off the page
        window.location = 'http://yoursite.com/your-public-homepage';
      }
    }
  });
</script>

Just be sure to only put the above code on the pages you want to protect. If you were to put the code above on your public homepage (that everyone is supposed to have access to), it would kick the visitor off the page and send them to your homepage… which has this code, so it would run and kick them to the homepage… which has this code, so it would run and kick them to the homepage… and never stop doing that. That’s called an “infinite loop” and it will crash the page. So avoid that. 🤓


Separate Log In destination

If you’d like your member’s to end up on a different page when they ‘Log In’ than when they ‘Sign Up’, you can use the loginUrl option in the Storefront Cart to set the custom Log In URL. You’ll need to add this option to your Cart setup script, like:

<script>
  Plasso.Cart.setup({ 
    spaceId: "abc123",
    loginUrl: "https://mysite.com/member-login-page"
  });
</script>

If you’d like your members to not be forwarded anywhere when they Log In, set the value of loginUrl to false, like:

<script>
  Plasso.Cart.setup({ 
    spaceId: "abc123",
    loginUrl: false
  });
</script>

Was this article helpful?

2 found this helpful.

Can't find your answer?

We want to answer all of your questions. Get in touch and we’ll get back to you as soon as we can. Email us.

Policy questions?

Take a look at our Terms of Service and review our Privacy Policy.