Local theme shopify

Find out your best Shopify theme and theme on shopify in less than two minutes

Find Shopify Theme — it's free
No difficulty
No complicated process
Track competitor's stores
BACK

How to Set Up a Local Theme Development Workflow

你们好 我叫Liam Griffin,是Shopify开发者社区经理,今天我们将展示 如何利用Shopify Theme Kit开发者工具,在你们的电脑上本地编辑Shopify模板,让你们对这些模板文件做出改变,并实时推送给店面,那咱们开始吧,Shopify Theme Kit工具已经推出一阵子了,它帮助了许多开发者 他们可能从零开始构建模板,或者在客户的商店工作,或者在现有模板的基础上构建定制模板,所以我们只是想强调这个工具,可供任何开发者用在他们的工作流上,如果你们要利用模板 这个工具极为有用,基本上 Theme Kit能让你们,从Shopify商店里下载模板,作出修改 再把这些修改 实时传回给Shopify商店,使用像Theme Kit这种工具的一大好处是,它允许你们实现自己的工作流,所以如果你们使用自己选择的文本编辑器,我会就不同的文本编辑器 查看相应的扩展和插件选项,但它允许你们灵活对待,你们习惯的个人开发工作流,如果你们的公司或团队有特殊的工作流,你们能把它们集成到Shopify模板中,你们也能在不同的环境中工作,如果你们的工作流包括测试和生产方式,你们就能把改变推送给使用它的不同环境,Theme Kit适用于任何Shopify商店,就我而言 在这个演示中,我从我的合作伙伴控制面板上 创建了一个合作者商店,你们也可以在合作者或许能访问的商店上使用它,或者你们可以就在一个常规创建的 Shopify商店上使用它,如果你们想的话 也可以在开发者预览商店上使用它,除了实时商店 我们也能在Terminal上应用它,如果你们在用一个不同的应用程序,因为我觉得如果是命令行界面工具,你们就需要一个命令行工具,所以可能你们在用iTerm,在这里 我使用Terminal,我们也会用一个文本编辑器 就我而言 我用的是VS Code,但你们可以用Sublime、Atom 或其他你们想用的任何编辑器,只要它允许你们编辑我们将下载的Liquid文档,在你们使用的Shopify商店,你们当然也需要安装一个模板,就我而言 我会用Debut,这是Debut的新版本,我刚添加了几个示例产品,但这只是我们要使用的预安装Debut模板,那么 一旦你们有了所有这些资源,我们要着眼的第一件事 就是如何安装Theme Kit,取决于你们使用的操作系统,你们会有不同的安装选项,我推荐访问 shopify.github.io/themekit,查阅针对你们个体情况的安装指南,但我会把它们挨个演示一遍,让你们对安装有个大致了解,如果你们的操作系统是Mac OS 可以使用Homebrew安装,你们可以运行这两个命令,一旦你们运行了它们并安装了依赖项,就能开始使用Theme Kit,Windows的流程与此相似 你们可以使用Chocolatey软件包管理器,仅凭一个简单命令来安装Theme Kit,在Linux上 你们可以使用curl命令,来安装并自动下载适合你们的最新版Theme Kit,这里还有手动安装选项,供你们将安装软件包下载到电脑上并在本地运行,关于下载选项 你们也可以进行进一步了解,一旦你们下载了Theme Kit,就能开始在你们的…在我这里是Terminal上,运行命令 无论你们在用什么命令行,比如 我可以开始运行“主题帮助”,这会给我弹出一列 我们可以用的命令、标志和不同选项,我们今天会重点关注这个get(“获取”)命令,它允许我们将模板下载到自己的设备上 并进行配置和编辑,我们稍后也会说明Watch(“查看”)命令,但也别忘了了解 deploy(“部署”)和new(“新建”)命令,它们也很重要且有趣,如果你们从零开始创建模板 就能创建一个空模板,一个非常基础的模板 然后再开始往上添加东西,在我们开始运行任何命令之前 特别是“获取”命令,我们还需要从我们的网店上获取一些信息,这样在我们电脑上运行的Theme Kit,才能和我们现有的商店交流,以及特别和我们的Debut模板交流,那么 如果我们查看要使用的命令描述,“获取”会是关键命令,我们需要几个元素才能完成这个命令,需要API密码,商店标识符 还有模板ID(标识符),有了这三点信息 我们就能创建配置文件,基本上 它会成为我们电脑上Theme Kit 和这个网店之间的桥梁,正如我所提到的 第一点信息是API密钥 或者说API密码,为了创建它 我们需要 在Shopify后台创建一个私人应用,你们可以直接从后台创建私人应用,这些是专门和这个商店绑定的应用,如果我们进入“应用” 点击“管理私人应用”,我们就能直接从这里创建一个私人应用,如果你们点击“创建新私人应用” 你们可以给这个私人应用起个名字,我就叫它"testing-themekit",我添加一个示例邮箱,但这个私人应用最重要的部分,是我们给予它的权限,我们想给予它 查看/获取/阅读模板文档的权利,并在它上面编辑/写的权利,如果我们要查看那些目前未启用的权限,我们要找和模板相关的权限,我们一直向下滑 找到和模板相关的权限,在这里 我们可以设置 查看并管理模板和有用信息的权限,如果我们把它从“禁止访问”改成“允许读写”,这意味着我们创建的API,能查看并编辑与此模板相关的 我们的模板和文档,我们开启这些权限后,我们只需要保存 就能创建此应用,这会给我们所需的API密码,如果我们下滑到我们输入的细节下方,你们会看到这里的API密钥 API密码,我们需要的就是这个密码,我要将它复制到剪贴板中,然后粘贴到我用来记录各种凭证的文档,之后出于安全考量会将其清零,现在我已经添加了API密码,下面需要获取商店ID和模板ID,商店ID其实是最容易获取的信息,本质上就是URL,域名的这个部分,它包含了独特的商店名 和myshopify.com这部分域名,这就是我的商店ID,输入进来,所有这些信息都很容易掌握到了 下面要获取模板ID,可以运行一个Theme Kit命令,这个命令会列出 和这个商店相关联的所有模板ID,我就要运行这个theme get--list命令,这会列出和这个商店相关联的所有模板,我只有一个实时Debut模板,所以希望当我运行这个命令时 它会给我相关信息,我就把这个命令贴在Terminal里,希望它能正确运行,好 就像你们看到的这样,它在告诉我我的商店里有一个模板,就是目前运行的Debut模板 还有个唯一标示符,同样我要把它贴到我的记事本里,我还会给你们展示 一种可以从商店获取模板ID的方法,你们进入网店,点击“自定义”来进入网店编辑器,你们在顶端地址栏,就能看到 "themes"和"editor"之间的这段数字,这其实就是模板ID,你们能看到它以533结尾,和我们在Theme Kit里 运行那条命令得到的结果一致,这是获取模板ID的另一种方法,现在我们已经集齐了所有的信息,我们可以开始创建 网店和Theme Kit之间的连结了,我们接下来要运行的命令又是“获取”命令,但这次包含了我们获取的所有信息,API密码 我把这个添加进去,还有商店ID,以及模板ID,你们看看这些命令 我们没有囊括方括号的部分,现在我已经准备好了命令,但我需要确保当我运行这个命令时,是在一个文件夹里运行,所有模板文件都安装在了那里,就我而言 我

The above is a brief introduction to Local theme shopify

Let's move on to the first section of Local theme shopify

Shopify Themes: How to setup and edit locally

Shopify Themes: How to setup and edit locally

as it can really improve your,productivity one of the benefits of,setting up your theme locally is that um,offline,which i think is really neat okay so,before we get started make sure you have,ruby and get cli installed in your,system,whether they are installed or not you,can quickly confirm that using a command,prompt by typing in ruby dash v joking,ruby conversion return,and get space,version joking get clicker version,return,similar values,that means you have both of the cli,installed correctly in your system,however,then please make sure to download the,respective cli from the links in the,description below now we can install,another cli package called shopify cli,esco installed,ruby cli custom algorithm for that we,can type in,gem,install,shopify cli,and hit enter and it will take 30,seconds to a minute to install depending,on your internet speed,we can confirm that the package is,correctly installed by typing in shopify,space version,and if it returns some numbers like you,can see on the screen that means hamara,shopify cli properly installed,let's authenticate the shopify cli taki,shopify store connect host to,authenticate,we have to type in this command shopify,space login dash dash store,space,and after this space you need to enter,the url of your shopify store so in this,example i'm going to use my dummy,shopify store url i'm just going to copy,this url from here,and in the terminal i am going to paste,it,and then hit enter,and as you can see i have successfully,logged into shopify cli and now i can,close this tab,and in the command prompt i can see that,my authentication was successful okay so,how many successfully authenticate kalia,here and now we can see and download the,themes johamad store may available here,and to do that we need the command,shopify theme,pull,so let's type it in shopify theme,pull,and hit enter,as you can see it's showing me six,themes right now and to navigate up and,down between these themes i can use the,key k and j on my keyboard,j to go down and k to go up and just to,confirm if i go back to my shopify store,we can see that we have all these themes,available,now by pressing enter i can start,downloading the theme from shopify to my,local computer however my theme co is,current directory main download nahi,karna chata so i am going to exit out of,it,all right so i am in the correct,directory now and i i'm going to run the,same command again,shopify theme,oops,and from this list i think my sense team,go download karunga when it's,highlighted in blue you can press enter,and as you can see it's pulling theme,file from sense so we'll let it download,so theme download,here now,it will take some time to sync the theme,with the online store so as you can see,it's name port 9292,local server start,and if we press ctrl and click on it it,will open up my dummy store locally,seems like its password protected i'm,just going to enter the password for my,store,and sure enough it's working as expected,now let's try to edit

After seeing the first section, I believe you have a general understanding of Local theme shopify

Continue the next second section about Local 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 Local theme shopify

Continue the next third section about Local theme shopify

How to set up a local Shopify Theme Development environment ✅ Shopify Theme Development 2022

How to set up a local Shopify Theme Development environment ✅ Shopify Theme Development 2022

hey dear welcome to even my youtube,channel in this tutorials i am going to,show you how to set up a local shopify,team development environment on your,computer,if you wanted to start shopify theme,development as a carrier and looking,easy and fast shopify guideline then you,can continue this video so let's get,started so first you have to install the,bs code editor on your computer so i'm,going to install bs code,in my computer just search bs code,then press enter,and here is the bs code i've set,link click on the download for windows,and if you use others operating system,then you can select from here as i am,using windows so just click on the,download for windows,okay download completed now i'm going to,install this kodi editor on my computer,so,open this file double click run,select i accept the agreement next,next,next,next,install click on the finish we have,completed to download bs code and,install it on our computer now we have,to go to the,shopify dot dab slash theme slash tools,slash themekit and from here we have to,install the theme kit so what is the,theme kit teamkit is a cross plot from,commander line tools that,you can use to build shopify tip so,basically to buy to our shopify team we,must use,our install the theme kit okay so how,you can install the team kit now i'm,going to show you everything step by,step scroll down okay then click on the,get started,now go to the step one,install themekit you can install,themekit using the command line,following operating system for linux,you have to use the following command,line just copy this code and paste it on,your flower shell,for macbook use hanbor and copy this,code and paste that in mac terminal or,linux shell pump as i am using windows,so click on the windows and i have to,install the,chocolaty so click on the chocolaty,here is the chocolatey website and i'm,going to click on the install now button,and here is the installing guideline of,chocolaty i am going to open my bs code,editor,click on the terminal,new terminal and scroll down up and copy,this code,paste it here and,press enter,okay,now going to copy this code or run the,following command ctrl b to paste this,code or command,then press enter,and you can see that,here's a warning choco was found at my c,dive as i have already installed in my,computer i no need to install it again i,just show you the process how you can do,this so when you paste this command line,and press enter the chocolatey started,to install on your computer,so we have done,now we are ready to install the theme,kit so i'm going to copy,choco install theme kit,and paste it here,and you can see that my theme kit is,already,installed so my theme kit install it and,i have done the theme kit installation,in the next we will start get a themekit,password and connect with an existing,theme,or create a new theme or setup config,file so 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

After seeing the third section, I believe you have a general understanding of Local theme shopify

Continue the next fourth section about Local theme shopify

Setting up "Local Shopify Theme" from Krown Themes

Setting up "Local Shopify Theme" from Krown Themes

from crown themes,and in this video tutorial i want to,show you how to get started with our,brand new local theme,here i've just installed the theme,and i want to,go and customize it so this is what you,see when you,download our theme,and,start to work with it,first of all i want to take you a bit,through the theme settings,we have some general,settings for font families,some options for base size in case you,want to decrease or increase your phone,size also based on the fonts that you're,using,some options for line height,buttons font high what,weight,and also a dedicated area for changing,the menu size,and the font,height,second you have the color options,this theme as you can see is very,versatile you can change a lot of colors,the entire skin color scheme can be,changed you have,separate colors for,header,you have,separate colors for the body,as you can see and you have separate,colors for the cards now the cards,are,all these,boxed sections or blocks which have,their own color scheme,and,something that you might want to take,into consideration is that all the cards,can be,overwritten in terms of colors,except the product cards,so these are,default,default cards default colors,for example here you can see that these,are already,designed in a different way with,different colors and lastly we have the,footer,which,has a,new color set,in the layout,you can change the vertical space,between sections again this is also a,base vertical space because the theme,will change it based on different fonts,screen sizes,and the horizontal space between,elements in multi columns layout such as,featured collections,promotion cards and everywhere where you,have a multi-column layout,borders you can play with the border,with a card border,radius for example let's say i want to,make a,no radius and,really big,width,i'm changing this,also for the buttons you can change the,radius and for the forms you can change,the radius and the width of these are,the three,border settings,again for custom cards you will be able,to,override the border as you can see here,and completely hide it via a new setting,now on to the,product cards the product cards,will,affect the layout of any product grid so,for this,so you can see this better let's go to,the collections page template,so here we could see,all the cards uh,so we can play with the media aspect,ratio whether to be natural as you,upload it or square,or tall,you can change the text alignment,you can change the title size if you,have,long product,titles you can choose to show the second,media on hover,as you can see okay and then at the end,you can play with custom product badges,and of course first,the regular badges which are sold out,and,discount which you can change to be,either as a percentage or a text and,change its color,okay,then you have a few unique badges so,you can set them up like,this you have three different unique,badges you first write the text and then,the tag and then the color which will be,used,so here

After seeing the fourth section, I believe you have a general understanding of Local theme shopify

Continue the next fifth section about Local theme shopify

Local Theme Development with Shopify CLI

Local Theme Development with Shopify CLI

hey guys so today i wanted to make a,video about how you can use shopify's,command line interface tool,to,help you,develop your theme and so this will,include uh previewing changes you make,to your theme locally before pushing,them to your live theme as well as,also having a hot reload feature and,that way you don't have to continuously,manually refresh your site while you're,coding changes to your site so if you,haven't done this already this is really,going to speed up your workflow,tremendously and a prerequisite for this,is that you have already integrated your,theme with github so if you haven't done,that i do have a video of how to do that,it doesn't take that long and it's not,that difficult i'll link the video now,but without further ado let's get,started all right guys so here you can,see that i'm on the shopify cli,installation instructions page now,obviously to use shopify cli you're,gonna have to have it installed on your,machine,um the two,pieces of technology that you also need,uh the requirements for shopify cli is,ruby and git is the other one so if you,have both of these installed great if,you don't um just go on there,just type in install ruby install git,and you'll find either tutorials or i,mean it's pretty self-explanatory you,just download them and click through the,setup so once we've installed that we,want to go ahead and navigate to,the parent directory of whatever shopify,theme we're actually interested in,previewing and you can you do this in,whatever terminal tool you use i'm just,going to do it in the built-in terminal,in vs code here so,you can make sure that gem,ruby is installed by typing gem dash,version and you'll see that it gives you,back a version number these commands,might be slightly different on mac just,keep that in mind,now,uh what we want to do is gem install and,this will be the same on mac gem install,shopify dash cli,and we hit enter there and it's going to,basically download and install shopify,cli for us and it'll tell us when it's,done so i'm going to come back once,that's finished so once that is,installed uh you see it'll tell you one,gem installed here and we can make sure,that it's installed by typing in shopify,version here and it'll give us a version,number back so this is the latest,version at the time of me recording this,you can see a list of all the commands,you can type in here by typing in,shopify help and it's going to give you,this huge list let me go ahead and,expand this terminal window here,and,let me type that again really quickly,and,you're going to see all these commands,that pop up,so,the command that we're interested in,here is this shopify theme command,so what we want to do is we want to make,sure that we're actually in the,directory of the theme that we want to,preview and,first we need to log into the store so,we're going to type in first i'm going,to log out of my store just because um,you guys aren't going to be logged in if,you just downloaded the uh,command line tool

After seeing the fifth section, I believe you have a general understanding of Local theme shopify

Continue the next sixth section about Local theme shopify

How to setup local environment to build Shopify themes

How to setup local environment to build Shopify themes

hi guys welcome to my youtube channel,i hope you all are doing well in this,video i'll be showing you how to set up,local environment to build shopify,themes,so without wasting any time let's get,into it,there are three steps that we need to,follow and we'll go through each step,one by one,first step is we have to install a tool,called shopify theme kit,go to this url shopify.github.io slash,themekit,and you will be able to install this,tool,based on whatever operating system you,are on,you can use these commands to install,this store,and if you don't have a package manager,you can also,download x executable file for this tool,once you have downloaded this tool to,make sure,that this tool is installed just type,this command,theme space,version if it shows you the version,space darwin slash empty 64 that means,this tool has been installed properly,and you are good to go there,so next step is,to set up api credentials to be able to,push,and pull the theme changes from your,local environment to,to the store itself so we can do that by,going to the store click on apps,next click on manage private apps,click on create private app now,for private app name we can put any name,i'll put theme development,for emergency developer email i'll put,my personal email address,and now you have to assign permissions,to the api that,we are creating so in my case i will,only be assigning read and write,permissions,to modify themes,now after changing the permission hit,save,create app,after you follow this step shopify will,generate a api key,and password,will use this api key and password to,access our,shopify store,now once you're done with step two we'll,move on to step three,which is well done we'll use theme kit,to download,the the theme that is currently live on,the store,okay so in order to do that make a,folder,called you can call it anything you want,but in my case i will call it shopify,and now here first i will,i will need to get the theme id of the,theme that is currently live on our,store,in order to get that id you can enter,this command theme space get,dash dash list dash p,is equal to now p,for flag p copy this password,and paste it here,and after that dash,s is equal to this is where your stores,url will go,copy your storage url,now hit enter,now as you can see it will give you your,theme id,it will also give you the status of the,theme if it's live or not,and themes name all we need is theme id,copy this theme id now if,we have to enter a command to download,this thing on our local,computer now you can use the same,command that we entered to,get the shopify theme id but you have to,remove dash dash,list flag and enter dash d is equal to,your theme id flag,as you can see here,i will i will enter all these commands,in the description below,now this will start downloading the,theme to your local machine,so the theme has been downloaded,downloaded in the folder the shopify,dash theme,as you can see it has also generated a,file called,config.yml now confi

After seeing the sixth section, I believe you have a general understanding of Local theme shopify

Continue the next seventh section about Local theme shopify

Shopify Developer Tutorial: how to use Theme Kit

Shopify Developer Tutorial: how to use Theme Kit

das very first video how to make you can,feuert ihn falls die uci ein bild video,entdecken sie per default deb-teams,installed die abifeier make any change,of service qos team uk back up here,waiting team falls wir das bild in,action sind nach riga übrigen update,action die imusic des elk creek windfang,wanna make some changes to one of those,templates perfect for small change the,escape projects denn judith pfefferte,user logitech sunny cars sind des edit,format ins politologe text-to-speech bei,der syntax highlighting language to do,so would you like it geschäfts google,vor dem kinderfest recycling ab dass,page you have some installation,instruction set manager der installation,of working on windows maschinen red bull,toyota executable files for windows live,spaces im gtc paris mauerfalls heißt,what you next ist ob in your file,browser and go to local des ccee program,files and can you feel des kolping kit i,have danced all die tausend user mit,quentin der folder julias place der,exekutive feiert hier der nächste us,mcfit accessible früh bekommt global,what you need to do er ist kapitän olaf,meidt here right click und des pc,properties will bring ab control panel,the advance systems things we bring ab,das ist ein properties pop up and find,new environmental so doubleclick und,ipad wie just cause i just to the bottom,of das hässliche aber die harten start,er ist ein menschen,ok ok and you should be good to go go to,follow the chase continues to define,development related so indes viel wie,heft zu gefrieren,so widmen,die von project development storm and,create and they did you have to add in,emergency developer e mail von we can,just use testament templates ersetzt,safe auf konstante risk rating des abv,ein extremist der firma die von der film,über erde und den feind ist in der,texteditor youtube for just got that,could in däniken feind die us-tochter,browser des open air terminal bei,castings die in der open in der voll,integriert,thermalright hier button aber ron wood,navigate you von alicia tiefste kommen,prompt wurden diskutiert die download,download oder files in der asse gibt es,ist halb vier ist das ist etwas make it,to changes to any fall wie make and just,pusht abdeckt oder ebenfalls des,development folder hier,and media molecule layout dort liquid,food testing the little test the box and,you see something gefalle das processing,updating v.li quick check ist es das,change up light to the shop perfekt vor,das video hope you want something you,and any questions das treibt den daumen,in connection with the developing,centrex video bei

After seeing the seventh section, I believe you have a general understanding of Local theme shopify

Continue the next eighth section about Local theme shopify

Shopify local development with Theme Kit

Shopify local development with Theme Kit

từ hôm nay mình muốn giới thiệu cho các,bạn là một cái công cụ là tìm kít đăng,ký là một cái công cụ để xây dựng thêm,cho shopify,Ừ thì ai trước tiên thì cách xa wi-fi Đó,là một cái cái nền tảng thương mại điện,tử cho phép bạn là tạo một cái website,em bán hàng online,vì nó dựa trên cái mô hình nhà cloud sát,Ừ thì bạn ạ,em có thể lên mà tạo tài khoản dùm tử,thế này à,a,sách file đã sẽ có tính phí,Ý anh là sẽ cho 14 ngày dùng thử đấy và,có một là và các với mức phí để duy trì,thì nó sẽ lưu trên iCloud,thì mình sẽ không phải quan tâm đến,hosting nữa,thế này cũng rất là hay mà,rất nhiều công nghệ mới,Ừ thì spotify đâu cũng có,ở các cách áp riêng,cũng như các cái ví dụ một cái website,thì nó cũng có phát giao diện,Ừ thì mình sẽ,Cho xem làm cái chứ 3 cách giao diện cho,nó làm tim cho spotify,Ừ thì mình cũng có đã làm một cái tim,ở trên themeforest về cái để,a free Fire,ở giao diện này à,khi sex,cho mọi người cũng có thể làm một cái,giao diện spotify cho cái shop của mình,hoặc là làm để bán cho bạn ạ,Ừ thì à,ở đền làm thì mình sẽ giới thiệu 1 cái,công cụ lấy là tin kít chồng để hỗ trợ,mình làm tìm chấp sóng Wifi cho nó hiệu,quả,à,Sifa admin thế giới giao diện như thế,này,Em có thấy phần quản lý thêm để mà chỉnh,sửa hết tiền thì mình sẽ vào edit code,ở đây là một cái tim mà cái file của một,cái gì mặc định,Hãy nó sẽ có cái file,em và nó dùng cái cái file bí quyết để,để tạo file template,à à,có thể dùng Thiên Kiếp thì,Ý bạn là xem ở kia đường linh thế này,vì thế nó làm cái công cụ,Ừ anh đào bắn tiền đào cái bàn phù hợp,với xe hệ điều hành của mình,khi trở về máy là bị làm làm trên,máy code bằng Editor thay vì bạn vào,a freshman radical cấu hình thì,em vào à,a program files I,để tạo một cái thư mục từ là tiền ít mà,em copy cái cái file Mình vừa mới tải về,Em có vào trong cái,mục II,a oxi profile và tiêm kích,cho hết vào đây,may mắn copy cái đường link Ô thế Mình,cấu hình nào trong cái phần,em tắt của cái thằng,system fan system setting này à,anh đã vội vàng rồi cái phần 3,ở Pháp,thế này này Bắc Kinh Đô Biên Hòa thêm,một cái lưu lưu một cái dòng,Ừ nếu với lòng mình vừa có vậy địa chỉ,của bạn đừng dẫn của cái thêm ít ok,Ừ ok đặc,Ừ đấy Bây giờ bạn là bạn tạm cái thư mục,để mình lưu cái A,La Liga cốt của cái tim nếu có của Tim,Về Máy mình mình chỉnh sửa,Em hãy là tên gì được,mà tại sao lại nhớ,ở trong này thì bạn phải tạo một cái,file để mình,em có thể kết nối với cái nối với wifi,để,Ừ thì mình chạy cái Thiên kích thì nó sẽ,sẽ Download kết phần cốt về cho mình,ý thì cái file cấu hình này thì mình,mình có viết đơn thông tin,a risk,em xem cái mẫu,tôi sẽ đi,vì tình cái phần,Ừ từ cái Cấu hình ra để bạn có thể làm,theo,ừ ừ,Ừ,Tao thề là tao cũng phải cái app cái A,a Plan W,anh sex thiết lập lại đã,anh em đi mình tụi mình mình ghi vào,email,ý là cái phần quan trọng Đấy là cái cái,quyền đây là không,chị sẽ có một cái phần để phân quyền cho,cái việc bạn làm có có quyền được tải,file và sửa file mình sẽ tìm đến cái A Ừ,cái tim này,anh Hải và chọn kẻ giết đang quay con,

After seeing the eighth section, I believe you have a general understanding of Local theme shopify

Continue the next ninth section about Local theme shopify

How to use the Shopify CLI for Building Themes

How to use the Shopify CLI for Building Themes

嗨 我是Liam,Shopify模板开发者宣传大使,在本视频中 我们将展示 如何设置本地模板开发环境,这样您就可以在本地计算机上,使用Shopify CLI 编辑模板文件并预览更改,我们也会展示如何将更改,推送到已上线的商店中,下面我来具体介绍,我们需要完成三个准备工作,才能设置模板开发环境,第一 将Shopify CLI安装到自己的设备上,第二 连接一家Shopify商店,这样我们才能从中拉取数据 并将更改推送到该商店中,第三 需要生成实际模板 这样我们就可以执行自定义,更改 并将所做更改推送到 该模板的实例中,那就先进行第一项,安装Shopify CLI,我要用Homebrew,将CLI安装到Mac中,我们也会介绍针对其他操作系统,如何将CLI安装到计算机中,首先我要tap(添加),Shopify Keg(套件资料夹),这样才能访问Homebrew中的Shopify工具,更新完后 Homebrew更新完后,系统会告诉我更新了什么,然后运行brew install Shopify CLI命令,系统就会下载CLI 并将它安装到我的电脑中,运行完这个命令后,可以运行Shopify Version命令,这会显示我们正在使用的Shopify版本,并验证它是否正常运行,您也可以运行Shopify Help命令,来查看CLI中所有的不同命令,在这个实例中 我们主要使用模板组命令,因为我们的操作对象是Shopify模板,接下来 我们将Shopify CLI连接上,一个已上线的Shopify商店,我要使用开发版商店中的测试环境,如果您没有开发版商店 请创建一个Shopify合作伙伴账户,这样您就能随意创建 开发沙盒商店 数量不限,这里我用的是 Testing 2021 Liam Store(开发版商店),里面已经安装了一些模板,比如Liam's Test Theme,里面还有一些演示版产品,只供我的商店测试用,我们还以博客文章形式,存储了其他数据,我们也能测试这部分,要想连接上这个已上线的商店,我们需要商店的URL,我们将运行Shopify login命令,运行这条命令时 系统会验证我的身份,要求我登录我的商店,通过这种方式,我的商店会和CLI连接上,运行此命令时要标识出“store”(商店),并给出商店的URL 运行此命令后,会弹出窗口提示我登录并输入密码,成功验证我的身份后,我会收到一条“验证成功”的消息提醒,然后我们会看到 终端窗口中的信息已更新,通知我 我已登录到我的商店,以及我属于哪个合作伙伴机构,如果您想快速查看您登录的是哪个商店,您可以运行shopify whoami命令,运行结果和我们开始验证时看到的内容相同,显示了商店和我从属的合作伙伴机构信息,很好 我们已连接上了这个商店,我们接下来要下载模板,在Shopify CLI中,访问模板有两种主要方式,第一 运行Shopify theme init命令,就会从GitHub公共仓库中,拉取一个Dawn模板版本 开启新项目,然后下载此模板并将它安装 到您的设备中,第二 运行Shopify theme pull命令,这样CLI可以访问,已连接的商店中安装的任何模板,我们就打算用这种方式,我有一个空文件夹 Theme Dev Demo(模板开发演示),我要在终端中打开此文件夹,然后运行Shopify theme pull命令,然后,系统会问我要拉取哪个模板,它告诉我这里安装了三个模板 以及目前上线的是哪个,我要拉取未发布的,Liam's Test Theme,选好后 它会从我已上线的商店中拉取文件,安装在我的本地计算机中,模板拉取过程一结束,系统就会通知我们模板已成功拉取,如果我们打开目录,就能看到模板中应该出现的模板文件夹,都出现在这里了,我们也可在文本编辑器中打开它,我用的是VS Code 但任何这类软件都可以,我们可以看到模板文件出现在这里,正如我们期待的那样,接下来要创建本地开发环境,我们可以在其中预览更改,接下来 我们要生成“开发模板”,开发模板是在本地计算机上运行的隐藏模板,它与已上线的Shopify商店相连,您可以将开发工作流应用在此商店中,我们利用开发模板实时预览更改,这样就可以自定义下载的模板文件,并在本地环境中实时预览所做的更改,我们在终端中,运行Shopify theme serve命令 来生成开发模板,我们一运行此命令,就会看到此模板正与已连接的商店同步,Shopify theme serve运行完后,可以看到我们创建出了一个URL,我们会用它浏览开发模板,我们也可以访问这个开发模板的,在线商店编辑器版本,您甚至可以分享预览链接,这个服务器会持续运行,直到我们关闭终端,或者按下Ctrl+C,来终止开发模板运行,如果我们打开浏览器,输入刚才生成的URL,需要输入密码 回到已上线的商店,我们可以在偏好设置中,找到密码,在这里 商店密码,输入密码后,我们能看到开发版商店显示出来,它连接上了我们的已上线商店,所有的产品都出现在这里,说明和我们的商店连接上了,我们看到它也把我们的博客文章摘取下来了,所以我们能在本地环境中,访问已上线的商店中的所有内容,这样的好处是…,我们可以回到模板文件,进行微调,我就添加…,就在标头下 我要测试模板是否正常运行,就利用“template”这个liquid对象,这个对象的作用是 它会输出用于输出页面的,模板文件的名字,很容易就能看出,保存后 各个页面都在应用此更改,保存文件中的更改后,回到我们的开发模板,就能看到更改已生效,这里出现了“index”(索引),因为这里使用index.json,作为模板文件来呈现页面,我们来到博客页面 可以看到“blog”(博客)显示在这里,产品页面也一样,“product”(产品)出现在这里 说明我们的开发模板,如预期般运行,用CLI运行开发模板,我们就能改变我们的商店,您可以在本地环境中,继续为客户定制模板,随意调整 创建新功能,测试所有内容,一旦您准备好将更改推送到已上线的商店中,您可以运行Shopify theme push命令,它就能将更改推送到您的商店中,我要在终端中打开一个新标签,我就运行Shopify theme push命令,它会问我想推送到哪个模板中,我就选择我拉取的那个模板,Liam's Test Theme,运行这个命令,就能将更改推送到已上线的商店中,运行该命令后,我会收到推送成功的消息提醒,我可以回到已上线的商店,来确认更改,已推送成功,我可以前往Liam's Test Theme,点击“自定义”,我可以看到自己做出的更改,这里显示了当前模板的名字,很好,我们用Shopify CLI从商店中下载了模板,生成了开发模板 可以用它预览本地更改,并将更改推送到已上线的Shopify商店中,您可以在GitHub上查看Shopify CLI仓库来了解更多相关信息,并排查所有常见问题,如需了解Shopify模板开发的更多信息,请订阅此频道,并查看shopify.dev上的相关文档,您还可以加入Discord上的Shopify服务器,结识开发者同行 互相交流,谢谢观看,再见

Congratulation! You bave finally finished reading Local theme shopify and believe you bave enougb understending Local theme shopify

Come on and read the rest of the article!