Shopify CLI for Theme Development (How to use) [Version 2.0]

Рет қаралды 37,450

2 жыл бұрын

To go deeper into Shopify Liquid, check out my full course:
www.shopifythemedeveloper.com...
Or to receive direct support from me, join the Patreon:
/ shopifydeveloper
Do you run a business on Shopify and want help with your store? Get in contact
form.typeform.com/to/Zg0k4BEP
Episode Overview
-----------------------------
Shopify CLI stands for Shopify Command Line Interface and is the latest alternative to Shopify Themekit.
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.
Check out my stuff online...
My Skillshare.com channel:
www.skillshare.com/r/profile/...
My travel channel:
/ christhefreelancer
My website:
christhefreelancer.com
My socials:
Instagram: / christhefreelancer
Facebook: / christhefreelancer
Twitter: / chrisrdodd

Пікірлер: 101

@neseemishaq6076 2 жыл бұрын

Thank you for this information! With regards to the Customizer and local changes, I do notice if I make a change locally on a Development branch and re-fresh the Customizer, it will reflect my local changes on the remote Development server. I also notice with the other way around by changing copy on the remote server and refreshing the local, it also displays the change even though I do not see any changes to my local json (which is interesting). The one way I found and was also noted in a previous comment was to run ‘shopify theme pull’ and select the Development theme which will bring down the json changes to your local.

@CodewithChristheFreelancer 2 жыл бұрын

Ah nice! Didn't know that the development theme showed up in the list of options for 'shopify theme pull'. Thanks for figuring that one out for us!

@KeshavKumar-xv8oq 2 жыл бұрын

@@CodewithChristheFreelancer To put it simply . The Development theme customizer changes are synced with the Development theme local preview in browser [on page refresh] . But not with the JSON in our Development theme code, . The workaround is to run theme pull before logging out. . Please correct me if I'm wrong.

@KeshavKumar-xv8oq 2 жыл бұрын

But I don't think the customizer changes data should come into our theme code. . Customizer settings are Admin specific & should be saved in the code only if Admin makes those changes not when developers makes those changes in the development customizer . If changes made in the development customizer came into the theme code, then on the time of pushing to an actual theme, . All that development customizer data will also be pushed into the actual theme & will show up in the admin Customizer even before the Admin has made any changes in the customizer. . And Development customizer changes will act as default settings which was not intended. . I don't know how shopify manages to display those changes to the Live Reload URL in the Browser. . But its a good thing for developers to test their customizer changes, without worrying about the Development customizer data going into the actual theme code. . I think its a well thought step from shopify. Let me know what you guys think.

@TurnovskiIvan 2 жыл бұрын

@@KeshavKumar-xv8oq shopify theme pull delete the package-lock.json and package.json files. As Chris mentioned, the best way so far is to use Github integration, then if the developer make changes in the customizer they are automatically committed to Github, then we just run git pull. In that way, we have the changes locally.

@Raihan004 2 жыл бұрын

@@TurnovskiIvan I'm following this process at the moment

@mzrnsh 2 жыл бұрын

Thanks for doing the heavy lifting for us Chris! Really helpful

@grantmeagher 2 жыл бұрын

Chris! This was a fantastic video diving into the CLI. Very well explained and comprehensive while covering potential missed hiccups. Appreciate the sharing of knowledge, brother. Keep up the great content.

@siimonstark6209 Жыл бұрын

Explained this a lot better than the last one I had just watched. Thank you for clarification on knowledge on the topic

@richi901000 2 жыл бұрын

Thanks a lot for these insights. Very Important what you explained about the theme customizer changes!

@joshuaclark8571 2 жыл бұрын

I learned something new today. Thanks for the concise informative explanation on how to set this up!

@hamzahmd_ 2 жыл бұрын

Thank you, Chris. Really helpful tutorial.

@shopifythemesolutions.9190 Жыл бұрын

Thank you for the detailed step-by-step process for Shopify CLI and GitHub integration.

@markusfreise 2 жыл бұрын

This was really helpful. Thanks a lot.

@brendan7258 2 жыл бұрын

This video is so damn good man. Thank you.

@omerd1817 2 жыл бұрын

Thanks alot Chris! Its really helpful.

@koomooboo 2 жыл бұрын

Thank you for showing this. Regarding to the admin settings, after you made changes in the admin settings, Shopify would commit to the repo and you just need to pull the changes and merge to your branch. The next deployment will have the updated settings from admin settings.

@amyaturner Жыл бұрын

Thank you! Solid tutorial.

@kirstyvanacker4208 2 жыл бұрын

Fantastic tutorial, thanks!

@previously_loved 2 жыл бұрын

Super helpful, thanks man

@gogoipratiksha666 2 жыл бұрын

very helpful ,thanks

@paulaner7919 Жыл бұрын

Excellent explanation

@JanHoving 2 жыл бұрын

Great content!

@hkhkl6630 Жыл бұрын

thanks a lot I managed to get things setup quickly

@heindiez 2 жыл бұрын

Thank you... You saved me

@xmajorfox Жыл бұрын

Amazing. Thank you!!!!!!!!

@abdulrakib9906 2 жыл бұрын

I have watched all of your tutorials. I am waiting to see new tutorials for filter product by size,color,price, brands etc by vue js. Hope you will do it soon. Thanks

@dawid_dahl 2 жыл бұрын

Thanks a lot!

@vm9154 2 жыл бұрын

Thank you for what you do :)

@CodewithChristheFreelancer 2 жыл бұрын

You're welcome!

@andreiclep 2 жыл бұрын

great video! thanks! regarding changes from Customizer, I do 'shopify theme pull' and select Development store from the list to the get all changes from Customizer in the local theme

@CodewithChristheFreelancer 2 жыл бұрын

Yep. So if the theme exists in the theme library then the data in the JSON files should reflect the changes you made in the customiser and therefore will download and apply when you pull.

@cyberspider78910 10 ай бұрын

But why we should work on Shopify for development when it can be done locally ? What is point of CLI then ?

@Loki_Dokie Жыл бұрын

I think the Shopify docs could be a bit more specific about how to go about this. Without this video I was about to give up as I had no idea I had to use Shopify CLI and all it told me is that there was an error when connecting repository in dashboard. Cheers, now I can learn properly

@Airofoil Жыл бұрын

Cheers Chris, For settings_data.json changes from the Theme Editor, I've frequently been doing `shopify theme pull --live --only settings/settings_data.json`, which works, but for other JSON templates it's a bit trickier Also crossing fingers they add Bitbucket integration...my team uses that instead of Git

@CodewithChristheFreelancer Жыл бұрын

What do you mean "it's a bit tricker"? It should pull in all the data, not just settings_data.json

@tanujwagh1345 Жыл бұрын

Great Video!! But for the online theme changes not reflecting in local code is pretty much how it should function. As shopify (third party) has access to your github it should not be allowed to alter code. So I think doing a shopify theme pull and then uploading that you git would sync everything together. Or maybe just stick to changing themes locally then adding/commiting to git would keep everything synced up. Or use the

@borislavkrustev1229 2 жыл бұрын

Great video Chris, you got yourself a new subscriber! Just wondering, are all assets from the /assets folder hot reloaded. It's mentioned in the docs that css files are hot reloaded and in this video you showed liquid files working like that too, but does it work with js files too? I'm adding some React stuff to a client's store and wanted to know if I could take advantage of HMR in Shopify, and the CLI looks like it would help. Thanks in advance!

@CodewithChristheFreelancer 2 жыл бұрын

Thanks Borislav. Not entirely sure but I've found that the page definitely reloads after making a HTML/CSS change using Shopify CLI. I don't know if it would be considered 'hot reloading' though as I believe it reloads the entire page (which can get frustrating when you're working with a heavy page). I did a little research and HMR appears to be a React thing? I'm not well versed in React at this time (I use Vue.js instead) but my suggestion would be to try it out and see if it works.

@olebesendahl1718 2 жыл бұрын

Awesome Video Chris. Just wondering if after all the updates, how would you go on working with SCSS or really work in CSS? And if you continue working with SCSS, will you run a second process with gulp that is compiling the files?

@CodewithChristheFreelancer 2 жыл бұрын

Hi Ole. Might do a video on this as well but currently I use gulp.js in a similar way to how I set it up in my earlier video on using SCSS.

@rowan3397 2 жыл бұрын

@@CodewithChristheFreelancer a video on this would be great and really helpful Chris

@rework7562 2 жыл бұрын

Could you please make a video, where you show how to work with different repositories and projects and how to switch between them in your working environment?

@CodewithChristheFreelancer 2 жыл бұрын

That could be a good video idea! Thank you. I will consider it.

@amandapratescaetano4876 2 жыл бұрын

Hi! Thank you for this rich information! I have a question, so, can I use gulp with Shopify CLI? For example to use SCSS, to minify JS files

@CodewithChristheFreelancer 2 жыл бұрын

Yeah sure. I see no reason why that wouldn't work

@tensketch3455 2 жыл бұрын

Hi, Can you pls post a video on how to use liquid over HTML ?

@JarrodKane 2 жыл бұрын

I was making a short videos explaining Shopify as I learn it, and was absolutely stumped and confused by the fact that the dev theme does not automatically just pull the changes down. The little fix that Nessem has works great though! Still, really confusing that this is not set up automatically by shopify

@maxwellcarlscott 2 жыл бұрын

I am also super confused about this... what is the advantage of using the theme serve and dev ing locally if i have to run a pull and merge everytime data changes? Did you find a solution here? I'd love to keep things on Git for team workflow, but should i just be running the old Theme kit / theme watch and not the new CLI ? Dont understand its use i guess.

@cyberspider78910 10 ай бұрын

@@maxwellcarlscott I am in the same boat ! what's the point of CLI then ?

@vitalii6709 2 жыл бұрын

Thanks for the great video! I got confused with one thing...I want to style account page locally but can't login in local theme. As I understand it is impossible to login in local themes?

@CodewithChristheFreelancer 2 жыл бұрын

Oh really? What is preventing you from logging in?

@maxwellcarlscott 2 жыл бұрын

hey chris, thanks for video. Quick Q! ... I was using theme kit theme watch for my previous workflow a lot... one thing I often do is content manage custom areas into a lot of themes etc... so I am wondering if there is any advantage to using the 'theme serve' if i constant have to pull data from the customize theme... is there anyway to watch the customize theme panel and pull in those updates automtically?

@CodewithChristheFreelancer 2 жыл бұрын

Hey Maxwell. In that case, it might be better to use Themekit. I think the advantage of using the CLI is that you edit your code locally and therefore don't have to wait for files to upload to your store.

@maxwellcarlscott 2 жыл бұрын

@@CodewithChristheFreelancer yah totally, but they mention with the new 2.0 themes not to use themekit in the documentation? i guess... We actually just wrote bash script to run a remote pull request every minute or so, so it pulls down json updates to the theme on the server. seems to work ok but not ideal

@TurnovskiIvan 2 жыл бұрын

Hi Maxwell, you mentioned you have used themekit so your changes from the customizer are downloaded locally. I have used themekit before and I had to type 'theme get' every time I made changes from the customizer. In both cases, whether you use theme kit or shopify cli you have to type 'theme get' or 'shopify theme pull'. Isn't that the same? Just one thing that I noticed is 'shopify theme pull' command is deleting the package-lock.json and package.json files.

@oezguercelebi 2 жыл бұрын

Nice explainer video 🙏⭐️. But can you keep the development theme the whole time and every time you want to release it push to the production theme? How would you go about doing that.

@CodewithChristheFreelancer 2 жыл бұрын

That's where the Github integration comes in handy. Every time I commit and push, it will update a linked theme inside the theme library.

@oezguercelebi 2 жыл бұрын

@@CodewithChristheFreelancer thanks 🤓

@slayerd52 2 жыл бұрын

I feel like the customizer settings not saving is a huge flaw and makes the shopify cli almost unusable for theme development. At that point the largest benefit is having a repo setup but you could do that before with and just use theme kit. Thoughts?

@CodewithChristheFreelancer 2 жыл бұрын

Checked the pinned comment! One of my viewers has found that you can select the development theme when running 'shopify theme pull' and that will get you the data ;)

@toastrecon Жыл бұрын

It's interesting. It looks like there have been some changes in the documentation and commands. Themekit should only be used for older themes, and shopify-cli should be used for any Online Store 2.0 themes. It looks like the new thing is "shopify theme dev" - it does basically what "shopify theme serve" used to do.

@CodewithChristheFreelancer Жыл бұрын

Are you referring to Shopify CLI 3.0? There are some quite big differences (apparently).

@toastrecon Жыл бұрын

@@CodewithChristheFreelancer Yeah, I'm on 3.24.1. It works, but there are differences. The documentation seems up to date, though.

@erinhudsondev8958 Жыл бұрын

I find so many great tutorials, like this one, about how to use CLI and github to work with a new theme or store, but I'm struggling with how to use the CLI to download the code to my local machine for an existing store, connect to an existing repo staging branch and then push the changes. If I don't already have the code locally then how can I connect to a repo?

@CodewithChristheFreelancer Жыл бұрын

Well there's the 'pull' command to pull the code directly from the store. Otherwise if the code is on an exisiting branch you could just checkout that code locally. I don't see what the issue is here sorry.

@caw5v Жыл бұрын

How did you kno to include the equals sign during the login phase (shopify login --store=etc.). Im asking because i didn't see that indicated in the documentation

@CodewithChristheFreelancer Жыл бұрын

Looking at the documentation at present, it would seem that they've made a lot of changes. I remember there being a list of core commands and a list of theme commands.

@toastrecon Жыл бұрын

Has anyone with an M1 Mac run into the problem where you try to run "shopify theme pull", the auth screen comes up on the browser, you successfully connect, but then the CLI returns the error: "invalid_target"? I've done all sorts of restarting, logging in again, and was on Shopify help chat for about 45min. The poor guy finally said: "sorry, we don't have anyone that supports that". Edit: I got this working. It turns out that you can't use the M1 (arm64) architecture to brew install shopify-cli and themekit. The old trick of making a copy of Terminal that uses Rosetta no longer works with MacOS Ventura. I downloaded iTerm and forced it to run using Rosetta, and then uninstalled shopify-cli and themekit using homebrew and then reinstalled them. It worked after that. I also noticed that once it's "working" my other terminal app "Warp", which runs under arm64 natively, also started working with the shopify theme pull command.

@UmbertoFontanazza 2 жыл бұрын

Thank you Chris for these videos. Btw still have a couple of problems. 1 First off the local preview loads but then it redirects to "address not found" page, it's like a DNS error, anyone had that? 2 Some error like this "ERROR update assets/google-maps-styles.json: Cannot overwrite generated asset 'assets/google-maps-styles.json'." in shopify-cli -v 2.3.0

@cyberspider78910 10 ай бұрын

I came across this error. It is because of some jumbling of files within themes when we upload /download various themes directly or via VS Code. What I did is to get rid of unrequired themes and take a fresh start. Take backup if required but it is advisable to have only one theme in development at a time.

@shuibabdullah4932 2 жыл бұрын

Hey Chris! do you have any Shopify JS Buy SDK vidoes?

@CodewithChristheFreelancer 2 жыл бұрын

Not at the moment. What do you wanna know?

@shuibabdullah4932 2 жыл бұрын

@@CodewithChristheFreelancer just the differences between Freelancing with just the Buy SDK verses making proper themes

@CodewithChristheFreelancer 2 жыл бұрын

Personally I have never felt the need to use the Buy SDK. Maybe when I was building my headless app perhaps but I'll keep in mind as a topic idea. Cheers.

@Brandon-qo6mp 2 жыл бұрын

When I open up the theme locally and make a change in VS code, the theme does not update/refresh locally. Any idea why this might be? Pushing code to github and seeing it update on my shopify admin still works as you shown however.

@KeshavKumar-xv8oq 2 жыл бұрын

Make sure you have run the command "shopify theme serve"

@markjohnson7078 2 жыл бұрын

So if you initially got this setup and working on your PC at work and you want to continue it on your PC at home, how do you go about doing that? Do you just clone the repository from github onto your home pc and use shopify login --store [url to store] then run shopify theme server or what?

@CodewithChristheFreelancer 2 жыл бұрын

Yep. So you would checkout the same branch on each computer. Just make sure you commit and push all changes on one computer before you try and access on the other.

@markjohnson7078 2 жыл бұрын

@@CodewithChristheFreelancer thanks, Your video was much more helpful than documentation. One thing i didnt realize is the way i was accessing the actual account tied to the theme didnt work. Had to actually log into it like normal as if it was a client site. Keep getting an error anytime i did shopify theme serve or shopify theme pull etc. thanks for the video.

@alessandrocardelli5291 2 жыл бұрын

Hello, is your Shopify Theme Development course on Skillshare up to date with these changes? thanks

@CodewithChristheFreelancer 2 жыл бұрын

Yep! Videos have been added to the class to account for all the new important features.

@alessandrocardelli5291 2 жыл бұрын

@@CodewithChristheFreelancer I dont see any lesson about GIT integration though... am I missing something?

@CodewithChristheFreelancer 2 жыл бұрын

The video on the Github integration is available for free here on my KZfaq channel :)

@muhammadusmanakram406 Жыл бұрын

Would you please make video on how to use handlebars in shopify?

@CodewithChristheFreelancer Жыл бұрын

Why do you want to use Handlebars in Shopify?

@muhammadusmanakram406 Жыл бұрын

I saw many themes that are using handlebars.

@CodewithChristheFreelancer Жыл бұрын

@@muhammadusmanakram406 can you share an example of one?

@muhammadusmanakram406 Жыл бұрын

vodoma shopify theme

@CodewithChristheFreelancer Жыл бұрын

hmm that one is not even on the Shopify Theme Store it seems. I'll consider it but at the moment I don't see any need to use Handlebars in a theme. I would use something more dynamic like Vue.

@justinoneill2837 2 жыл бұрын

the live reloading doesn't work on Windows which pretty much makes the Shopify CLI useless for many of us right now.

@philipbeauford 2 жыл бұрын

Works perfect for me, where are you having issue? Are you saving the changes?

@justinoneill2837 2 жыл бұрын

@@philipbeauford yes OC. I've used live reload before and understand how it should work. Are you using Windows 10 w/ WSL and Shopify CLI version 2.3.0 ?

@philipbeauford 2 жыл бұрын

@@justinoneill2837 yes but don’t use WSL.. use powershell, I know it sucks but I don’t think it works for me either with WSL. Windows programming is more of a pain for this exact reason. Literally 4 CLI on Windows lol.. Command prompt, powershell, bash & WSL. GL

@justinoneill2837 2 жыл бұрын

@@philipbeauford Thanks, I'll give it a try with PowerShell. Yeah I agree that Windows development can be pretty painful but I have also developed in Windows seamlessly with newer systems like Vite. TBH I feel like Shopify dev experience should be way more flushed out by now..2 years ago I was having similar issues with Shopify development so I moved on..now I come back and similar problems exist. It's a real pain point