Episode 69 - Restricting Access in Your Shopify Store

The Podcast

---

Show Links

• Apply for Shopify Store Consult - https://jadepuma.com/pages/podcast-consult-application
• Restricting Access to the Whole Store - https://jadepuma.com/blogs/shopify-tutorials/restricting-access-in-your-shopify-store#store
• Restricting Access to a Page - https://jadepuma.com/blogs/shopify-tutorials/restricting-access-in-your-shopify-store#page
• Restricting Access to a Piece of Content on a Page - https://jadepuma.com/blogs/shopify-tutorials/restricting-access-in-your-shopify-store#content

---

Help the Podcast

• Apply for Shopify Store Consult - https://jadepuma.com/pages/podcast-consult-application
• Try our Linear Shopping Experiences app - https://apps.shopify.com/linear-shopping-experience 

---

Transcript

Hey Scott Austin here.

In this episode, I am going to explain how you can grant or restrict access, depending on how you look at it, in your Shopify store.  Now there are apps that you can use for this.  But my solutions will all be done with Liquid code edits that you can make to your theme.  There's nothing wrong with using apps in your Shopify store.  But I like to add functionality through theme code edits when I can.  That way, I have complete control over the experience and the store has one less app they have to pay for.  And the thing about these theme edits is that they are not that complex.  If fact, they are surprisingly easy to make given how powerful they are.

In the show notes, I'll include links to videos that walk you through the whole process step by step.  And there will also be examples of the liquid code that you can use as a starting point for your theme.  The code may need to be adjusted for your theme or your business rules.  But I'll be providing enough sample code that any needed changes should be fairly obvious.

Let's start off with some business scenarios where you would want to grant access to a certain group of people and restrict others from accessing the content:

1. Wholesale.  With wholesale there are couple of scenarios:
1. The store is wholesale only.  In this situation, we could require that the customer needs to login before accessing any part of the store.
2. The store has a mix of wholesale customers and consumers.  In this situation, we may want to control wholesale products and collections so that they can only be accessed by wholesale customers.
2. Subscription.  If you have a subscription, you can prevent customers who are not subscribers from accessing the subscription content.  That content could be blog articles, products or anything else in your store.
3. VIP.  An example with VIPs could be that you give your VIP customers early access to purchase a newly launched product.  The VIP customer would login and then be able to purchase the product.
4. Store Staff.  I frequently make tools for store staff and make them available through the website.  A common tool that I make is a page where the store staff can see all of the product photos and the photos dimensions.  That way they can check to see if all of the product photos are meeting their quality bar.  Another frequent tool I make for store staff is a list of links to tools and commonly used resources.  I add that link list to the account page and make it available to only the store staff.

These scenarios result in the need to restrict access at these three levels:

1. Site-wide.  A user must login with an authorized account to see any content on the site.
2. Page level.  In this case the web page can be any type of Shopify content like article, blog, product, collection or page.  And the access can be provided to more than one of these types.  So you could have subscription content stored in blogs and articles and that same subscription could give you access to subscriber only products and collections.
3. A piece of content on a web page.  This access can happen on any Shopify content type of article, blog, product, collection or page.  The linklist for store staff resources that I mentioned before is one example.  You could also provide specific messages to wholesale customers, subscribers, VIPs or other customer segments as your business needs.  For example, you could add a link to a wholesale collection to the main nav that only appears when someone is logged in with a wholesale account.  Or you could make the Add to Cart button only available to VIPs on a newly launched product.

The foundation of this solution is customer tags.  Tags can easily be added to customer accounts by store staff.  And there are apps that can automate the adding of tags to customers based on rules.  The Shopify Flow app for Shopify Plus stores does this.  And there are paid apps in the App store from third party developers that can provide this functionality to non-Plus stores.

Now because we are using customer tags to identify which customers to allow access to and which ones to restrict access to, customers will need to be logged in for things to work.  A Shopify store does not have access to a customer's tags until they log in.  So the provided solutions will also include code to get the customer to log into the store at the right times. 

So now I'm going to walk through what the customer experience is like and the code logic behind the three different access scenarios.

1. Site-Wide

The site-wide scenario is easy to implement.  We only need to edit one theme file and add just ten lines of code.  The code goes on the theme.liquid file which is the foundational file used to build every web page on the store.  And the logic is to basically see if the customer is logged in.  If they are NOT logged in, they are sent to the login page and returned back to the page they came from once they do log in.

The scenario that I usually implement this for is a wholesale-only store.  In that case, the store staff is usually granting access to the whole store by creating a customer account for the wholesale customer and sending them an account invite.  In that case, you'll want to edit the login page to remove any link to create an account without going through the store staff.

Another scenario is that wholesale access is done through the customer tag.  In this case the code will need to be edited a bit to check that the customer is logged in and they have the correct wholesale tag.

In either scenario, you are going to want to edit your login page with copy that very clear explains the rules and process.

2. Pages

The page level access scenario will require a little more code editing and set-up work.  What we'll do is create a second template for each content type that we want to control access on.  So let's say we are implementing access control for a subscription service that gets access to content stored in blog articles and pages.  We'll want to create new templates for articles and page.  We could call them article.subscription.liquid and page.subscription.liquid.  We'll then apply code to theme.liquid.  This code won't check to see if the customer logged on every page like we did for site-wide access.  Instead it will only check that the customer is logged in when they are trying to access a page with 'subscription' in the template name.  And of course, subscription is just my example here.  You can use any term for your store.  If the page is a subscription page and the customer is not logged in, they will be redirected to the login page and returned back once they login.

So now the customer is logged in and on the page that requires the appropriate customer tag to access.  This page has the subscription template assigned to it.  We'll edit the subscription template for two scenarios.  We check their customer tags to see if they include the required subscription tag.  If they have the tag, then they get access to the page and all of its content.  If they don't have the tag, then they'll get a message that access is restricted.

So in this scenario, we'll want to provide the customer with clear messaging in two places.  The first place, like with site access, is on the login page.  And the second place is on the subscription locked page if the customer does not have the required tag.

3. Content on a Web Page

This is the easiest code to implement.  All we do is wrap the restricted content in a liquid if statement.  It would look something like this 'if customer and customer.tags contains "Store Staff"'.  So the if statement is checking two things.  One that the customer is logged in.  And two that the customer has the required tag.

If the customer is not logged in or if they do not have the required tag, then they just don't see the content.  The rest of the page renders just fine.  So there's no need to add instructions or explanations.

So that's it.  There are a few things to note about all of these scenarios.

1. You'll need to decide how to use these controls as you can implement them in different ways.  For example, let's say you are allowing VIPs to purchase products not available to non-VIP customers.  You could add a VIP link in the main nav that links to a collection of VIP-only products.  Here's two different ways you could implement that:
1. In the first implementation, you want the non-VIP customers to know what they would get access to if they were VIPs.  So you would let all customers see the VIP link in the main nav, and see the VIP collection and maybe even see the VIP products.  The only restriction for the non-VIPs could be they don't have an 'Add to Cart' button on the VIP product page.  Instead, they could see instructions for how to become a VIP.
2. In the second implementation, you do not want the non-VIP customers to know what they are missing out on.  In this case, the VIP link would only show on the main nav to logged in customers that have the VIP tag.  And the VIP collection and product pages would be locked down too.
2. If you are restricting access to your store's content by requiring a user to login, then you are also restricting access to Google.  The content behind the login will not get indexed in Google and will not show up in search.
3. This functionality is being implemented by editing the store's theme.  So if the theme gets changed out, the theme edits would need to be applied to the new theme.
4. In some situations, highly motivated and knowledgeable customers can get around these restrictions.  For example, if you have subscriber only products, we have not prevented any customer from checking out with them.  We've only prevented them from adding the products to the cart through the store's interface.  The could still add them through a URL if they know the URL syntax and the variant ID.  In my experience, people do not get around these safeguards, but it is technically possible.

I keep saying that this is easy code to implement and is for anyone that has edited their theme code before.  With these concepts and code examples, you'll be able to restrict access exactly as needed for your use case.  There is a link in the show notes for each scenario that goes to a more detailed video as I walk you through the customer experience and all of the theme edits needed.  And example code is provided.  It may need to be adjusted a bit for different themes.  But most of the code will work in any theme.

So that's it for restricting and providing access.  If your business can benefit from this functionality, these instructions will help you implement it.

Thanks for listening.