Change language

Getting started with Shopify Themes – Online Store 2.0

Getting started with Shopify Themes - Online Store 2.0

hi everyone in this video im going to explain how  you can build your first shopify theme that uses online store 2.0 and how you can set up your local  environment for shopify team development using shopify cli first you should open  website then scroll down and click on themes then click on build a new theme in this page  you can find all instructions on how you can build your first shopify theme first of all  we will create a shopify partner account so click here on this link and after you fill your  personal information click on create account you will be asked to enter your business name your  address and some information about you you can always change it so lets call our store devstore  and for address lets just add address here and our zip code also you should answer these  questions its about your shopify experience and then click on view your dashboard and  dont forget to confirm your email address as you cannot create a development store without  it in shopify partner dashboard we will create our development store so to create one click  on stores click on add store choose development store lets call it for example revolution101 now  lets add the credentials for our shopify store and click on save so right now we have created our shopify partner  account we have created our development store and its ready to go next we should install shopify  cli locally to be able to create local environment for theme development lets go back to shopify to  the website and scroll down to step one install should we find cli in this link you can find  all instructions on how to install superfine cli in all platforms for mac os which im using  right now you can use homebrew to install shopify CLI so i will just copy these commanders into  the terminal to install shopify cli locally now to make sure that shopify cli is properly  installed type in the terminal shopify version and you should get a response  like this like the version of installed subway cli so to create  a theme we just type shopify theme init it will ask you for theme  name lets call it for example revolution lets open the theme folder in the terminal next we should link our shopify local installation  to our shopify store so that we can publish our theme there to do so we type in  the terminal shopify login dash store and here we will type our store url so in our  case it was revolution 101 dot my shopify dot com it will open the browser to verify my shopify  account so we should just log in with our account again you will get this message it has  been authenticated so we close the step and we go back to the terminal we should make sure  that the store name and the partner account are correct and the merchants account that  we have used to create the development store so in this case we have revolution10111 is  correct and our divistor is our business name in our shopify partner account so  we dont have any problem here finally lets start serving the theme to start developing  it just type shopify theme serve you will mostly run into this issue which is actually a bug  in shopify cli hopefully it will be fixed soon but there is a workaround for it so what you  need is just type shopify logout in the terminal to log out from shopify CLI you should get this  message successfully logged out of your account and then go back to the browser make sure in  the url its your store name dot admin and then log out from your shopify store  in the browser after you log out try to log in again into your shopify store using this url  your store name admin make sure your store name is written here and then  click on next to login to your shopify account finally lets try to log  in again from the terminal okay again lets make sure our store name is  correct and our business name is correct as well now lets try to serve our theme again  and open the localhost url in the browser first time it will ask you for a store  password to get it we open our shopifys tour admin page and scroll down to see  store password button and click on it then scroll down to password protection section  so that you can get or update your store password so now for local development once we  have served our theme locally it will be automatically refreshed if we update anything  in our code so to test this lets give it a try so i will open the theme in vs code here so here it is here is our local development  store and heres our theme here im going to open templates slash index.json here you can find the  new structure of online store 2.0 so in the block here i have a hidden block here and i have a  button so i can just update the heading here i can say first theme and once you save the file  it will be automatically updated in the browser so now you can have a local development environment  for your shopify theme finally to sync your local development theme with your shopify store account  we can use GitHub to do so so first of all you will have to push your local development folder  to GitHub and to do so im going to open GitHub and i will create a newer private repo lets call  it revolution 101 okay and lets make it private i will stop serving my theme i will run  "git init" to start "git" in this folder and "git add ." to add all files and then commit it as initial commit okay so i will copy these instructions from  GitHub and paste it here in my terminal next i will link my GitHub account  to my shopify store account go back to shopify admin page and click on online  store it will automatically open themes page scroll down to add theme and then choose connect  from GitHub and then click on login to GitHub it will ask for permissions to  actually access our GitHub account so once accessed click on select here to add a  new account and you should give it access to the labels that you are actually using lets just  give it access to our repo and click on install now we should select this repo and click  on connect to install the theme in our shopify store to make sure its actually the  theme we are using we can click on preview in the hidden section you can see first  theme which we have just updated in our code even make sure its actually properly synced  with our GitHub account we can update the name of our theme so to update it we will go to config  folder and choose settings schema the json file now in this field theme name im gonna  call it for example revolution1011 and im gonna change the version to maybe 1.0.0 next i will just push this file now we should go back to our shopify admin  page and refresh it to make sure the theme has been updated and synchronized with GitHub  account we click on customize beside the theme and beside the draft button we there is three dots  click on it and then you can find the theme name and version has been updated so right now  we have a local development environment to develop our theme locally and also once we  push it to GitHub we can even test it on our online development tour if you enjoyed the content  of this video click the subscribe button so that you can receive more content like this every week  thanks for watching and see you in the next video