This article explains how to restrict/grant access to content in a Shopify Store. There are three different methods explained here. Pick the situation that is right for your store.
- Restricting Access to the Whole Store
- Restricting Access to a Page
- Restricting Access to a Piece of Content on a Page
Restricting Access to the Whole Store
Liquid Code for theme.liquid
Video Transcript
Hey, Scott Austin near from JadePuma. In this video, I'm going to show you how to make an entire Shopify store require a login. This is actually a really easy thing to do with just liquid code. You don't need an app or anything. Oh, there are apps that do this, but if you're comfortable just copying and pasting 10 lines of code, you can do this in your store without an app. So let me show you what, how this behaves, right? So here you see I'm on a website, it's actually a wholesale website I'm working on for a client. And if I click on any link, you'll see that I keep getting the wholesale portal login page, which is under the URL of account for slash log-in, right? This is a standard page in every Shopify store. But regardless of what page I click on, it still takes me back to this, this wholesale log-in page.And that's because I'm not logged in and I can see that here. Cause my log-in icon, it says log in. And so, you know, account. So if I log in using a username, new password, that's valid in Shopify. Now all of a sudden I'm in the store and I can click on any of the pages and browse the store normally. And you can see now my, my little login icon says account, which means I'm logged in. So let's just go in and log out again and show you how this works, right? So in, in the code, I'm gonna go to the Shopify admin for this store. I'm going to go under online store and under themes, then actions then edit code. And I'm going to open up the theme dot liquid file, which is store right up here in layout, under theme dot liquid. And it's already open.
And the code that makes this happen, it's just these 10 lines of code. So what explain the logic of what this code is doing. And I'll include a little snippet of this code on the page that on my blog, on my website, where you can copy and paste the code, you might have to change it a little bit for your situation. But this will get you started and down the right path. So what we're doing here is we're basically in this logic here, we're asking ourselves, do we want to redirect the customer to the log-in page? So you see the first thing is in the less statement in, in less customer and think of customer as logged in, right? If you ask in, in liquid, if customer, it actually looks are, is this user on the website logged in or not?
So basically we're saying if, you know, unless customer means if not logged in, so if they're not logged in, then continue looking, right? So if they're already logged in this next set of logic, it's ignored. And then what we look at is if template contains customers, and this is, you know, if you haven't played with liquid code a little bit, this is one of the more you know, things you have to learn, right? It's one of those learnings you do. Cause normally the template is, you know, usually in the file name of let's just look at a template here. Here's the article template, for example, right? And just this article dot liquid, the deceiving thing is, or the little trick you have to learn is there's a sub folder in templates. And that's what these are customers co account customers, activate account customers, addresses and login and order.
So there's a whole bunch of customer type pages that are in a sub folder called customers. So this login page, even though up here, it just says account login. The template name actually contains the phrase customers because that log-in right here, this login dot liquid is in the sub folder customers. So basically what we're seeing here is if they're already on one of these customer pages, like the login page, then you know, we're not going to redirect them because if they're already on this login page, we don't want to redirect them to the login page would ended up being an infinite loop.
And then what we say is, you know, if, so, if it's false, if, if they're not on one of these customer pages and they're not logged in as a customer, then we're going to set a variable, send a longing equals. True. Alright. So send a log in going through this loop. You they're going to be false. Orange is going to be true. And don't forget if they're already logged in, send a log in. We're not setting it anywhere. So it will be false by default. And then once we go through that little logic there, then we have a simple if advanced statement, if send the log-in right. So this is basically saying if we've already set this to true up here. And so there's two, if statement, right? If Sen send the login, which basically is if we've already sent it, the true and request path is not challenged.
So that's when you know that they're authenticating and stuff like that. And that's, I think that's the the forget your password page. So if they're not logged in, as we're figuring out here, they're not on a customer page and they're not on the challenge page, then what we're going to do is run a, redirect them to a new page. And that's what, this is HTML, this isn't liquid, this line here, this is HTML and it's just a meadow. And it says content, right? Send them to this URL, which is account log-in. And every store has a fourth lesson account for its last login page in Shopify. And it also says, then go refresh the page. So all this other concept below actually is, is not used because the first thing it shows up, but then, you know, the site listens to this first command, which is redirected into the account login page.
And that's what you see happening here is as I've not logged in right now, I click on any one of these and I, and if you look up here and that URL string, you'll see, it goes to that page for a second, right? If I click on your rig, I saw it said collection something there a second ago, and then it got redirected. So it quickly loads the page. And the first command that sees is redirect to the log-in page, right? So that that's what's happening there. And so that's, that's the code it's as simple as this, to add, you know, these 10 lines to your theme, liquid run underneath the head. Cause it was the first thing that happens on every page on your site. When it loads up, it goes through those different rules, determines if we're going to redirect it to the login page or not, and then performs that action.
Now, something to think about is in your login page, and this will depend on the business rules for your store. For example, this store here is a wholesale store and it's a whole, it's a wholesale store it's standalone from the retail store. So we've made the entire site require login. And if they want to apply for a wholesale account, they've got to do that on a form that we put on the retail store. So looking for a pick Jessie retail store, click here for our consumers, you know, click here for our consumer store. And we also have a link up here that says, if you want to apply for a wholesale account, apply here. If I click on that, it takes me over to the retail store and then the appli application form shows up for them.
So, and what we did, you know, most people don't edit their account login page, right? So what you're probably going to want to do is edit your account login page to put some extra verbiage around what's going on, like, Hey, you know, welcome to our wholesale portal. You must, you know, log in with your wholesale account and any other directions. What I also did on this one is because the application is not just create an account in Shopify through the Shopify account creation process, which you have to apply and the store staff evaluate your application and then approves it and what they do once it's approved, they manually add that customer information into the Shopify store and send an account invite out. So you'll notice on this account page, there's no signup link. And there was in this account, you know, most account pages by default, have a, don't have an account click here to sign up.
So based on your business rules, you may want to, you know, comment that out and not allow them to create their own accounts if you want them to go through a separate application process. So that's how we get an entire site to require login, just editing you know, the, the theme dot liquid with a little bit of code that redirects everybody that is not logged in to the account login page. And then we optimize our account log in based on our business rules of, you know, whether we allow them to sign up for accounts here or have to go through a process to do it. So if we, that was helpful. Thanks.
Restricting Access to a Page / Article / Product / Collection
Liquid Code for theme.liquid
Liquid Code for template-subscription.liquid
Video Transcript
Hey, Scott Austin here from JadePuma. In this video, I'm going to show you how to restrict access to any page on your Shopify store or to people that are logged in and logged in with a certain status. Right? So by any page, I mean, we can do this on an article. We can do it on a page. We can do it on a blog. We can do it on a product and we can do it on a collection. So in this store that I'm building for a client right now, we have subscriber content. So they must be a subscriber. And if they are a subscriber that we add a tag to their customer record, and right now I'm not logged into this store. So if I go to subscriber content and what I want to look at one of the articles, it's going to take me to the login page, same thing.
If I want to go to one of the product downloads, this is a collection page. It also takes me to the product page. So step one of the code that we're going to do is going to be to verify if someone's logged in or not. And if not logged in, ask them to log in, and this is all going to be done through liquid code in your theme, right? So this is not going to be done with an app. There are apps that do this. I like doing things with liquid. When I can just to reduce the complexity of adding lots and lots of apps and this way I'm in control of the code and know exactly how it's built versus, you know, having a developer when I may not be familiar with their code and I might not have access to edit their code.
So, you know, there are times you, you have to use apps, but this is one of those times where you can also just do it and liquid code on your own. So let's first look at what, how we're getting the customer to go to the login screen when they're trying to go all throughout the site. And if you see here on the, you know, you'll see when I hover over something down here in the lower, right. You know, it says this, this trying to take me to profit source advisors.com for slash blogs for slash articles. But when I click on that link, it doesn't take me there instead of going to this account login page. So let's show you how that code works. It's actually fairly simple. So that first level of let's verify if they're logged in or non write, that code happens in our theme dot liquids.
That's under the layout folder, theme dot liquid, and w what the code is. And most of the code is right here, right? So what the code says is if the template contains subscription. So what I do for a product for an article, for a collection, I make a second set of templates for each of them. So here, if you look at my templates folder, you'll see, I have a article dot liquid in the article, duct subscription dot liquid. I have a blog dot liquid and a blog dot subscription dot liquid. I have a collection subscription, one in addition to my collection. And if I look farther down, I'll probably see the same thing for product, product subscription, and a normal products. So all you have to do is create a second subscription template and then just apply it to that, that content. So if you want a collection to be restricted access to subscribers only, you just changed the template from default to subscription, same thing for article or for a product.
So regardless of what type of content it is, we're creating that dot subscription dot liquid template for each one of those types of content, so that we can tag them basically at the template level as a subscription access piece of content. So then what we do is if we're on a subscription template, we check to see if they're logged in and if they're not logged, and that's what this in less customer customer basically means, are they logged in? So if they're not logged in, then we set assigned, you know, and then we assign the variable, send a log into true. And then what you see down here is if sends you login is true. And if they're not, if they didn't go through this loop here that send the log in will be false, right? So if we're not on a subscription template, send a log and we'll not get set to true.
Therefore it is false. Therefore, this, if statement will be ignored and what will happen is it'll respond to the L statement and the ELs all the way down to the bottom of the end, if right here, this end, if we added to this page that is the page template, the theme dot liquid template that was there before I started editing it. So basically we added this code right here and the end, if down at the bottom. So then back to this logic here, if we have said, we want to send them to the login page, because we're on a subscription template page and they are not logged in, then there's this HTML code here, which basically says, all right, we're going to redirect them to this other page account login, which is a page that exists in all Shopify stores, regardless of the theme.
And then we also say, and checkout URL. And that basically says, once they're done logging in, bring them back to, and this is a liquid element here, the request dot path. And that's basically the path of the page that we're currently on. So the way that works right is here. I am, I want to go to the subscriber content. So I'm gonna go to this articles and I get redirected. Any, if you see up here in the URL, I'm going to click it again. You'll actually see, I go to a different page, the article page, and then it quickly redirects me. Once that page starts loading up, it redirects me and here it says, here's that checkout URL for last
Blogs, Forrest slash articles. So it's coming from once I log in to bring me back to this location. So I'm going to log in to this page, and now I'm back on blogs articles. And if I want to now access other subscriber content, because I'm logged in and this is all place one, if you're still building the store out, now I have access to this. If I had, if I log out right here and go back to that downloads, you'll see, it takes me to that login page. So the first level of access is are they logged in or not? And the way we do that is through the let's bring up the coding in is through editing theme dot liquid. When this code that we just talked about and then creating those dots, subscription templates for each of the content types and assigning it to that content type in your Shopify admin.
So if all you want to do is restrict access to people that are logged in, we're now done, right? But there's a second level to this that we can add to it. And that is, we only want our access to people that are logged in and have a certain tag to them, right? That tag could be in the case of this stores for subscription, you know, you could have a tag for VIP customers and have VIP only content. So let's show you what that content would look like, or that code would look like. So let's go to articles subscription right here, liquid, and we have to add this. And each of those subscription templates that we create. So this content here is the article doc liquid content and the rest of this code below that, and above it, we add. And it's a simple if statement.
So what we're saying is, if now we already know that the customer is logged in on this page, because we did that check at the theme dot liquid level, right. We checked to make sure on a subscription content that they're logged in. So we know they're logged in. So now we're asking that second question. If the customer dot tags contains, and in this store, we are tagging, our subscribers is active subscriber. You can tag your customers as VIP or whatever else you want and put that tag up here. So then if the customer has the tag that they need to access the content, they get to see the normal content for the page, if they don't have that tag. So if they log in, but they're not an active subscriber, then what they'll see, that's the L statement here. And this is just a little code that I, I made up for this theme in this store that basically says access is not authorized.
And I actually have a, a page that I store some content on. It gives them a little brief explanation. And, and the nice thing about doing this at the page level storing the, in a page content is I can create that content once and then just throw the same reference to it in all of my different subscription templates, whether it's for a blog article, a product or collection or a page and all that same content shows up all of those the same way. But this is basically the, you don't have access to this constant warning message and whatever. However, I want to handle that I'm doing in that little section there. So that's the second level of making sure they have the right tag. And of course you can have different tags, you know, maybe you're, you know, you have VIP's and you have subscribers, so you can do different logic between those there, but the, the liquid code for these is on the blog article on the Jade Puma website that this video is also on. So you'll be able to look at that and use that as a starting point for your theme. Of course, you might have to change things a little bit, the, the store that I'm doing as soon as in the turbo theme or, sorry, it's not interpreted in the flux theme. Your, your code may have to be a little bit different for your theme. All right. Hopefully that helps. Thanks for watching.
Restricting Access to a Piece of Content on a Page
Liquid Code
Video Transcript
Hey, Scott Austin here from JadePuma. In this video, I'm going to show you how to grant access to certain people for content on a page. And that page should be on a product, a collection or a page wherever you want to only certain people, right? So you can either consider restricting access to everybody else or granting access to the ones that are letting in. And let me show what that looks like in action. I'm going to go into this wholesale store that I'm working on onto the account page. And I've actually got two pieces of content on this page that are showing up because of information about my customer account that I'm logged in with. So I'm logged in with an account that is tagged as wholesale. Therefore this wholesale information shows up. I'm also logged in as someone who tagged as admin and by admin in this situation, we mean store staff, right?
So then I see these store staff, admin functions content also. And let me show you it working in action here. So I'm going to go into my customer's folder. There's only a few of us because we're, this is a brand new store building out, but I log into my, or I look at my customer record and the Shopify admin, and he said, I've got two tags, 30% and admin. So if I just delete this admin tag and save it, go back. And if the server's caught up with us here, refresh the page. Yeah. That admin content is now gone. Right? If I go back into my customer record and put admin back in, refreshed the page on the front end and my admin content shows up again. So notice I didn't change any code there, the codes already in place that I'll show you how to put it in place.
All I'm doing is adding and removing tags from different customers and it's adding and removing the access to that content based on their tags. So let me show you how the code works, because it is fairly simple and there are apps that can do this type of stuff. I like to use liquid code when I can, instead of an app just to reduce complexity. And this is one of those things. That's, it's a fairly easy liquid edit. So I'm going to go back into the Shopify admin and we're going to go to online store and we're going to click on the actions button and then edit code for the current live theme. And here we're looking at the account details page, right? And it's it's template is account. So we're going to go into the templates and we're going to find customers accounts right here.
And we see that everything in here is all in one section called account details. So we're going to down to our section account details. Now, when I had little snippets of code like this, I like to make them their own little snippets. So instead of embedding it inside of this account liquid for the section, I actually make it its own snippet. So here you can see the two snippets. One is render account dash wholesale, and the other is somewhere in here. We'll see render like account admin or something. Oh, there we go. Render admin functions. So those are two little snippets I made to contain all my coding. There was a few lines of code, only a few lines of code in them. I made them separate snippets. So it's easy to see where that content is. So let's open up those snippets. We want account wholesale and we want admin functions and you'll see, they both contain very similar logic, Dublin, if statement to start them off with now, one of them, the admin one has just one if statement, and that is if customer dot tags contains admin.
And we saw before, right? My customer record was tagged as admin. And this is the one that turned that admin content on and off. Now the account wholesale one was a little more complex because there's multiple wholesale tags that could be used to show that wholesale content. So here you can see we've got, if customer tags contains 10% or customer dot tags contains 20% or on and on and on for all the different tags that we have. You could also do this. Like let's say the messaging here, this messaging is very generic and doesn't say, you know what discount level I have, but what we could do. We want him to show that there, we could have, you know, a nested set of if then statements like if customer dot tags contains 10% show this concept else, if customer dot tags contains 20% showed this content.
So you could have a different message per tag, if you wanted to by doing if, and then else, if statements nested inside of each other. And it's also good to note that right now, we're on the account details page. So we already on the account details page, there's, there's a log log-ins required to be on this page. So I can easily just put an if customer dot tags contains admin statement in there. If you're going to put this on a separate page where you're not sure if they're logged in or not, then you want to add a little bit of code and it looks like this. If a customer or an sorry, not, or, and customer dot tags. So this, if customer basically says, are they logged in? So if you want to put this content on a page where you're not sure if they're logged in or not, the first part of your statement is check to see if they're logged in. And then if they are logged in, make sure that their customer record has the appropriate tax. So hopefully that makes sense. And I'm just going to delete that cause I don't need it on this account page.
So that's how you can get content to show up on pages for certain users. Hopefully that helps. And in the a blog article, that'll be next to this video. I'm going to include a little snippet of code. You can just copy and paste the code that I was showing you. You can easily add it to your store. Thanks for watching.