One lock to rule them all (members-only content + sections on any page)

Recently a client came to us because they were using a popular Page-lock app, but they had locks for 99+ pages and were told they were running up against Shopify limits for the app.

Additionally they wanted to be able to better manage their members-only pages, with different pages visible to different sets of members, ideally without an app. This is the solution we came up with.

In this guide we’ll show you how to create customizable gated content (a paywall) so that some content is only accessible to certain customers, without using a custom template. 

Note that we have other members-only guides that show you how to create specific gated blogs or pages. This solution applies more generally to all pages on your site, and makes use of metafields to determine if a page/blog/article/product/collection is protected or not.

Overview

This solution works by wrapping the content_for_layout liquid object in an if/else statement, and excluding it if the given resource (page/article/blog/product) is members-only and the customer is not a member, instead rendering a dedicated "gate" or paywall section:

There are a few caveats here:

1. content_for_layout is a special (required) liquid object in theme.liquid. It can not be removed entirely, but wrapping it in an if statement works, currently.  No guarantees that it will continue to do so.
2. This solution causes some confusing behaviour in the theme editor, because member-visible sections can be edited but not seen unless you login as a member inside the theme editor. We include a note in the gate section that shows only in the editor reminding admins to login to edit the member-visible sections.
3. We use the deprecated "include" tag in our code below. We do this because render will not work in this context, and we're trying to keep theme.liquid maintainable. If you prefer, you can not use include and just add the code directly.
4. Theme upgrades will overwrite the theme.liquid modification, so step 2 needs to be reimplemented when upgrading your theme.

1. Create Files

1.1. sections/members-only-screen.liquid

In the code editor, create a new section sections/members-only-screen.liquid and copy/paste the contents of this file in there

This is the section that will be shown to logged out members and non-members. We've created an customizable members-only section that works out of the box in Dawn and most other themes.

1.2. snippets/members-only-logic.liquid

Create a new snippet snippets/members-only-logic.liquid and copy paste the contents of this file in there.

This is the logic that will be included in your theme.liquid file.

2. Update theme.liquid file

In your code editor, open theme.liquid file, find:

{{ content_for_layout }}

and replace it with the following code:

{% include 'members-only-logic' %}
{% if members_only and is_member != true %}
  {% section 'members-only-screen' %}
{% else %}
  {{ content_for_layout }}
{% endif %}

This code defaults to letting through any customer with a tag that contains the word "member". You can change the tag by changing the code on line 27.

3. Setup Metafield Definitions

Next we setup the Metafield definitions that control access.

In your Shopify admin, go to Settings > Custom data. Under "Metafields", click into one of the resources that you want to protect:

• Blogs
• Articles
• Pages
• Products
• Collections

We'll do Pages first, so go to Pages, and then click on Add definition button.

Create 2 metafield definitions with the following properties:

Name: Members Only
Namespace and key: custom.members_only
Description*: Check "true" if this page is for members only. Members are tagged "member".
Type: True or false

Name: Members Only Tags
Namespace and key: custom.members_only_tags
Description: Overwrite the default "member" tag for access to members only pages. Case insensitive.
Type: Single Line Text / List of Values

Repeat this for every type of resource that you want to protect. E.g. if you want to have members only pages, collections & products, you need to create 2 metafield definitions for each pages/products/collections.

4. Add Metafields to members-only content

Now you just need to set which pages are members only.  Open up a page in Shopify admin, scroll to the bottom and click to see your metafields:

Set Members Only to "true" to make the page only visible to logged in customers tagged with "member". 

If you want to make this page only visible to customers with a different tag, then use the Members Only Tags metafield. Below, you can see this page will only visible to customers with the "Active" tag or the "VIP" tag:

And you're done!

Need Help?

This article and code snippets are designed for you to be able to do this yourself, but if you don't feel comfortable or want us to install the code for you, you can purchase our installation service. install for me