How to Add Shopify Login

hi, this video is on how to add login to your shopify website. my name is adam. i'm the founder of paid members app, or stripe. we're a stripe verified partner and we work on shopify. so by login, i mean a login form that looks like this: and if your customers came to your website, they'd see in the navigation menu that there's a log in link, and if your customers click on that, they get something like this- the login form, and they'd also get forms like the forget password form. we also allow you to create a signup link. so if your customers clicked on sign up, they would get the sign up form and you'll see name, email, password and you can also ask, ask custom questions, which gets saved on the customer's profile. okay, and so let's say you do have members only content. i have an example of members online content: this members only link. if someone clicks on that, they get gated off and they get the login form, unless they've paid and have access to it. so let me show you what this looks like for a customer that has already become a member. so we have a pricing page here. i'm going to cover payments in another video, but we just have a strike payment link is a as a button and a strike payment link just as link text and then some custom stripe checkout code and if a customer clicks on any of those, they go to stripe checkout. but i already did that for a customer and i'm going to log in as that person. okay, so we have adam and examplecom and i've entered the password, okay, and so now they're logged in and i've given this person access to that members only page. so when i click on that, i get access to the page and so i have direct access. i don't get that login form anymore. and also we have a direct integration with stripe customer portal. so your logged in customers can click on billing portal and when they click that- usually you need to have a developer code- this- and you have to have a server set up for customer portal. but we include that in paid members app. so if your customer clicks that and you have customer portal set up in your stripe account, they can go to a page like this and this allows you to not field requests for things like receipts. the customer can see their invoice history and just view a receipt by clicking there, and also they can update a payment method, for example, if your customers have a credit card that's failing, they can just add an updated payment method without sending an email. they can just self-serve do it themselves. also, they could update their plans. so you can see my customers on a 99 a month subscription box and let's say they want to upgrade to my other product called the ultimate subscription box. they can easily do that through stripe customer portal. so here i am just consenting to that charge to upgrade. so it's that easy to allow your customers to upgrade to a higher plan. you can also allow your customers to cancel plans and even do things like pause subscriptions. what you put into your stripe custom portal, it's all up to you and you can set that in stripe in your standard stripe account in the custom portal section. so let me go back to the website. so we've looked at all of this and so let me log out as this customer, go to my account and log out and you can see that if you're logged out and you try to go to that members only section, you again get that login form. so how do you set this all up? well, i'm going to link to the tutorials on our website below the youtube video. so just click on that link and we just walk you through with screenshots and let me show you, since we're on youtube, how to do that. so you'll just go to online store and click on navigation and you can see that under main menu i have a login and sign up link. so if i click on edit, you can see you can customize the name so you could call it login or member login or whatever you want, and then we just give you one link inside the app that you just paste here and then save. you can also see the same thing for sign up, and it's customizable. if you're on the side of the fence, that, like, sign up is one word you can bat, or you can do it as two words, and we just give you a separate link for that if you'd like to use our optional sign up. and then the only other step is to go to theme and actions and edit code and we give you one little snippet of code that you embed into your themeliquid file. so let me show you where that is. you just click on theme liquid themeliquid and scroll down until you see the closing head tag and you paste our code right above, just like this. okay, and so that is how you add a login form to your shopify website. if you have any questions or concerns, just go to paidmembersappcom and we have a little chat bot in the bottom and you can send us an email with any questions or concerns. and if you like this video, please hit subscribe. there's lots of new updates by stripe lately and we're gonna release some new cool videos on stripe payment links and stripe checkout for shopify users.

Create Private Collection For Tagged Customers (Shopify Tutorial)

welcome back. I'm feeling a little under the weather, so if my video today seems a little bit Spacey, that's why. but today we're good. we're gonna be doing is room. I'm gonna be replying to a comet that was left on one of my videos about how to make a collection private, so that, if only if a customer is tagged with a specific tag will to be able to see what's in that collection. so let's jump into it. so sometimes you want to create a collection page that has password protection on it, so that if a customer is tagged like VIP then they can view it. if they're not tagged, then they would not be able to view the products out on the page. this would be used in a situation where you want to have people sign up for a membership list and if they are approved on the membership list, then they get access to products before the rest of the community des or before the rest of your customers do. so what I'm gonna do is I'm gonna go through and I'm going to show you how to set this up. I'm going to have to create three different pieces. we're first gonna have to create a collection that we are going to be able to assign a template so that the specific collection that we have picked is going to be password protected. the second piece that we're going to do is we're gonna set up a page that's going to give some information if they've received a no access item and they need to be told where to go to get access to it. so we're gonna create that. and then the third thing that we're gonna do is we're gonna create a little bit of JavaScript to redirect them if they've gotten to the page, and we want to make sure that they continue with their user experience, even if we don't want to ever end up someone in a dead end, as it were. so let's hop over to the screen. so we're on our demo store here. the first thing that we're going to go and do is we're gonna go and create a new collection. so we need to have a collection that we can work with. so if we go into products and we go to collections, we are going to go to create a collection. so let's go and create a collection. so the collection that we're gonna have in here this is going to be our private collection, okay, and we are going to make this an automatik collection and we are going to tag it with. let's say, we are going to tag it with Chanel. only our Chanel designers are going to be private, and then we're going to save it. this gives us a collection that we can now make so that when people go to view private collection, they will be able to be the only ones who are able to see this one. now, before we move forward, we're going to need to create a new collection template. now, this collection template that we have is this: is what's gonna hold the code that's going to check to see if the customer is tagged and allowed to go into the collection. so let's go to our theme templates and go and modify it there. so if we come back over to the store and we go to online store and we go to themes, we're gonna go into our theme and we're going to go and edit the code. now what we want to do is, when we're on the templates page, we're gonna add a new template and we're gonna create a new template and we're going to call it collection and we're gonna call this one private, private - collection. okay, I'm going to create this template now. this template basically takes the existing collection template, duplicates the code over and creates a new template. so nothing has really changed yet. but what this allows us to do is, if we head back over to products and our collections, we can now assign this new template to the collection that we just created in order to have different code render when this collection gets pulled up. so now, if we have a look here under our drop-down list, we now have the option for private collection. so once we've done that, it's saved. now we can go and modify the code in the theme template so that you're able to go and may have it check to make sure that a person has a tag, whether they're out to view it or not. so let's go back over to themes and go to edit code and we're gonna pull up that private collection that we've just created. so, under the templates, and we're gonna go to private collection and we're gonna do a couple of liquid code if statements. so the first thing we're gonna do is we're gonna write: if customer tags contains VIP, show the collection. else we wanted to show some content saying that they're not able to do that, and we're gonna do that by pulling in a page that we have created on our CMS. so I'm going to show you how to do that in a minute, but first we're gonna put the code in here. I'm going to call this page know -, access - content and then I'm going to end the if ok. so what this first piece of code does here is: if customer tags contains VIP. so what this is gonna look is it first gonna look to see if the customer is authentikated- make sure that they're actually logged in- then it's gonna go through the customers profile and it's gonna check to see if it contains VIP. so if it does contain VIP, we wanted to show the collection. if it doesn't, we wanted to show the page content of the page that we've created called no access, and we're gonna pull just a content in there and that's going to end. if so, once we save that, we are now going to need to go over to pages and we're gonna have to create that text that is going to be displayed if we don't have access. so we're gonna go pages and we're going to add a page and we're gonna call this no access. now the page title is not super important, because this is not going to be a page that's going to be shown anywhere else other than just as a place for you to hold the content. the reason we're using a page in this case is because it makes it easier for us to edit in the future. so this is a private collection. please join our VIP member list to view it. okay, some simple text in here. I'm gonna line it in the center and I'm going to save it, alright. so what have we set up now? so now, if we go to our private collection and we go into a demo store here, I'm gonna actually go over to products and I'm gonna view that collection that we just created in a private collection. now, before I do that, I just want to show you that I am not logged in. if I click on the login sign, it's going to ask me to login. so I'm gonna show you what happens before we're authentikated. so if we go in and we view this private collection, it goes to check to see if we are authentikated is obviously we're not, and then it comes up with the text that we entered into the page: the sir private collection. please join our VIP member list to view it. okay, so now we're going to authentikate. so the next thing I'm gonna do is I'm gonna go and I'm going to login to the store. now I have gone and created a user account, so I'm gonna go into customers and I'm gonna go into my user. what I need to do is I need to double check to make sure that this user has the tag VIP. currently it doesn't, so we're gonna go VIP and we're gonna add that to the customer. now, if I go to the account and I log in- okay, now I've logged into the store- and if I want to go and view that collection again, so we're gonna go back over to collections. I'm gonna actually make this a little easier. what we're gonna do is we're gonna add it to the online store in the navigations, so it's an easy click for us to get to. so we'll go to navigations and we're gonna go to main menu. we're going to add in a menu in here and we're gonna called VIP collection and we're gonna set it to go to the collection that we just created, which it called private collection. add that in there. so now if we reload our page, we have VIP collection and we can go over to it. now that I'm one, Fennec ated, we can see. I can now see my private collection. now if we want to just double check that so that if a customer is not tagged with that VIP tag, I'm gonna remove that tag and hit save. now, if I reload this page, we can see we get the content that shows up from that page that says: this is our private collection, please join our VIP. a list of you. so now we h.

More:$135k In 30 Days (January Breakdown)

More Detail into Shopify Customer Management

Hey everybody, This is Ori from Astral Web, and I'm going to introduce to you a little more detail into management of customers in Shopify backend, with defaults, what you can do. So I've made a video or a few videos about general Shopify. I've kind of introduced them a little bit, but I want to go a little bit more detail to explain how you use it, mainly from customer service, but just as a management of customer. okay, So, first of all, what you want to do, go to the backend, click on Customers and you can see your customer grid, your customer you know list one by one, though, and all of your customers are here. You can see basic information, the customer name, any notes about them, amount of orders, the money spent over the lifetime, and you can also use your customer groups to filter. So what are customer groups? These are built-in customer groups that are set, But, in addition, what you can do is you can use the search box and the filters to make your own, and this I find extremely powerful for customer service and especially for marketing right. So, for example, if I want to send certain emails to customers that are very loyal- they've spent, you know, over thousands of dollars, I can make that. So, for example, I would go here, click on More filters, Amount spent and I would say, for example, over $1,000. I click on Done, now I can see all of mine. Now I don't have, because this is a demo site, but let's give you a better example here. So let's say I wanted to do, for example, all the customers that accept email newsletters. okay, So I'm going to click. that's how I did this. So now I can go here and I can click on Save filters and I can call them subscribers. And now that I did this, I can create many, many different types of groups And you can use them for just easy navigation and especially, apps can use these things to really enhance the functionality, or custom coding, if you want to do So. we've done very, very cool things with customer groups. You can make things like restricted areas on the website only for customer groups, like only special groups and customers can see things. you can make special promotions, different abandoned carts, a ton, a ton of things, mostly with external apps and coding, but it's really, really a powerful thing and I can't stress enough about this specific thing. right, Make a ton of groups, figure out what your business needs, how you want to work with your clients, with your customers, and then go and make these things. So this is a really powerful thing, right? So you have a few more filters here: tags and account status and of course you can search for names, right, Okay? So in addition to that, what you can do is you can actually add customers yourself. So typically, customers come to the website, they just register themselves. they do it. Sometimes you want to add customers. For example, someone has trouble adding their account. they might call you for customer service and say, "Hey, I want to, you know, register account for me" or other. So you just fill it up, right? So Janes, let's just call it Jane and then M, then Jane M. just do that and you can fill up all that basic information: the phone number, you know address. do they want to join the email newsletters? Let's say yes, All the address information. do you want to collect tax from them? And then these things are notes and tags are internal for the business, So customers don't see the notes about them. So if they were calling customer service all the time and annoying us, you might say: you know they like to tok a lot on the phone. Be careful, right For your customer service Or whatever it might be. They're very loyal and super nice, hey, and they're always very pleasant, right? So when they click, now I have my customer here. okay, This is my customer information. okay, So let's show you a few things. So, in addition to that, you can actually search for customers, right? So let's say, I want to search for a customer and I can actually view my customer information. So this is a walkthrough of what the customer detail page looks like. Now, first of all, you can disable their account. right, If there's some issue you can disable. they can't log in, they can't use the account anymore. You can reset the account for them. So what you can do is, if they are not able to go back and log in, you can reset their password. But because of security measures, you, as a business owner and customer service and marketing etc. you're not allowed to see their information, right? So what you do is, when you click on this, the customer will actually get an email. okay, So this account, this email that I have right now, is both my business account and my customer, just for example, just for this right. And so when the customer resets, they'll get an email and they can click here. they can reset the password by themselves. Okay, What else can you see? You can see their basic information when they started to be a customer, where they're from. you can make your own internal notes that only you, as the business, can see, and you can see their last orders, the total spent and their average order value. okay, These are all things that you can use for marketing purposes. okay, Now you can also click here to see the last order. Here you can quickly see the actual orders they placed and if they have more than one, you can actually go and view them one by one, especially good for customer service refunds, things like that. And one of my favorite things are the timeline. So when you tok to a customer and you want to know more about them or they're asking questions, you can actually see everything about them. So if they say, "Hey, I had an issue with an order, I didn't get the email" you can prove that they got their email, or they registered on a certain date or they refunded. you can see the whole order history. Now, if it's very long, you can go back and back and back and back, okay, So, in addition, you can leave your own comments. For example, you know, customer called and say I helped them, helped customer, fixed their problem, for example. right, I didn't have any refunds, anything. I can attach things, I can add some more information and I click on Post. Now this is going to go on the timeline. Okay, So right here it's in the timeline. and which admin that logged in? There's a note: which customer service, which user logged in and did that stuff? In this case my name is just called the admin, but it could be, you know, whatever customer service or other. Okay, In addition, you can edit for the customer their information, their general information, their name, email and phone, and do they accept newsletters. You can actually manage their addresses. You can either add a new one right here or you can actually edit their existing one. or if you can have multiple addresses, let me give you an example. so, Jane M, and let's just say Main Street, let's just say, for example: okay, If I save this, now I have two addresses. okay, So let's see: Oops, I think I clicked the Manage, So let me do this. Jane M, let me add a new one and let's just say this is the address I'm going to click here. Okay, So now I can click Manage and I can see multiple addresses And I can actually go and change and make them defaults right. So I can. this is the current default one. I can help them change, for example, to this one and you see it changed Okay. In addition, I can make sure I can have a customer that does not need to pay for tax. okay, And the most important are tag right. Another thing that's important is tags. This is a way for you to organize, label them right Here. this is a customer note, which you can only have one and this is a general note about the customer, But tags can help organize them in many, many different ways. You can have one customer have multiple tags. you can really use it for marketing. So, for example, for tags.

More:⭐ 8 Winning Products To Sell Online in March 2021 (Shopify Dropshipping)

How To Redirect Shopify Customers After Login, Logout & Account Creation - 2022 FREE TUTORIAL

shopify world customers account on your shopify store. how to have them and how to make sure they get redirected to the right page with some code. let's just jump straight in right now. all right, so we are on the store page right here and first and foremost, i'm toking about the customer account page. this now, if you don't have that yet installed on your team, no big deal, just go to settings right here. go to checkout. in here you can activate or disactivate any accounts for your customers. so those are the three options. they're in settings- checkout. as you can see, i chose accounts are optional- and then this little account logo shows up. all right, the next step is redirecting the accounts. so once i create an account, i want to be redirected to a certain page. if i log in, i want to be redirected to a different page, and if i log out, i want to be redirected to yet another page. let's do that right now with some code. first thing you're going to do is you're going to go right here on the online store section on themes and you're going to click on action duplicate. i cannot stress enough how important this is. if you do not do this step, you're an idiot, because if you make a mistake. you're working on your life version and then you can screw everything up. just make a duplicate work on the duplicate version and if you make a mistake, just delete that duplicate version. all right, you got that part cool, all right. once it is duplicate, right here, you click on actions and you click on edit code. welcome to the code editor. now this might look a bit intimidating, but it really isn't. right. here on the left you're going to click on theme dot liquid, and then you're going to look for the body tag. now this is a head tag. there's only two, one opening and one closing. one closing one should be right here and this is the body tag. this is the opening. when there is a forward slash, it means you're closing attack. so this is the opening body tag and the closing body tag is right here. so spacing doesn't really matter in shopify. so you can do that uh as many times as you want. we're going to type tensor a couple of times. spacing don't really matter in code. make sure you're before it's not here but here, and then a a piece of code here. so this is. oh, this is the little script. now i like to add some uh, notes for the future developer- on it a script for account login redirect. and there we go, and then i indented and we save it. one thing that's very important to know is that this will redirect to the checkout page. so once it is completed, you probably want it to redirect somewhere else, so we're just going to redirect it to the home page by removing checkout slash. just a slash is the home, or you can do collections, or you can put the url of any page that you want there. the important part is- let me show you, for example, to take it: after your myshopifycomafteryourcom, you have the slash and then you take all of this part. so, starting from here, you just paste that there. what i typically would recommend is that you do a welcome page. so for that we're going to first create that welcome page. pretty simple: you go into pages right here, you do add a new page- welcome thanks for creating an account. you save this page, you view that page by clicking view page right here, and then you take that url and that's the url we're going to use. so when people create an account, they get redirected to this page. so again back to online store. copy of the butte action edit code. we're going back to the piece of code that we have just pasted. it's in team dot liquid. it's all the way at the bottom right here, and instead of going to the collection page, we're going to go to our newly created welcome page and we save it. cool, all right, that's done now. i personally like people to have a warm welcome, so a little bit of confetti maybe when they come to the welcome page. we're gonna add that as well. that's a little extra here. so far. having that, we're going to go to the template page right here. we're going to add a new templates. we're going to choose pages, welcome, create a template. this will make more sense towards the end of the video. you'll completely get it. i promise you fitty welcome scripts. again, a little comment so that the next developer knows what he or she is getting themselves into. we tap it and we save that, all right. so the entire part that we just did right now is when someone creates a new account, they get redirected to a welcome page, and that welcome page will have a little bit of confetti. now let's do the other scenarios. what happens when someone logs in? well, we want to redirect them, not to the same welcome page on congrats of creating an account, but another page, an account page. for example, to make sure we redirect the login users to the correct place for that, we're going to go right here on the left. we're going to type in login and then we have here a template called customer login. we click on that one and then right here you're going to look for the form customer login, this one. sometimes there is a no validate behind it, sometimes there isn't. so this is what you're looking for. as soon as you see, um, this form customer login, you know you're in the right spot. you go all the way behind that line, type enter a couple of times and then you're going to be pasting the input line again, the exact code. i'll provide it to you at the very end of the video, and so here is the place where you can control, as soon as someone logs in, where they want to go. okay, so currently, with this code, they're going to the collection all page. that's maybe not ideal, so make sure that you so make sure that you save it. so you probably wanted to go to pages slash account, for example, and then you need to create the account page right here in the pages and make sure it has that url. anyway, you can type in the url that people want to go when they log in right here, and then you just click save, all right. and the last step is when users log out. you want them to redirect them to a specific page, let's say, for example, on faq page. so we're going to go to pages right here. we're going to create that faq page. maybe you already have it created. maybe you don't want them to go to the faq page at all. i'm just creating it for the purpose. this is an faq page. we made an entire video about faq pages, so make sure to check that out. if you want to code your own save, we're going to take the url from that page. we're going to go back to online store right here. copy of the butte: edit the code, all right. so in the teamliquid again, we added this earlier. now we're going to add the other piece of code right here for the log out. i'm going to just paste that right here. there we go. i'm going to indent it just to make it look a bit nicer. and here it says: well, when it log out, it goes to collection at all. you can leave that, or you can go to somewhere else, for example, faq page. pages dot. copy. oh yeah, pagesfaq. we save that. boom, all right, perfect. now we're going to be putting our theme alive because there is one more change we need to do. we're going to go to online store themes- the version we have just worked on because it last saved just now. actions- publish- are you sure you want to publish this? ah, yes, i am. thank you very much, then. remember we did that confetti, which is a fun little extra. i believe you can go to pages if you want to confetti. you just have to make sure you use the right templates. we created the confetti template. so you go to pages. the welcome page will have the confetti. so, right here you can do in templates, you change yours to be the pagewelcome. just a quick sidenote: if you want your faq or any other page to have confetti, you just go to that page and you switch it to the page dot welcome template and it will have confetti. you can do this with all pages. okay, let's see how all of this looks. we can just view it. right here. we go to our account. we create an account. andrew econ experts dot io. to continue. let me know that i'm not a robot. i am not a robot, i'm submitting it and here is the welcome page- perfect.

Require Login to Access Shopify Store

hey, scott austin here from jade puma. 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. all there are apps that do this. but if you're comfortable just copying, 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- this is 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 forward slash login. this is a standard page in every shopify store, um, but regardless of what page i click on, it still takes me back to this, this wholesale login page, and that's because i'm not logged in. and i can see that here because my login icon- it says login instead of you know account. so if i log in using a username and password that's valid in shopify, now all of a sudden i'm in, you know 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 going to 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 themeliquid file, which is stored right up here in layout under themeliquid, and it's already open and the code that makes this happen is just these 10 lines of code, um. so what you know explain the logic of what this code is doing, um, and i'll include a little snippet of this code on the 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 right down the right path. so what we're doing here is: we're basically in in this logic. here we're asking ourselves: do we want to redirect the customer to, um, the login page? so you see, the first thing is an unless statement um in less customer and think of customer as logged in, right, if, 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 customers 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 gets 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 um, you know things you have to learn, right, it's one of those learnings you do because normally the template is, you know, usually in the file name of. uh, let's just look at a template. here's the artikle template, for example. right, um, it just says artikleliquid, the. the deceiving thing is, or the little trick you have to learn, is there's a subfolder in templates and that's what these are: customers cut account customers, activate account customers addresses and log in 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 login right here. this loginliquid is in the subfolder customers. so basically what we're saying 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 end 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 login equals true, all right, so send a login. going through this loop, it's either going to be false or it's going to be true. and don't forget, if they're already logged in, send to login, 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, then statement: if send a login, right. so this is basically saying if we've already set this to true up here. and so there's two if statements: right, if send, send to login, which basically is if we've already set it to true and request path is not challenge. so that's when you know they're authentikating and stuff like that. um, and that's. i think that's the- uh, 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, um, and they're not on the challenge page, then what we're gonna do is we're going to 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 meta. and it says content: right, send them to this url, which is account login. and every store has a forward slash account for slash login page in shopify. it also says: then go refresh the page. so all this other content below um actually is is not used, because the first thing it shows up. but then you know, the site listens to this first command which says: redirect them to the account login page. and that's what you see happening here is, as i'm not logged in right now, i click on any one of these and i- and if you look up here in the 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 it sees is: redirect to the login page, right? so that that's what's happening there, um, 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, right underneath the head. so it's the first thing that happens on every page on your site. um, when it loads up, it goes through those different rules, determines if we're gonna redirect it to the login page or not, and then performs that action. now something to think about is in your login page and then 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 apex chassis 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 the apply 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 actually apply, and the store staff evaluates 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 notike on this account page there's no sign up link and there was in this account. 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- uh, you know, the theme dot liquid with a little bit of code that redirects everybody that is not logged in to t.

27 Shopify Cart, Register, Login and Account Pages Completed

hey, welcome to another video. in this video i'm going to show you some of the changes i have done behind the scene for the password page, the card page, my account page, order page and many more, and also i will show you the code i have written. just a review of what is important, because a lot of them are repeated thing. i don't want to record video for each of those pages, but you will get the idea of how you should design those pages, because those pages are important, although not a lot of customers will see them, but they are required for any shopify team. so, starting from the court page, the only thing i have added in here was this loading, and the loading is just showing this loader. in here you can check the code on github video description. there is a link you can see all the code on github, so you can check that out. and also i finished off the cart page. we have this card slider, but this is the card page itself, so in here you can add a card note. also just a special instruction, something like this: and the cartridge is completely responsive. i finished this behind the scenes so it would look something like this on mobile. this is great. how about the account page now? if i click the account and if i'm login, this link is sending us to the account page. if you are not logging, it will send you to the password page and in here we have the order histories. if we have any order. we have also this print button, but you can design it any way you want. also, addresses- addresses are very important, like this design that i have done here is, i think, much better than much some of the premium themes, so you can copy this for your team also and use it. if i add an mrs, this model will pop up using alpine. we just created this model- and i mean i did this behind the scenes- so you can check the code on github and you can create any new address. you can edit the address- uh, you can delete the address. and if i come to the code in here, you can find all of them under the customers in here. you have account- uh, it is a section that is called template account and the reason i put them in a section is because we can put more settings in the future. that is the good thing about it. and you have this login, you have register, you have order, you have addresses, so if i open addresses, this is the address template, probably one of the most complicated template that you will ever have in here, but i have extracted everything so nice and clean that you can easily understand what i am doing in here. first of all, there is the network. it is the snippet, uh, the number that you see here. if in the future you want to add, like more number in here, for example, you will add an, a link to subscription, you will add a link to the wishlist. you can just directly come here and search for the account nav. come here, duplicate one of them and you'll. it will just get you to that page and that's it, um. then you have a logout which shows this logout link for us. that's perfect. this is the default address that's showing uh for me in here. we can edit it. of course, this is just a random error, so as soon as i sign up, this address will be the default address for me. okay, cool, um, never rush. and everything. i have extracted them into three snippets. we have a new customer. this is a model: edit customer, delete customers. if i try to delete this, this model will pop up. are you sure you want to delete this, because if i delete it, this will the thought will not be like recovered. so that's something that you have to put in the warning and all of them are in this like snippets that you can find out in here. everything is nice and clean and you can easily understand what i have done in here if you check the code. also, some sitting of either edge shows a full size or not, just for this pitch. i think it looks really good in this example. but if i come to the order, we don't have any order. so let's place a test order and see how it will look. if it require any changes, we can bring those changes- also some minor of this- in here. so this should align. we can do that. before doing that, let's go to the card. this is a lot of products, so i'm not going to place that big order. if i go to the checkout, clicking the checkout should take us to the checkout page. um, let's see if we can place a test order. i'm going to show you. okay, it this happy discount. if i come to the shop file, you click on the setting under the payment, you can enable that test payment in here. activate test payment and develop minister. okay, great, if you click on the manage, you can scroll down and say: we enable the test mode in here. when you are test mode, the payment will be okay and bank number is required. uh, let's, okay, this is a phone number. let me just put a random number in here for now. we save it. okay, phone number is invalid. okay, let me put a 0, four, six, nine, just a random number. please stop messaging this guy. should be an australian number. i hope this save and it will enable the test mode for our payment. once this test mode is enabled, which is now test mode on, we can go to the checkout and check. okay, i'm using, since i'm logging it already, pick my address and everything. let me just put a one, two, three janis street, let's say queensland. i'm not in queensland, but i will just put a random address here. it is nobody. okay, optional everything. let's continue this. okay, let me just quickly cancel this call. okay, continue shipping. oh, last name. um, no, sorry, just wanna place this test order. okay, express shipping. that's okay, because we are using a test payment. now it says it accept a test payment. so for for this one, the credit card number for this one will be a test number for the visa will be 40, 40 to 42. so we can come here and we write 40 to 42. i normally write it until the last digit is three. so we can remove the last digits and in here, um, let's put um, card name of hojan and let's put an any date in the future. so we say 0, 20, let's say 23 and for the security write any number you want. it will just accept that if i pay now, 42 order is being processed. okay, cool, we are. we have successfully placed the order. so if you come to your order page, this guy just place the order. that's me, okay. so if i come back to my website, uh, if i check the account now, the order is displaying here except the card image. now, okay, because i didn't place any order, the account is not displaying these images properly. i am going to fix that behind the scene and then we are all good to go because we are. um, yeah, this snippet does not exist. the reason is because i didn't test that part. okay, i hope this video has been informative and you understand what i have done in here. um, yeah, that's all we need to show you. and one more thing i want to, before doing that. if i come to this product, i add it to the cart. now see how much we have reactivity in here. if i go to the cart page in here, you see this card also have one order. if i update this, this one should also update. see, it is two now. add more. this is three now. both of them are reactive because we are watching for an event in here. um, yeah, that's it, i hope. uh, the video is somehow informative. of course it is, but for the source code, make sure you check the github repository. thank you.