22 - Our Starter Theme for Shopify is Ready to Clone.
hello and welcome in the previous video,we learn how we can configure lateral,mix and we're back with our Shopify team,and everything is set up here so I have,already pushed the code on github you,can access it under my user name and,then Shopify started him here but before,doing that I'm in this video I will show,you how you can clone it practically and,then I will add the video at the end of,this repo so anyone who will watch this,video in the future this should be able,to add this like practically so let's,see how it is going to work if I come to,the team here this is my current team I,will clone it with a new team and then I,will login to Shopify and then we will,install a team and see how it works,first of all this is the how to use,installation so all you have to do is,just grab this code from or you can just,come to the download and copy it from,here both of them are the same I just,put it there now I will come to my,desktop and from my desktop,I will go to the shop white hats and,here we have the team's here I will,create another folder here and I will,give it a test team name here so this is,going to be a system and inside here I,will open partial to run our comment,here for the gate,you cannot piss the code directly here,or what you have to do is you have to,get clone and then you can test the code,here I might update the repo to get,clone and it just clone my repo here and,this is the Shopify solar team now all,you have to do is just change directly,to Shopify starter team and open it in,your code editor to add some general,sitting to this one so far everything,should be fine,so this is our new team and everything,is here except the country that the ml,is empty if you set your configuration,team configuration like the password the,shop v1 and the API key here and you run,the team watch everything should work,fine and it it should operate everything,unit to the software team but it is not,said earlier this is your responsibility,I will show you how you do this one in,this video so what I will do is I will,grab those codes for,no I will not grab it just I will go to,the shop for admin and I will add it,directly so you'll understand how it,works so here I am in my shop my Shopify,admin there is to it you can upload your,theme here we learned this in the,previous video I will recap it again if,you want to develop your team or bring,any changes your team must have the,configuration here and the configuration,configuration required the team ID and,the password API and your shop ID right,that is all you need to know the shop,URL is fine like you can easily grab it,from here and the password is also you,can grab it from the apps and then,privates which we discussed in the,previous video but how about the team ID,currently we do not have anything here,if you do not have a team here then you,cannot grab any ID one who is you can,duplicate this theme here which you,already have and then grab that ID and,then deploy it I'll show you how you can,do
all right guys so in this video i'm,going to be showing you how you can go,ahead and,customize your debut theme within,shopify so debut theme,is the theme that all shopify stores,start out with,by default when you go ahead and start a,shopify store and if you haven't already,opened your shopify store yet you can,start your 14 day free trial by clicking,the first link in the description,so i figured i'd make this video because,debut theme,is one of the most commonly used themes,because it's the one that all stores,start out with and the view theme,actually looks,really good so right here we can see,that this is what debut theme looks like,when it's first installed with,absolutely nothing filled out,so we can see that we have where our,logo should be,we have a big header right here with,some text we have an image here,we have three images with text below,here we have,a uh empty collection and we have,another,um header type image right here another,wallpaper image,we have some testimonials and we have,three images down here,and then we have the footer so,right now we have a nice little template,but it's blank,so if you're looking to go ahead and,fill out,your um store using debut theme,the first thing you're going to want to,make sure you have is,a few key things so i'm going to bring,up a notepad and just make sure,because before you go ahead and start,the design process you're going to need,a couple things so the first one is,going to be a logo,so i assume you already have a logo at,this point if you're ready to start your,store design but if not,then make sure you get a logo first,because everything else is going to be,based around the logo,and then we're going to have a color,scheme selected,and normally this color scheme is going,to,be derived from colors from your logo,and typically,you're going to use one to two colors,to base your entire store around and,like i said these colors will be derived,from the logo and the next thing we're,going to need,is a couple wallpaper photos,so we can see we're going to need some,photos to go ahead and put back here in,this header,we need some photos to put back here and,this header as well,so if you have any large photos related,to your business,go ahead and upload them to your,computer or,put them all in one folder so we can go,ahead and,use them as backgrounds here and if you,don't you can use,different sites such as pixabay,to find free stock images that you can,go ahead and use,so let's just type in something like,fishing,so if you had a store related to fishing,you could go ahead and just,look for different stock photos here,or maybe you have something related to,yoga,or fitness you can type in a lot,of different niches depending on what,your store is based around,and you can use some of these wallpapers,to go ahead and put back here,now obviously i do think it's better if,you have your own,custom photos but uh you know not,everyone's gonna have that starting out,so if you don't you can go ahead and us
After seeing the first section, I believe you have a general understanding of Webpack Starter Theme theme shopify
Continue the next second section about Webpack Starter Theme theme shopify
Shopify CLI for Theme Development (How to use)
Shopify CLI for Theme Development (How to use)
hey everyone in this video we're going,to talk about shopify cli for themes,shopify cli stands for shopify command,line interface and is the latest,alternative to shopify theme kit,previously shopify cli was a tool that,helped users create and deploy shopify,apps but since the online store 2.0,announcements in june 2021 shopify have,extended the shopify cli to provide new,functions for theme development,including the ability to serve themes,locally,so in this video let's talk about how,the shopify cli works and how to include,it into your theme development workflow,before we get started talking about how,to use the shopify cli for theme,development i want to provide some,context here and talk about where this,tool fits in compared to the other,previous tools for developing shopify,themes,when i first started shopify theme,development back in 2019 there were two,tools available slate and theme kit,i believe it was theme kit that came,first but at shopify unite 2017 shopify,announced something called slate a new,build tool for shopify themes intended,to provide a more developer friendly,scaffold for building themes,slate did have some good points such as,the ability to split up scss into,multiple modular files and update css,changes locally but over time shopify,decided not to maintain the project and,eventually announced that they were,officially ending support for slate in,january 2020. therefore slate is not a,tool i recommend to anyone anymore in my,opinion the only reason to use slate is,if you have to i.e you have an existing,slate project that you're unable to or,unwilling to migrate that left us with,themekit a simple tool for uploading and,downloading theme files from your,shopify store making it possible to work,on themes locally,and now the latest option which is to,use the shopify cli for theme,development,chances are if you're watching this,video close to the release date you,might be using shopify themekit as,mentioned shopify themekit is a simple,tool for uploading and downloading theme,code from themes already hosted on your,shopify store we can do a one-time,download from themekit or a one-time,upload from themekit or we can run the,command theme watch and allow themekit,to detect and upload changes to the,theme as it exists on the shopify store,as soon as they happen for a full,tutorial on shopify themekit check out,the lesson in my skillshare class,shopify theme development how to build,and customize your own online store the,shopify cli by comparison is a bit,different with shopify cli you first,connect the tool to your online store by,running shopify login and from that,point you can begin to serve the theme,code you have on your computer locally,running shopify theme serve the cli will,take your theme code and generate a,development theme this development theme,will come with a theme id and a theme,editor but it won't exist in your,shopify store's theme library and it,will disappear after you run shopify,logout,running these s
After seeing the second section, I believe you have a general understanding of Webpack Starter Theme theme shopify
Continue the next third section about Webpack Starter Theme theme shopify
The Best Shopify Theme In 2022 (Industry experts have voted)
The Best Shopify Theme In 2022 (Industry experts have voted)
which one is the best shopify theme in,2022,together with our good friends at,storetasker we wanted to find out,exactly that so over the last week we,interviewed various experts developers,agency owners from our network and from,storetasker's awesome freelancing,platform link in the description,and to our surprise we actually found,out way more than we expected so if you,listen to this you will not only,discover which one was the most upvoted,theme but you will also learn what makes,a theme great from a merchant's,perspective like what to pay attention,to when picking a good theme and you,will also learn what makes other,developers want to use your theme which,is a very interesting angle if you want,to build themes yourself and then,potentially sell them on the theme store,so here's what we discovered,all right patrick i'm super excited that,you're here today and yeah i actually,can't believe that we didn't do this,earlier um so would you like to,introduce yourself really quick,thank you jan for the invite um yeah my,name is patrick i'm the founder of the,agency eshop guide we are the fastest,growing agency in germany uh 2 million,in revenue 35 people,it's crazy people and we love shopify,and i'm happy to talk about the themes,that's awesome um okay maybe before we,get there would you also like to share,one or two sentences about the clients,that you typically work with this is,like smaller businesses larger,businesses yeah just,uh yes so we usually work with,existing businesses that,migrate to shopify,on woocommerce shopper or whatever,or with businesses who come,traditionally from a b2b space um and,who are dipping their toes into the d2c,world and just need their first job,rarely we work with real real startups,because that's usually,for them it doesn't make sense to work,with a with an established agency,because of the pricing,okay that's great and yeah as you know,today we wanted to talk about themes um,so you also do quite a few store setups,per month um so the question would be do,you guys have a favorite theme,yes um,so there are trends uh it's it's,actually quite quite funny uh from turbo,to prestige but now our favorite theme,is impulse um from archetype,um,the the story behind archetype is that,uh people who used to work for shopify,actually and um they really built the,themes,that you want them to build they they're,just awesome and they have good support,they've um they're,rather um fast in terms of performance,the themes they have a lot of um,features and they're usually,like right on top of the technological,curve what's possible with the themes,however at the moment because you you're,probably aware of that uh shopify 2.0,came out and with that um,shopify released a new standard theme,don,which really breaks records in terms of,performance and speed,and we don't see those numbers yet with,the um,paid themes,also not with imports,okay so yeah let me just wrap this up so,okay so you basically have,two favorite themes let's say impul
After seeing the third section, I believe you have a general understanding of Webpack Starter Theme theme shopify
Continue the next fourth section about Webpack Starter Theme theme shopify
The Best Shopify Themes for Your Online Store in 2022
The Best Shopify Themes for Your Online Store in 2022
in today's video i'm going to show you,how you can make one of the best online,stores out there with ecommerce themes,that are a designed to be fast and also,high converting so,shopify has rolled out five new free,themes and 65 updated paid themes that,work with online store 2.0 features,literally so exciting so i'm going to,take you guys through some incredible,shopify themes so that you guys can,decide which one is right for your,business in 2022. each one of these,offers industry leading performance and,deep customization but can we just get a,little sneak peek here okay let's look,at some of these amazing themes so first,of all look at this one this one's,called context and i just feel like it,would be perfect for someone who is,starting like a clothing store but maybe,wants a bit more of an editorial vibe,and then this one over here look at this,one this one's called loft and i feel,like it would be so good for anyone,selling home goods so that's just a,little preview but definitely stick,around till the end of this video,because i'm going to go through a ton of,themes and just discuss the specifics on,who they're good for and how they can,work for you and your business,okay guys so what exactly is a theme so,if you think about it themes are kind of,like the skeleton of your online store,it's just going to define what your,store is going to look like so for,example,in this theme over here,this has one main image for the banner,but if you look at this one it's going,to allow you to put two images for the,banner and a theme is also going to,define some of the functionality of your,store so for example when i click the,cart on this theme it pops up as a,sidebar and then when i click the cart,on this theme it's just going to take up,the whole page,so if you guys don't already know when,you create your online store with,shopify you can choose between either,free themes or premium themes and it's,really nice because there are more and,more free themes that are being released,recently so there's tons of options,there and then as of now there's also 60,paid themes and you can find a theme,that works really easily for yourself,because you can narrow it down by,industry price and then just basically,find the design that you're after okay i,know you guys are wondering are shopify,themes better than other themes out,there and i just want to say really,quickly just want to say this from the,jump shopify themes,are,amazing they're amazing first of all if,you are not tech savvy shopify themes,were going to be perfect for you because,all of the features that you need,already come built into your theme,you're probably,never going to need to hire developer,because 99 if not 100 of what you need,already comes built into your theme,but but if you are a perfectionist like,me and let's say you do want to do like,a little tweaks and like edit,you can edit your store without touching,any code so let's just look at my screen,here for one sec because i actually do,th
After seeing the fourth section, I believe you have a general understanding of Webpack Starter Theme theme shopify
Continue the next fifth section about Webpack Starter Theme theme shopify
Shopify Theme Development Crash Course - Shopify 1.0, Theme Kit, Node, Gulp, SASS, Git & VS Code
Shopify Theme Development Crash Course - Shopify 1.0, Theme Kit, Node, Gulp, SASS, Git & VS Code
what's up guys,good morning good morning,hopefully you guys could hear me okay if,not let me know in the chat,so if you're if you're here hanging out,this morning thanks so much for showing,up I really appreciate it I really,didn't think anybody was gonna gonna,come and hang out oh one second got some,audio delay there I I really didn't,think anybody was gonna come hang out,it's been a while since I've done one of,these live streams,um but I'm really excited uh because,I've got a couple of proposals out right,now actually for a few different Shopify,businesses,um and one of the things that I realized,kind of looking into what had changed,since the last time I had worked on a,Shopify theme,um is,uh there's a lot of development changes,that happened uh for example uh end of,2021 or end of uh January 2020,um Shopify dropped,um support for slate which was how they,used to be able to uh do kind of that,local development workflow,um so now they strictly use this tool,that they have called theme kit and,honestly it's I it's something that I've,never really played with something I,haven't really tried so I really wanted,to kind of dive in uh to figure out how,we could actually go from having,absolutely no Shopify store uh no,account nothing like that to actually,being able to work on a theme and push,that theme up,um to Shopify and hopefully set up some,sort of uh development workflow that,kind of makes sense where the client can,have their live website and we can have,a kind of uh development site that we're,working on pushing changes to and and,checking uh them before we actually go,and and serve them live uh so that's,what we're going to be diving into today,uh I'm gonna if you guys don't know who,I am my name is David Martin I am a web,designer and a web developer uh I'm also,an agency owner I own the agency ux,hacks we help our clients leverage,really good ux practice to hack into,their traffic's potential and boost,their conversions so,that's kind of a little bit about me,um I'd love to know who's here in the,chat feel free to you know drop your,name uh in the chat let me know what you,guys are are going to be working on,today and if you guys want to follow,along,um,I dropped some documentation in the chat,as well we're gonna be going through,that documentation but first uh let's go,ahead and jump into my browser,and we're just gonna go and set up a,Shopify account so this is the one step,that I did prior just to make sure that,uh you guys wouldn't have to pay for,anything because,as a developer I don't want to bring on,any additional costs that I don't have,to bring on if I can avoid it,um what's great about Shopify is first,of all they have a 14 day free trial if,you just want to set up the the regular,trial,but they also have uh what's called a,partner's account,which you can go to by visiting,partners.shopify.com and what this will,do is essentially allow you to create,development sites right so as many,development sites as you need to,obviousl
After seeing the fifth section, I believe you have a general understanding of Webpack Starter Theme theme shopify
Continue the next sixth section about Webpack Starter Theme theme shopify
How To Use Javascript in Shopify Themes
How To Use Javascript in Shopify Themes
hey guys is your boy joe back at it,again codingphase.com in this video we,are going to be talking about,how to use javascript in your shopify,themes okay,now this is part of the course shopify,theme developer which is pretty much a,bundle of courses that teach you,everything that you need to know about,shopify okay i've already taught a,couple of the basic stuff inside of the,shopify theme development course now we,have the shopify online store 2.0 which,is basically a continuation of this,course,but with all of the new features and all,of the new ways of creating themes in,2021 2022 2023 2024 2025 okay so pretty,much everything that you're gonna be,seeing in the ecosystem shopify is,inside of this course okay so let's get,started by taking a look at this theme,that we are creating now this theme is,basically like a,child theme or a copy or like a starter,from the dawn theme that was released by,shopify which is open source which,allows us to use their their code and,use what they have already created um,but basically if we look over here this,is what shopify is using okay and this,is the cart.js,and this is what controls the cart,system okay now in here if we take a,look we can notice that they're using,class based uh components right and we,could say these are actually custom,elements now for those of you guys that,have never seen this before uh think,about this this is like react components,but natively okay with the browser okay,this is all part of vanilla javascript,like you don't need a framework to do,this again you can literally go in on,mozilla and check this out okay you,don't have to use webpack you don't have,to use any of that you can just write,your javascript and pretty much define,some custom elements okay,a few years ago i actually went in and,created a course on polymer and we,talked a lot about this uh because you,know in the future or supposedly in the,future uh we were supposed to all be,using,custom elements okay did that happen i,don't know some people use it some,people are too comfortable with react,and viewing angular okay so it's gonna,be hard for for people to take away,their their front-end frameworks even,though the you know the the browser can,already do a lot of the things that we,use frameworks for now why does shopify,decided to go with this route well,actually it's very simple the main,reason is because it just makes your,website way faster okay,now imagine this if you are using,something let's say like react right and,you are using,i don't know,some library out there like some,component library uh like let me show,you guys an example,like this one materialize i see a lot of,people that use materialize shout out to,chris shawn who love material ui okay,but if you're using this type of of,libraries right uh you're downloading,not only this component as a dependency,but then you also have react as a,dependency that you have react dom as a,dependency then you have whatever,dependencies that this material ui needs,
After seeing the sixth section, I believe you have a general understanding of Webpack Starter Theme theme shopify
Continue the next seventh section about Webpack Starter Theme theme shopify
Shopify Theme Development: LIQUID Programming For Beginners (Tutorial)
Shopify Theme Development: LIQUID Programming For Beginners (Tutorial)
whether you're a shopify developer or,not if you use shopify chances are,you'll encounter your store's source,code,or your shopify store source code which,is mostly written in html,css javascript and of course liquid,if you're a developer you probably know,already what html is css,is javascript s but liquid,what is liquid is that something that,you,lick lick with,that was not a good joke jokes aside in,this video we're going to be talking,about liquid programming so you can,understand what is happening behind the,scenes of your shopify store,stay tuned for that,before i start this video this video is,sponsored by me if you're interested to,learn how to create shopify themes,you can enroll to my course shopify,theme development course,and in that course i will teach you how,to create a shopify theme from scratch,i'll teach you anything that you need to,know to create a functional shopify,theme if you're interested i'll put the,link in the video description below and,use the coupon code you can use the,coupon code,liquid to get 30 off of your purchase,all right let's go back to the video so,before we start learning liquid or how,to code using liquid,let's understand first what is liquid so,liquid is a template language created by,shopify and is written mostly in ruby,it is mainly used for controlling or,maintaining what is happening to your,what is happening in front end or,basically,is um it controls the flow of your,shopify store,so you can consider liquid as a back-end,programming language,html css javascript are what you're,seeing in your browser in your front end,and then liquid is what's working or,basically liquid is the guy who works,behind the scene,to control or to maintain your shopify,store,you can think of it like a cereal bowl,so basically the serial is the,html css and javascript and then the,milk that you pour in here,is basically liquid because,it is it's liquid so you mix them,and voila you have a cereal bowl you,have a shopify store,i think the milk is inspired on a,serious note though if you take a look,at your development store or your,shopify stores code editor,you will see there are a bunch of codes,that starts with curly braces,not the json codes what i'm trying to,say is the double curly braces or curly,braces followed by percentage symbols,those codes are liquid codes but don't,worry we're going to talk about more of,this later on so you get an idea what,are they so first of all liquid codes,are categorized in three,parts objects filters,and then tags,so objects is basically what you use to,tell shopify or,liquid what to render or display in,front,and so to put this simply basically,objects is like an echo statement from,php,or c out of c plus plus so you're,basically,telling shopify if you use an object,you're basically,rendering the value of that object,so say for example a variable so you can,use,that variable as an object and then,shopify will think of it or liquid will,think of it as an object and then,oh i will rende
After seeing the seventh section, I believe you have a general understanding of Webpack Starter Theme theme shopify
Continue the next eighth section about Webpack Starter Theme theme shopify
How to use Shopify CLI 3.0 for Theme Development and deploy themes to different stores.
How to use Shopify CLI 3.0 for Theme Development and deploy themes to different stores.
Globe again in today's video we're going,to speak about Shopify CLI 3.6 3.2,whatever you want to call it and before,we get started I just want you to know,that I have tried it I have give it a,shot and it's really awesome and you,will see we will get to all the features,in a second so bear with me and you will,also need to know that the old version,will no longer be supported until uh,like I think it's 31st May of next year,and usually some people still use 10K,because well some Futures teamkit has,some advantage over the old CLI version,especially for team development but now,with 3.x it's really you will see that I,think everyone will make great to 3.6,once once I show these Futures so yeah,I'm really really excited because you,will see all the features in this in a,second,but before we get started with the code,you will actually need to migrate to the,newest version,and to migrate they have if you click,Shopify CRI in the documentation they,have a really easy migration guide and,especially if you are on Mac since,Michael you have to do if you have,installed it with Homebrew all you have,to do is really click home brew upgrade,Shopify CLI if you have never installed,Shopify CLI in the first place all you,have to do is just Brew I think add,Shopify CLI and it will go to it will,install the latest version which is,um which is 3.22 for me so yeah,if you are on other uh machines like,Linux or revi or,excuse me or Windows you probably have,installed it with Gem and if you have to,if you had installed it with gem you,need to uninstall the old implementation,and install the new the new,implementation using uh using npm or,yarn or pnpm whatever you like since,it's now hosted on npm because it's a,typescript package it's a node package,and it's no longer a ruby package since,the newest version is actually,built using a typescript the old version,is using Ruby the newest version if you,if we check the GitHub you will see it's,Rewritten in typescript it's not fully,Rewritten in typescript it's actually a,wrapper especially for the teams part,it's a wrapper over the typescript,implementation over the old Rabbi,implementation sorry so yeah,uh now all you have to do is just click,here on global ads at Shopify and it,will add Shopify you will need to,install the core package which is,shopify.cr day and then install the,plugin yeah it's a plugin uh you will,see how the Shopify team commands all,are a plugin it's actually a plugin that,is added to the core CLI to support,Shopify team Commons so now if I,actually once you do that you will have,the latest version,and once you do that,um you can also still use the old,version of the Shopify CLI uh but you,will have to call it to change the pads,especially if you are if you have,installed it with Homebrew you will have,to change the naming using the pads like,like we do if you are if you're ever,used python for example we have python 2,and python for python 3. that's that's,reminds me of that,um the old implementat
After seeing the eighth section, I believe you have a general understanding of Webpack Starter Theme theme shopify
Continue the next ninth section about Webpack Starter Theme theme shopify
08 - Tailwind CSS with Shopify Theme CLI Store 2.0 and Webpack
08 - Tailwind CSS with Shopify Theme CLI Store 2.0 and Webpack
hey welcome to another video in this,video we will configure kelvin css with,shopify team cli and alpine gs so this,is a configuration video and it might,get longer but it is very important so,you understand how everything is working,so far now shop for cli will watch for,any changes and it will set up our,development team now here is the thing,we build at our team based on television,css and it's require a compiler now i,get a lot of question or people like ask,me why you use television you can choose,your own framework like bootstrap windy,css or any other first of all tailwind,is very popular a lot of people use it,not only that version three of them has,a great feature called jit which was,inspired by vnd css now jit uh what it,does is it is going to generate your css,based on html5 imagine you have a,section and in that section in shopify,you have used 10 television css,classes and it is going to scan that it,will just create 10 css classes for you,it will not use all the television like,um,css uh classes that already have in the,television file i know television file,is more than two megabytes so that's why,jit is a great for shopify team,development especially when you need a,speed and optimization so it is a great,tool it is a great library for building,a shopify team so that is one of the,reason and throughout the course i will,tell you more and a practical example of,how easy it is to migrate some section,of your team from one team to another,team i have worked with a lot of teams,and this is the best like solution so,far so in this video we will configure,um uh television css alpine js and shop,with shopify um cli team so here is the,thing we have to do if we go to getting,started on television css there are,different options,so you can use tailwind cli which you,can install in here and you can use,prosthesis you can if you have any other,framework there are some other options,basically here is what we do,we just configure,a watcher for tailwind css,so the watcher is going to watch for any,changes in our liquid file as soon as,they see the changes it is going to,generate a css file for us that's all we,need to configure but here is the thing,we are not only writing css code we are,also writing javascript code,in that case the shop the tailwind cli,will not do the trick for us right it is,only for css great but we need,javascript also we might write es6 code,we might include some javascript slider,so we need a compiler to compile css as,well as javascript we can use real pack,but to learn webpack it will take some,time to configure it understanding how,it works although it is really easy,when you go to the documentation but,there is a tool called laravel mix and,it is an elegant wrapper around webpack,for the 80 percent use cases so what,larvalmix does,level mix once you install it it will,ask you for a source and an output it,says give me your css or scss or,javascript i will compile it to the,directory you want me to do that is all,th
Congratulation! You bave finally finished reading Webpack Starter Theme theme shopify and believe you bave enougb understending Webpack Starter Theme theme shopify
No difficulty
