Shopify CLI for Theme Development (How to use) [Version 2.0]
Вставка
- Опубліковано 29 сер 2021
- 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
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.
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!
@@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.
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.
@@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.
@@TurnovskiIvan I'm following this process at the moment
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.
Thanks for doing the heavy lifting for us Chris! Really helpful
Explained this a lot better than the last one I had just watched. Thank you for clarification on knowledge on the topic
Thanks a lot for these insights. Very Important what you explained about the theme customizer changes!
Thank you for the detailed step-by-step process for Shopify CLI and GitHub integration.
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.
I learned something new today. Thanks for the concise informative explanation on how to set this up!
Thank you, Chris.
Really helpful tutorial.
Excellent explanation
Fantastic tutorial, thanks!
This was really helpful. Thanks a lot.
Thank you! Solid tutorial.
Thanks alot Chris! Its really helpful.
very helpful ,thanks
This video is so damn good man. Thank you.
thanks a lot I managed to get things setup quickly
Thank you... You saved me
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
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.
But why we should work on Shopify for development when it can be done locally ? What is point of CLI then ?
Super helpful, thanks man
Amazing. Thank you!!!!!!!!
Great content!
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
Thanks a lot!
Thank you for what you do :)
You're welcome!
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
What do you mean "it's a bit tricker"? It should pull in all the data, not just settings_data.json
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
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
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
Yeah sure. I see no reason why that wouldn't work
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?
That could be a good video idea! Thank you. I will consider it.
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?
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.
@@CodewithChristheFreelancer a video on this would be great and really helpful Chris
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!
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.
Hi, Can you pls post a video on how to use liquid over HTML ?
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?
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.
@@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
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.
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
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.
@@maxwellcarlscott I am in the same boat ! what's the point of CLI then ?
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.
Are you referring to Shopify CLI 3.0? There are some quite big differences (apparently).
@@CodewithChristheFreelancer Yeah, I'm on 3.24.1. It works, but there are differences. The documentation seems up to date, though.
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?
Oh really? What is preventing you from logging in?
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.
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.
@@CodewithChristheFreelancer thanks 🤓
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?
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.
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
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.
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?
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 ;)
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
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.
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.
Make sure you have run the command "shopify theme serve"
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?
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.
@@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.
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.
Hey Chris! do you have any Shopify JS Buy SDK vidoes?
Not at the moment. What do you wanna know?
@@CodewithChristheFreelancer just the differences between Freelancing with just the Buy SDK verses making proper themes
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.
Hello, is your Shopify Theme Development course on Skillshare up to date with these changes? thanks
Yep! Videos have been added to the class to account for all the new important features.
@@CodewithChristheFreelancer I dont see any lesson about GIT integration though... am I missing something?
The video on the Github integration is available for free here on my UA-cam channel :)
Would you please make video on how to use handlebars in shopify?
Why do you want to use Handlebars in Shopify?
I saw many themes that are using handlebars.
@@muhammadusmanakram406 can you share an example of one?
vodoma shopify theme
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.
the live reloading doesn't work on Windows which pretty much makes the Shopify CLI useless for many of us right now.
Works perfect for me, where are you having issue? Are you saving the changes?
@@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 ?
@@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
@@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
no one use this on windows?