How to Add Customer Account Login Icon in Shopify ✅ Shopify Tutorial for Beginners

hey there, welcome to you in my youtube channel. in this tutorials i am going to show you how to add customer account login icon in your shopify online store. so if you are looking easy and fast solution, then you can continue this video in my website. right now, you see that there is no account login icon right here and i wanted to add account login icon like this one as israel. before record this video, i have published an artikle on my website: best free shopify theme. and here is an artikle i have published with code snippet so that you can directly copy and paste in your website and you no need to run any code or type any coding. okay, so let's get started. first i'm going to log in my admin panel. here is my admin panel of my online store. then click on the online store. then click on action button. from here, select edit code. now search header in the source field and you can see that there is a header dot liquid file in the section folder. so i am going to click on it to open. okay, now go back my old site. here is the guideline. now i'm going to find a class named header card. click on ctrl f to search this class and here is the class. now go back my oil set again and copy this code. just paste it right here, okay, and click on the save button. [Music]. save change [Music]. now go to my website to check the update, so i am going to refresh. wow, the icon has been available here or added here. it's so easy. anyone can do this, like you. thank you for your time to watch this video. if you think this video is helpful, then click on the like button and subscribe to my channel, and for any support or service or download free best shopping by trim, don't forget to visit my website, bestfreeshopifyteamcom. have a nice day bye.

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.

More:Top 8 AliExpress Products To Dropship on Shopify (August 2021)

How to login to Shopify Admin Dashboard.

[Music]. hi everyone, welcome to my youtube channel. so i'm creating my first video. so basically, in this video i'll be explaining how you can log into your shopify admin panel dashboard and how you can manage the backend of the shopify from there. so basically, there are two ways to log into shopify. first one is go to shopifycom and click over here login. if you are being login for the first time, it will may ask for this. to log the store name as well, you would need to add the email address and the password. so basically, this is the shopify admin panel dashboard, from where you can manage your store. the second way to login is enter your stony slash admin and it would directly take you to the login page. this is the preferred way you can try to log in with this. so basically, this is the admin dashboard panel. in the home tab you will get all the latest feeds and notifications. this is the order tab, or the order which are placed in the store will be fall under this. this if you have any draft order. this we have abandoned. checkout, but basically abundant checkout, if is if the customer have added the product to the card, reached the checkout, filled their delivery address and didn't center with the payment. okay, if they have left to your store from in the last step, they will be under abundant checkouts so you can retarget them from here. here come all the products which are in your store. you can mention all the products from here and your customers. you can from the customers tab and all the customers which have made purchase or have subscribed to newsletter. and this is step for analytiks, similar to something google analytiks. this is shopify default analytiks, so you can see all the reports: how many customers have visited the store, what was it, session time, bounce rate, everything and we can wait- source of traffic with the traffic control. all these will fall under analytiks analytiks. this is marketing. if you want to create your marketing campaign, if you want to run your facebook ad or google ads template ads, you can run directly from here and create a campaign. i'll make another video explaining each of these. if you want to create blog posts, you want to change navigation of your store. everything fall in the online store. so this is a basically saved channel. you can have multiple set channels. if you are selling on facebook, you may have a facebook sales channel. you're sending on instagram, you may have instagram channel. you have point of sale, if you have a point of sincere channel, so this is the your online store sales channel. so over here you can customize your theme and over here there is a list of all the theme which are available on your store. you can add blogs and artikles from here and create pages from here. you can add navigation bar and i'll show you what's navigation. so this is the menu i'll just draw. it's called navigation. create a navigation here. if you want to connect your domain, you can connect under here and here at the bottom is the settings. if you want to change your store name, store address, and this will be under general settings. and these are all the additional settings for checkout, for payments, notifications, for user and permissions. you want to add staff accounts or user to your store? you can from here. that just was a simple overview and i'll try to make more detailed video about each of the section. thank you.

More:marketing facebook ads

How to Login to Shopify Tutorial | Easiest Way to Login to Shopify Store Backend

what's up, guys? today we're gonna be toking about how to log in to your Shopify back in panel with ease. now, some of you may have forgotten how to do this because you've probably just have it- your Shopify back-end on your favorites. but what happens when you go to your friend's house or your parents house or something like that, and you log into their browser only to stop and think: what the hell is my login? so in this video, we're gonna be toking about how you can log into your Shopify back in panel through a web browser on your mobile phone and how you can add multiple stores- Chrome, Safari or anything like that that you use to browse the Internet, and what you want to do is, in the search, but at the top, type Shopify login. so generally it will come up in the first search result and what you want to do is click that first one there. so wait for its load. it's one of my old stores and when you get here you want to type the name of your store. so for this example, I created a demo store and we're just gonna be logging into that. so what you want to do is, whatever your store name is, you put that down and put my Shopify along at the end of it. so my demo store thousand, I think, my Shopify comm, and then you want to place your email address. I'm gonna just put the email address that I've registered with us, blow this out for specific reasons, and then for that demo, for that store that you have, you want to put in your password. so there we go, logging in, and we're into this, into your Shopify back-end panel through a web browser, and now we're gonna take a look at log into your Shopify from your mobile phone. now you will need the mobile phone app. for this. you can get the iOS or Android app, depending on what sort of phone you have, whether it's an Android or now an iPhone. you need to head over to the App Store to download this. I'm not going to show you how to download this. I think it's a very straightforward task to do. so let's hop on over to our phone and do that. so I'm currently on my phone now and what I am going to do is click on to the Shopify app and here it's loaded. so I'm going to log in. all you gotta do is press that and the login screen will come up again. so now all you want to do is type in your email address- I've blurred this for security reasons- and then enter your password. we're just logging into the exact same store as before, okay? and then click the login button and it should load up. all right, there we go. we've all loaded up back into our Shopify store. now the last thing that I want to cover is basically, if you want to add another store because you run multiple source- maybe you have, like a general store and a niche store, but you want to see both of them at the same time- all you have to do is click the store button at the bottom tab there at the bottom right and then click your store name at the top and a little drop-down will basically opinion. what you want to do is click a log in to log into existing store. and there we go. now you want to put your email address in for the new store and just doing this again and and the password, and there we go. but I've, this was one of the stores that I used to have. I have since closed down and just didn't want to run it anymore. so, yeah, once, once you've clicked in your store for the other email address and password, you can definitely log in and then to switch between the stores, all you need to do is click my store and then select from the list of stores that are in the drop-down tab under the store tab, and there you have it. now you'll be able to log into your Shopify stores on mobile and add new stores so that you can choose between multiple stores and also desktop browsers, where you may have forgotten the login information.

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.