Sometimes you want to create a password protected page that contains products for a select group of customers that match your criteria.
Today we're going to learn:
How to create a private collection for tagged customers.
To begin, we’ll need to set up three pieces.
- Create a collection that we want to be password protected.
- Set up a page that's going to act as the barrier between users and products. If users do not have access, they will land on a page with information on how to get access. If the users have access, they’ll be directed to the products.
- Create a little bit of JavaScript to redirect users if they’ve landed on the page but don’t necessarily belong there. We want to make sure that customers continue with their user experience, and never end up at a dead end.
Let’s begin by creating a new collection that will be private.
For the sake of this example, we'll set up an automatic collection that pulls product titles that contain "Chanel."
Next, we’ll create a collection-template that contains the code that's going to check to see if the customer is tagged and allowed view the collection.
In the Shopify menu, select Online store > Themes > Actions > Edit Code
Now navigate to the Template sections and select “Add a new template”. We’re going to create a new template for collection called private-collection. This new collection template allows us to render special code/behavior when we assign it to an existing collection, like the private collection we set up earlier.
Now we’ll have to write a little code for our private collection.
{% if customer.tags contains ‘vip’ %}
{% section ‘collection’ %}
{% else %}
{{ pages.no-access.content }}
{% endif %}
This code is checking to see if a customer is logged in and tagged VIP. If they are, the collection is displayed. If not, it will show the no access page we’re about to create.
Now we’ll open our collection and change the template the private-collection template we just created.
On the Shopify navigation, select Online Store > Pages > Add Page.
We’ll title the page “no-access” and add the following description: "Please join our VIP member list to view it."
It’s time to test our work. While logged out of the website or logged in as a customer (not tagged as VIP) and trying to access the private collection, you should be presented with the no-access page we created.
Try logging in as a customer (tagged VIP) and viewing the private collection. You should see all the products in the private collection.
