ap anywhere shopify responsive theme

today as you can see from the title we,are doing a shopify 2.0 store coding,tutorial where we are where in,we are going to build on the dawn theme,which comes,as a starter theme with shopify in this,new version of 2.0 and in this part this,part one of the series we are going to,work on the setup and i'm going to,introduce you to shopify and the store,so,not a pre-warning but before we get,started while this course will delve,into,themes and customizing them and what,that means this is also a coding heavy,course so as you can see,let's look at this we are going to be,looking through,the dawn,theme code so this is the theme liquid,and we can see,these are,uh templates that's not i'm trying to,give an example of how like complicated,it can get um there are so many,different css files to kind of mull,through,we have all of these snippets,uh we're not really going to delve into,snippets so much,what we're going to really look at are,templates,sections and let's look at a section,yeah so again this is can be complex,we're kind of just gonna,go on the surface of this this is also,i'm kind of dipping my toes in and i,kind of want to show what i learned and,have us kind of learn together and so,that's the purpose of this tutorial,series and i'm actually i'm going to,keep explaining the purpose so this is,how the dawn store starts,right and i can go back to my dashboard,again i'm going i'm going kind of fast,but i'm going to go through this with,much more depth so if i go here to dawn,and click customize i just want to show,you what a theme,is all about and how we can customize it,in this store 2.0,i never actually used shopify before 2.0,so i'm not sure of all of the changes,but i do know a new change is kind of,just like how easy it is,not the making of the template but once,you have a template in place how easy it,kind of should be to just add in,like the top image banner i can just,select an image let's see let's add that,in,and boom and then i can talk about my,brand here,and we can go back from image banner,and i can write,hey there,you know and i can save all of this,and it's just there's a lot of uh,ability to,uh customize i can even add more,sections so i could have another image,banner at the bottom,yeah and then i could even in this image,banner maybe i don't want this overlay i,don't want the buttons there,yeah so i can just have the image,okay so we are going to go from this,dawn theme once again so kind of uh,the base the basic,theme that just comes pre-installed,in shopify so you're going to take this,theme and we're going to elevate it so,here as you can see i have a similar,very similar structure but i'm using a,different typography,i think i yeah the colors again you can,change within the theme,but there are other ways within the css,maybe we want to customize some of the,colors,i also added it so there is a video,section but i made sure the video,the youtube video could be auto played,as soon as you click i don't want to,blast the youtube video on you,there's a featured product section built,into the dawn theme but it actually for,some reason doesn't work on the index,page so we're going to fix that in this,version and we're going to add a custom,section there's my beautiful face um,we're going to add a custom section at,the bottom where you can add an image in,okay,so that's kind of taking care,of my introduction hopefully i haven't,lost you maybe i've peaked your interest,with my,ferocity uh yeah so again,that's our goal to go from,this to this and as you can see we also,have different custom,icons there's a lot of functionality,that i wanted to keep i also knew so,yeah so i knew that i also wanted to,customize this uh this is clear packages,i am claire,the idea behind clear packages is it's,curated care packages that someone can,order for a loved one so maybe and these,are all like kind of just stock photos,so maybe you want to order the birthday,box for someone you can click in we can,add it to cart and i also i want to,change certain things like i want this,button not to be black text what if it,was white over there so we're going to,also upgrade this a little bit too i can,go to my cart,as you can see the cart now has one,because i have one item and then i added,this cart message in so i'll show you,how i did that because that does not,come,built in with this theme,so and then also here i am,uh showing the theme but it actually,this is how it comes out of the box so,right now this would be a store that,doesn't have any products so i also had,to upload the products set the prices,all that stuff so we're gonna go through,all of that so this will be a you know,like a basic to start with tutorial and,then we'll delve more into the weeds,so with that all said,i exhausted myself um yeah and i think i,also opened up this uh store about,online store 2.0 for shopify what it,means so we have some upgrade theme,architecture flexible store content,enhancements to the theme editor new,developer tools a new reference theme,shop before the theme store reopening,updating your themes and apps okay and,just another um comparison this is like,the pre 2.0 starter and as you can see,they're all liquid files here,in templates and now with 2.0,in the template section boopadoo as you,can see templates closed templates open,we have json files so we're still,serving index is still the front first,front page but it's,just a different way of working,so wherein this index,would show this is like a very base,thing so we're showing all the products,uh with for,we're looping through the products,within the collection only showing four,of them in here the index is actually,made of sections,and they're delineated here i'm going,through this again very fast and we are,going to go much more thorough i just,wanted to give you an overview i hope,this was thorough enough i'll include a,link to this so you can learn more about,shopify 2.0 and what it means,another really great thing about,shopify 2.0 is say,or about like the shopify,uh,website is they have really great,documentation,so for example they go into,you know we can listen you can go right,here to the documentation i specifically,wanted to go,let's do command f,json so yeah so here is something that i,was i'm still learning how to implement,fully um with creating,different uh the templating and the,different structure so you can actually,go the developer documentation on json,so you don't even need me,just go,into the shopify docs uh yeah anyway,i'll include links to this and we're,gonna actually go through some of the,docs together,and,yeah so i think where we'll start,is with setup,so,to set up we are going to actually let's,just go to shopify.com and i'll explain,from here,okay so for the partner program we're,going to scroll all the way to the,bottom we're going to go to partner,program,and through the partner program,you can create apps,build or migrate stores,and that's actually what we are going to,be doing so the partner program is free,which is great and through here we can,actually create our development stores,and use our,and use our development environments,we're going to look through,the shopify docs,and we are going to,init and create,this dawn theme,and then we're going to customize it so,let's jump into that,okay,so,so from here,please enter your email address,and join the partner program if you are,not already a partner,and now from here let's see,if i can get to my partner store,great,so i'm just going to log in,and here's where i get to so this is my,dashboard i think this is the education,to get started we are going to go to,stores,we are going to add a store,and we're going to add a development,store,and then,fill out all this information here,and then join me again,or as you can see my store is ready to,go,so now we're just gonna wait for it to,load up a little bit i named my store,demo store clear codes,it has to be a unique shopify store so,just play around you can't take that,name i'm sorry,okay so now we're in the dashboard this,might look a little familiar when i just,like sped through this dashboard earlier,so we're at home,we have orders,we have products,we can add products here what have you,and then we also have our online store,you can preview it without,any of your products what have you,and,the theme they gave us is debut that's,really interesting i thought it started,with um,dawn but i guess it starts with the,debut which is,fine,okay because we are going to be going to,dawn again and then customizing it,so let's go back to shopify.com,it's gonna be our new uh favorite site,scroll again all the way to the bottom,and we are going to go to the shopify,help center,and from here we're going to scroll,again all the way the bottom where it,says designing themes learn about themes,so they have it all laid out here which,is great so we're going to go to getting,started,and go to the overview,i would recommend you know reading this,we're gonna you know go through this,again together,but uh yeah it's broken down which is,great and they kind of explain there's a,layout file template sections and blocks,and we're going to go through this in,the code,so let's create a theme let's follow,their directions,so,again it says if you want a development,store theme you can create or log into,the shopify partner account so if you,want more information on how to do that,definitely,go here and because i did speed through,that a little bit,all right so the first thing we need to,do is install shopify client so we're,going to open up our terminal,as you can see i'm actually running my,other thing here it got mad at me for a,bunch of things i learned through,the process and the errors we got three,navigated through so actually i did,control c to stop this process,so i already installed shopify client,but i can show you let's actually,boop,so i have homebrew installed and i have,a mac laptop,so i used homebrew so definitely install,that if you don't have it already,installed and then brew tap shopify,shopify brew install shopify client,okay so i already have the shopify cly,um installed,so i'm gonna do,i'm going to get out of where i am,um i usually put things,oops if i can spell,uh like for tutorials on my desktop but,maybe like if you want to put in your,documents wherever you put files that,are,you know that you want to grab from so,i'm going to cd my doc my desktop i'm,going to make,a directory called uh,youtube demo,i'm getting a cd,into youtube,demo,and then i'm going to,shopify theme init,and,then i'm gonna be prompted to add a name,for my theme,so let's do that,so let's do,shopify,loop,theme,init,theme name so what do we want to call,this theme,let's call it,um,dawn,2.0,okay so now that's there so now i'm,gonna cd,dawn,2.0,okay,and,now i have now that i'm in the directory,of my theme,which let's see let me actually,open that up,there we go,okay so let's,put that back there,so i have a lot of things open but i,usually use visual studio code as my,code editor so i'm going to drag that,down to visual studio code to open it up,let's make sure we have everything in,there,let's look at the index just to check,yep that looks like dawn okay cool so um,when you do shopify theme init it's just,going to yep make sense cloned on to,your computer,all right so now,this is where it's important to remember,your store,so,my store i'm just going to copy it here,did not mean to do that,okay i'm going to copy from there before,the admin panel,and actually we can look at what the,store looks like,okay so this is what our demo store,clear codes looks like right now,okay cool,again let's go back here we're gonna do,shopify login dash dash store and then,the name of your store that was provided,when you created the app so let's go,back here so while you're in the,directory,do,shopify,login,store i'm going to paste in my store,then i think it's going to prompt me in,a window,okay actually the first time i did this,it actually double checked that i was a,part of the partner organization this is,how this is great,so demo clear codes is a part of partner,organization clear packages that's what,i call to my organization don't worry,about it,um so now we can actually live preview,our theme we go shopify,theme,serve,oh this happened to me once before,um,what i actually had to do,give me a second let's clear,my cookies,that's,so annoying,but i'm glad we ran into this problem,together let me actually you know what,i'm going to do,it could be because i've been working on,another site for so much,okay i logged out on my site and then,i'm going to log in,this is what i wanted it to prompt me,so i'm gonna,continue with my account okay so now i'm,admitted successfully let's hope that,this works,okay cool,shopify theme serve,all right,i really wish this wasn't the problem,what i'm gonna have to do,is go to more tools clear browsing data,and cookies and other site data clear,okay so now that we did that let's try,this again,let's go,shopify login,see it shouldn't have just did that,shopify log out,shopify login,now it's going to prompt me to log in,again,facing this,uh error,i looked it up,and it said to log in through admin once,which i had never done,so let's double check let's fingers,cross this,works okay so let's try,serving i doubt that'll work let's,i'm using the arrow keys to get what i,did,okay login demo store this is good,okay,yay okay so you have to log into your,admin panel once,um who knew maybe before clearing my,cookies then,i could have done this now to log into,all my stuff again but this takes a,little while to sync,and then it's going to give us some,options on where we can serve it,so let's just let this do its thing,it's counting up,wow that was a whole that's a whole,process but i think that's good though,we went through that together because,maybe you faced the same error and i'll,also include a link to this,github,i think ticket that someone opened about,not being authorized and really it was,that i needed to go to the store,type in admin and log in that way,so go to the admin panel one time,so now we all know that together,okay so as you can see i can open it at,this link,and then it has a password so you need,to know your password,um let's see,see store password,okay this is my password skung,so you can enter that in,and again to find my password,i was in online store preferences,and scroll down to password i click,something else but that's another way of,getting there,okay cool so it's here and then you can,also share this with someone,so i could send it and i think there's a,week where i can share it,so you can be,working on it you want to share it with,your team with a friend like ask them,for advice and then you can also the,theme directly that you're building you,can customize at the same time,so i can again like i showed before i,can add an image banner,oh i don't have any,images here,let's do the footer background,yay there i am again beautiful okay i'm,going to end this part here i'm glad we,faced that error together because now,you know how to solve it hopefully and,i'll include also the docs below,kind of annoying error it took me a,while actually last time,this was much easier so now we know this,time around,and,yeah i hope you learned something i'm,excited to delve deeper into the files,into,the code with you in the next sections,and yeah we're going to make a beautiful,site together all right,so,yeah hope to see you in the next,sections,and have a great day bye,you

Congratulation! You bave finally finished reading ap anywhere shopify responsive theme and believe you bave enougb understending ap anywhere shopify responsive theme

Come on and read the rest of the article!