15:00 GOTCHA > View logs is very important to view otherwise silent problems. If there is validation errors with a file that file will NOT be added the theme installation WILL continue even if that means the theme install is invalid (i.e. missing product.json). Worse still this can cause a chain reaction when a section/snippet file is omitted-by-error that is supposed to be included in another file... then that containing file will have an error and also be omitted from the install. YOu will not be informed of this anywhere else, the shopify-online-bot will not create github issues, the integration settings on github has no log, and neither the theme admin ,code-editor, nor the customizer will raise warnings about it.
AMAZING SERIES! Just got a client who wants a redesign of their shopify store. I work as a fulltime developer but I have never touched shopify until now. This series has really given me the run down on what I need to know, thank you!
I've started learning Shopify a few days ago and faced the problem that almost every course or tutorial explains how old Shopify works, but when I install Dawn theme a lot stuff is different. Will be glad for video explaining how to built templates using JSON only.
I wish I could thumbs this up 100 times. Also thanks for the article on using Git with Shopify (before Online Store 2.0) -- that's what I need but seeing this in action will have me thinking twice about upgrading a theme to online store 2.0 before deciding to use themekit
1:00 Critical caveat for shopiy's primitive "version control" : It does not work with theme ASSETS, such as theme.js/theme.css/svg's etc. If your in that situation a last hope is by messing with the parameter '?v' for URL's on the assets CDN gotten with the liquid asset-filters. Why assets are omitted isn't documented, easy to assume it has something to do with the render-engine cache, the CDN or some historical limitation therein /shrug.
Great video. Looking forward to the new requested video for me. I am waiting to see new tutorials for filtering products by size, color, price, brands, etc by Vue js. Hope you will do it soon. Thanks
Hey Chris, Thanks vor this tutorial! It was exactly what im looking for and it's obvious that you come from a practical background and real projects. That helps a lot. Please keep up the good work and if you plan a skillshare course / youtube series about app development it would be like christmas and birthday in one day for me :D in any case thank you very much.
Hey Chris, Nice video, we need a course on headless with graph ql. I did your vue skillshare course, that would be awesome to have something with vue and graphql for headless
Never seen that one. Judging from the error message though, sounds like you got an invalid theme there haha. I'd say something is wrong with the theme code.
We are new to shopify and I watched your courses on skillshare. If possible recreate 2.0 based courses rather than mixing old videos that will be great. I really like your courses.
Because OS2.0 builds upon the current features in Shopify, everything in the class is still relevant. What I've heard from other students is that they are confused given the default theme has changed from Debut to Dawn. As I mention in my video going deeper into Dawn, Dawn is not the same thing as OS2.0 (I recommend checking that video out). So, what I would suggest is following along the class using Debut. Everything is still relevant to how themes are built today with the notable exception of SCSS being deprecated (which happened before OS2.0 anyways).
Yes, this is a great feature. However, how do I test a theme in a store without having it visible on the LIVE store? Can I really trust the PREVIEW functionality? I guess I would have to create a separate Shopify account for that? (and have to pay a monthly subscription for that too). Or does Shopify support this workflow? Update: I think you have answered my question in your next video
Yes. You can trust the preview. Remember some data exists in your theme and others in your store. If you check this channel for the original Shopify Theme Development Series. You can learn about the difference.
Can you teach us how to integrate updates to our themes? I am using Dawn and have my customized copy on GitHub. I tried to branch my copy and merge in recent updates from the official Dawn repo but got completely clobbered after comparing and accepting changes one by one and wasn’t able to successfully get it merged to the branch or my theme. The official Dawn read me stops after instructing how to set it up as remote upstream and doesn’t go into detail with how to actually evaluate and integrate the changes into our own personal Dawn copies. This is the best Shopify + git video on RUclips, and a walkthrough of the diff/merge process would be awesome.
Hey chad. It's not the kind of video I have planned for RUclips at the moment but I could possibly provide some insight into my personal Git workflow on Patreon. patreon.com/shopifydeveloper
Is there a way to start the theme preview in localhost? Like we do with any web app. That way I could see my changes before I push my changes to the repository. Thanks
Nice vid, Chris. Any chance you could share your VS Code setup? Especially would like to know the extension that formats the terminal to highlight the current repo 👍
@@CodewithChristheFreelancer Cheers, Chris. Just realised I posted as my company lol. Anyway, sussed it. Basically the .zshrc file (found the settings by Googling it). Still struggling with the Prettier extension messing with liquid code on save, though. Steve
Hi mate I just watched this video and your subsequent video about github CLI (Great videos btw!) Would you be able to tell me the specific workflow you use for your version control? Or point me to a video / resource which explains it. Are these the main steps to use?: 1. Use the shopify CLI theme pull command to make a local copy of my live theme 2. Initialise a github repo for the theme and push all files. 3. Import this master branch into my Shopify themes list using the github integration and then set this as the new LIVE theme 4. Create a staging / dev branch in my repo, import this into Shopify themes list as a secondary "development" theme. 5. Make all code changes inside this branch and preview them locally using the Shopify CLI "theme dev" command. 6. Push staged changes to my staging theme. 7. When changes are finalised, merge the branches and push to the master branch (a.k.a LIVE theme) Does that all sound correct? As a follow up question, assuming that its still the case that changes made in the CLI "phantom theme" store editor don't persist after the dev server is closed, if I want to make persistent changes in my theme editor (e.g. changing the product page template) would I have to push these changes to my staging theme, customise the theme linked to this branch in the shopify store editor, then pull these updates back to my local repo? Sorry for the long question! Thanks in advance :)
In order to move away from a flat folder structure, I specify a root folder in the theme-check.yml file. Shopify acknowledges this structure and creates a connected theme from that folder, however, all remote commits pushes everything into the project root rather than the one specified. Any idea how to get around this?
Hey Chris! Is there a way to auto save/commit changes when adding/updating code from our code editor to Github? Kind of like the theme watch feature in theme kit. Currently we have to commit the changes in the code editor then push the changes to github but is there a way to automate this more to where we can just save the changes regularly (command + s) and the changes would push into Github?
Just wondering, why would you want to have literally every single save pushed? It would make it really difficult to look through a git history and breaks why you use git in the first place a little bit
@@JarrodKane Hey Jarrod, thanks for that insight! I was doing some troubleshooting and testing some features so instead of committing the changes then pushing into Github i was looking for something quicker thatll push my changes automatically. However I was thinking about it more and could just use "Shopify Theme Serve" in the CLI as this sounds more practical.
Yep. That's it Tato. You should get into the habit of running your themes locally with 'shopify theme serve', then committing and testing from the theme library every now and then (when it makes sense to do so)
@@CodewithChristheFreelancer Hey Chris, Thank you! I appreciate the response. Love your content, its inspirational! This is off topic but im still having trouble understanding the complexity of (Advanced) Liquid, i will rewatch your Liquid Vid but is there any other resources you recommend?
@@fernandopacheco7025 Per Jarrod's point of not cluttering the git logs: if your trying to "save" the state of some , or all , current theme changes WITHOUT doing a full git commit use gits "stash" feature for a local history. If you use that workflow make an a cli alias to timestamp the stash along with a label you give it, and another alias to be able push/send it as branch/patch. Can be saner though to use a code editor such as VScode or Sublime that can maintain an undo cache even between opening&closing the software, aka persistent undo.
Quick question -> would this also keep say `settings_data.json` and `settings_schema.json` in sync too? Would it keep changes made in the Customizer in sync? or would that still have to be manually copied?
There's a trick if you're running the theme locally. You just run 'theme pull' and then go to the final theme in the list to pull the theme data. Then you can commit those changes along with all your other changes.
Hey, exactly the tutorial I was looking for - much appreciated! Quick question since I'm new to shopify and git: If I change any settings in the online theme customizer, are these all stored in the theme repo and can therefor be fetched from my local repo? Or are there any exceptions I have to be aware of?
Hey mate. Pretty sure the answer is yes but you can always test to make sure. The only exception I can think of is when you're running a development theme (using 'shopify theme serve'). In that case, you have to run 'shopify theme pull' to retrieve the customiser data, then commit to git. Other than that, you should be good.
What if someone makes a change to the Live theme in Shopify and you have a staging branch? Does this mean you need to (locally) pull the Live theme changes and then merge with Staging theme?
Shopify is committing changes to settings_data.json whenever changes are made via the web interface. Adding it to .gitignore doesn't help. Any ideas on how to stop this?
@@CodewithChristheFreelancer Hey! I also have the same issue. The reason why would be for branch management, in the cases where we'd create a new branch and merge it into the main one connected to Shopify. If the settings_data.json is not ignored, the main branch would lose it's most recent settings.
Hi - This is a great video, thank you. One question if i may. When you have your main which is the live site, and then open a branch, do you still make changes to the files you downloaded into the origional directory? Doesnt that then want to change the elements on the main site, while you are working on the development site?
@@CodewithChristheFreelancer thank you! And English is my first language ;( Here goes. I have a local version of my site on my Mac which is synced with my live site. I followed your videos and all worked perfectly. If I create a new branch for dev/staging/local serve - do I need to re-download a new local version of the site to work on? Hope that makes more sense?
Ah what I would do in this case is branch first off of your main branch and then add that theme (branch) via git to the theme library. That way, you're starting with a duplicate of the main theme and you can then start to make your edits.
@@CodewithChristheFreelancer brilliant. Thank you. So leave the main branch as the live theme. Then create a new branch which becomes where I can do my development / edits. And then after testing merge the branches to push my edits live. Do you have a course which covers this? Your videos are great.
You mentioned because of the tool im using im now git(master). What tool are you referring to? I am following the steps and it does not say git(master)
Yes. As I talk about in my other videos, Shopify CLI is just an alternative theme development tool (to Themekit) and 2.0 themes are simply themes with JSON templates. There's no exact distinction between 1.0 and 2.0.
![Shopify CLI for Theme Development (How to use) [Version 2.0]](http://i.ytimg.com/vi/YM0XOa2LZSs/mqdefault.jpg)
![Shopify CLI for Theme Development (How to use) [Version 2.0]](/img/tr.png)
15:00 GOTCHA > View logs is very important to view otherwise silent problems.
If there is validation errors with a file that file will NOT be added the theme installation WILL continue even if that means the theme install is invalid (i.e. missing product.json).
Worse still this can cause a chain reaction when a section/snippet file is omitted-by-error that is supposed to be included in another file... then that containing file will have an error and also be omitted from the install.
YOu will not be informed of this anywhere else, the shopify-online-bot will not create github issues, the integration settings on github has no log, and neither the theme admin ,code-editor, nor the customizer will raise warnings about it.
AMAZING SERIES!
Just got a client who wants a redesign of their shopify store. I work as a fulltime developer but I have never touched shopify until now.
This series has really given me the run down on what I need to know, thank you!
Do you have a website for your services ?
I've started learning Shopify a few days ago and faced the problem that almost every course or tutorial explains how old Shopify works, but when I install Dawn theme a lot stuff is different. Will be glad for video explaining how to built templates using JSON only.
Hi Den. What kind of stuff have you found is different? So far I’ve noticed the use of web components and of course, JSON is now used for templates.
I wish I could thumbs this up 100 times. Also thanks for the article on using Git with Shopify (before Online Store 2.0) -- that's what I need but seeing this in action will have me thinking twice about upgrading a theme to online store 2.0 before deciding to use themekit
FYI the Github Integration works for any theme/store - same as the CLI :)
Unreal video Chris!
1:00 Critical caveat for shopiy's primitive "version control" : It does not work with theme ASSETS, such as theme.js/theme.css/svg's etc.
If your in that situation a last hope is by messing with the parameter '?v' for URL's on the assets CDN gotten with the liquid asset-filters.
Why assets are omitted isn't documented, easy to assume it has something to do with the render-engine cache, the CDN or some historical limitation therein /shrug.
Great video. Looking forward to the new requested video for me. I am waiting to see new tutorials for filtering products by size, color, price, brands, etc by Vue js. Hope you will do it soon. Thanks
Exactly what i was looking for. Thanks for this Awesome Series. Cheers!!!
You're really good at explaining and covering different aspects of the topic! Thanks for making the video!
I have a request, Please make a series of Shopify Basic liquid. There are no well Shopify liquid tutorials out there. Please think about it ❤️
ruclips.net/video/zBtwd2OfZsI/видео.html
@@CodewithChristheFreelancer Thank you. I saw that. It was awesome! That’s why we want you to make a series and teach us liquid extendedly
What did you feel the tutorial was missing? I designed it already to cover all the bases.
Great video - looking forward to upcoming one 👍
Thanks for the video!!
Hey Chris, Thanks vor this tutorial! It was exactly what im looking for and it's obvious that you come from a practical background and real projects. That helps a lot. Please keep up the good work and if you plan a skillshare course / youtube series about app development it would be like christmas and birthday in one day for me :D in any case thank you very much.
Hey Chris,
Nice video, we need a course on headless with graph ql. I did your vue skillshare course, that would be awesome to have something with vue and graphql for headless
I am watching in 2024 but very well explained. Thank you.
This is amazing video. Thank you very much.
min 10:30. When i select my branch "this branch is not a valid theme". Could u help me?
Never seen that one. Judging from the error message though, sounds like you got an invalid theme there haha. I'd say something is wrong with the theme code.
Amazing - great video too. Really appreciate you taking the time explain 💯 💯 💯 💯 💯
cheers brah looking for this info exactly.
How did you get the neat little [master] [staging} on your source line code?
First of all nice video, will you make one about Shopify-cli workflow, I still haven't figured out how to preview changes locally before a "git push"
Literally my next video 😂 ruclips.net/video/YM0XOa2LZSs/видео.html
Tutorial starts at 4:42
We are new to shopify and I watched your courses on skillshare. If possible recreate 2.0 based courses rather than mixing old videos that will be great. I really like your courses.
Because OS2.0 builds upon the current features in Shopify, everything in the class is still relevant.
What I've heard from other students is that they are confused given the default theme has changed from Debut to Dawn.
As I mention in my video going deeper into Dawn, Dawn is not the same thing as OS2.0 (I recommend checking that video out).
So, what I would suggest is following along the class using Debut. Everything is still relevant to how themes are built today with the notable exception of SCSS being deprecated (which happened before OS2.0 anyways).
Great explanation, thanks!
Yes, this is a great feature. However, how do I test a theme in a store without having it visible on the LIVE store? Can I really trust the PREVIEW functionality?
I guess I would have to create a separate Shopify account for that? (and have to pay a monthly subscription for that too). Or does Shopify support this workflow?
Update: I think you have answered my question in your next video
Yes. You can trust the preview. Remember some data exists in your theme and others in your store. If you check this channel for the original Shopify Theme Development Series. You can learn about the difference.
¡YOU ARE THE BEST!
Can you teach us how to integrate updates to our themes? I am using Dawn and have my customized copy on GitHub. I tried to branch my copy and merge in recent updates from the official Dawn repo but got completely clobbered after comparing and accepting changes one by one and wasn’t able to successfully get it merged to the branch or my theme. The official Dawn read me stops after instructing how to set it up as remote upstream and doesn’t go into detail with how to actually evaluate and integrate the changes into our own personal Dawn copies. This is the best Shopify + git video on RUclips, and a walkthrough of the diff/merge process would be awesome.
Hey chad. It's not the kind of video I have planned for RUclips at the moment but I could possibly provide some insight into my personal Git workflow on Patreon. patreon.com/shopifydeveloper
Hey Chris, Great videos!.. Are you using a VS Code Extension to get that cool cursor, e.g. "debut git:(staging)" ?
Nah! It's just Oh My ZSH github.com/ohmyzsh/ohmyzsh
@@CodewithChristheFreelancer Thanks, I'll be sure to check it out and add it!
Is there a way to start the theme preview in localhost? Like we do with any web app. That way I could see my changes before I push my changes to the repository. Thanks
Yeah. Via the Shopfy CLI tool. I have a video on this channel about it.
Thanks Bro, now I feel comfortable to always work with Liquid in my store. If someday you come to Brazil, tell me , then i will pay a beer!
No worries! I'm actually planning on visiting Brazil next year!
Nice vid, Chris. Any chance you could share your VS Code setup? Especially would like to know the extension that formats the terminal to highlight the current repo 👍
Hey Webcetera. That's not a VS Code extension but a terminal thing. Pretty sure that feature is provided by 'Oh my ZSH'
@@CodewithChristheFreelancer Cheers, Chris. Just realised I posted as my company lol. Anyway, sussed it. Basically the .zshrc file (found the settings by Googling it). Still struggling with the Prettier extension messing with liquid code on save, though. Steve
Hey Chris, are you going to update your course to Shopify 2.0?
Hi Ray. I address that question at 21:32. It’s already done.
Hi mate I just watched this video and your subsequent video about github CLI (Great videos btw!)
Would you be able to tell me the specific workflow you use for your version control? Or point me to a video / resource which explains it.
Are these the main steps to use?:
1. Use the shopify CLI theme pull command to make a local copy of my live theme
2. Initialise a github repo for the theme and push all files.
3. Import this master branch into my Shopify themes list using the github integration and then set this as the new LIVE theme
4. Create a staging / dev branch in my repo, import this into Shopify themes list as a secondary "development" theme.
5. Make all code changes inside this branch and preview them locally using the Shopify CLI "theme dev" command.
6. Push staged changes to my staging theme.
7. When changes are finalised, merge the branches and push to the master branch (a.k.a LIVE theme)
Does that all sound correct?
As a follow up question, assuming that its still the case that changes made in the CLI "phantom theme" store editor don't persist after the dev server is closed, if I want to make persistent changes in my theme editor (e.g. changing the product page template) would I have to push these changes to my staging theme, customise the theme linked to this branch in the shopify store editor, then pull these updates back to my local repo?
Sorry for the long question! Thanks in advance :)
This is getting into consulting territory. For any work enquires you can email me at chris@shopifydeveloper.io
In order to move away from a flat folder structure, I specify a root folder in the theme-check.yml file. Shopify acknowledges this structure and creates a connected theme from that folder, however, all remote commits pushes everything into the project root rather than the one specified. Any idea how to get around this?
I was not aware that you could customise the folder structure. Maybe it passes theme check but is still not accepted by Shopify?
Hey Chris!
Is there a way to auto save/commit changes when adding/updating code from our code editor to Github? Kind of like the theme watch feature in theme kit. Currently we have to commit the changes in the code editor then push the changes to github but is there a way to automate this more to where we can just save the changes regularly (command + s) and the changes would push into Github?
Just wondering, why would you want to have literally every single save pushed?
It would make it really difficult to look through a git history and breaks why you use git in the first place a little bit
@@JarrodKane Hey Jarrod, thanks for that insight! I was doing some troubleshooting and testing some features so instead of committing the changes then pushing into Github i was looking for something quicker thatll push my changes automatically. However I was thinking about it more and could just use "Shopify Theme Serve" in the CLI as this sounds more practical.
Yep. That's it Tato. You should get into the habit of running your themes locally with 'shopify theme serve', then committing and testing from the theme library every now and then (when it makes sense to do so)
@@CodewithChristheFreelancer Hey Chris, Thank you! I appreciate the response. Love your content, its inspirational! This is off topic but im still having trouble understanding the complexity of (Advanced) Liquid, i will rewatch your Liquid Vid but is there any other resources you recommend?
@@fernandopacheco7025 Per Jarrod's point of not cluttering the git logs: if your trying to "save" the state of some , or all , current theme changes WITHOUT doing a full git commit use gits "stash" feature for a local history. If you use that workflow make an a cli alias to timestamp the stash along with a label you give it, and another alias to be able push/send it as branch/patch.
Can be saner though to use a code editor such as VScode or Sublime that can maintain an undo cache even between opening&closing the software, aka persistent undo.
Quick question -> would this also keep say `settings_data.json` and `settings_schema.json` in sync too? Would it keep changes made in the Customizer in sync? or would that still have to be manually copied?
There's a trick if you're running the theme locally. You just run 'theme pull' and then go to the final theme in the list to pull the theme data. Then you can commit those changes along with all your other changes.
How can I auto update the version label unter the theme name? thanks
Hey Chirs.. First comment :D
Hey, exactly the tutorial I was looking for - much appreciated! Quick question since I'm new to shopify and git: If I change any settings in the online theme customizer, are these all stored in the theme repo and can therefor be fetched from my local repo? Or are there any exceptions I have to be aware of?
Hey mate. Pretty sure the answer is yes but you can always test to make sure.
The only exception I can think of is when you're running a development theme (using 'shopify theme serve'). In that case, you have to run 'shopify theme pull' to retrieve the customiser data, then commit to git.
Other than that, you should be good.
What if someone makes a change to the Live theme in Shopify and you have a staging branch? Does this mean you need to (locally) pull the Live theme changes and then merge with Staging theme?
Yep! I would recommend my clients not to make changes to the live branch for this reason.
Shopify is committing changes to settings_data.json whenever changes are made via the web interface. Adding it to .gitignore doesn't help. Any ideas on how to stop this?
Hey mate. Why is it important to you to stop it?
@@CodewithChristheFreelancer Hey! I also have the same issue. The reason why would be for branch management, in the cases where we'd create a new branch and merge it into the main one connected to Shopify. If the settings_data.json is not ignored, the main branch would lose it's most recent settings.
can I ask, what extension or terminal do you use to get those nice colors in vs code terminal?
Can you reference a particular timecode and section of the screen at that timecode where you're seeing this?
Hi - This is a great video, thank you. One question if i may. When you have your main which is the live site, and then open a branch, do you still make changes to the files you downloaded into the origional directory? Doesnt that then want to change the elements on the main site, while you are working on the development site?
Hi Guy. Please check your grammar. I was not able to make sense of what you were asking.
@@CodewithChristheFreelancer thank you! And English is my first language ;(
Here goes.
I have a local version of my site on my Mac which is synced with my live site. I followed your videos and all worked perfectly.
If I create a new branch for dev/staging/local serve - do I need to re-download a new local version of the site to work on?
Hope that makes more sense?
Ah what I would do in this case is branch first off of your main branch and then add that theme (branch) via git to the theme library. That way, you're starting with a duplicate of the main theme and you can then start to make your edits.
@@CodewithChristheFreelancer brilliant. Thank you. So leave the main branch as the live theme. Then create a new branch which becomes where I can do my development / edits. And then after testing merge the branches to push my edits live. Do you have a course which covers this? Your videos are great.
I talk about it in this video: www.patreon.com/posts/git-workflow-vs-67871628
Where do you get the clean source code for the theme? I need it for Dawn theme
github.com/Shopify/dawn
Thanks bro 🤟
No problem 👍
Magnificent
You mentioned because of the tool im using im now git(master). What tool are you referring to? I am following the steps and it does not say git(master)
Pretty sure the tool you're referring to is called Oh My Zsh
@@CodewithChristheFreelancer Thanks Chris.
amazing, thanks.
You basically just open up VSC and there's your theme. Would have been useful to add in how you did that and got set up for beginners.
whrn i connect to github I get error branch isn't a valid theme any solutions?
I think the error probably describes the issue here. Your theme doesn't match what Shopify deems as a 'valid theme'.
really helpful th so much
Hey man, you might have unintentionally unblurred your guthub projects as the video transitioned to another screen.
Thanks for the heads up! Not a big deal though I don't think.
Is it possible to use this integration with themekit and 1.0 themes?
Yes. As I talk about in my other videos, Shopify CLI is just an alternative theme development tool (to Themekit) and 2.0 themes are simply themes with JSON templates. There's no exact distinction between 1.0 and 2.0.
Thank You So much 👍
You are welcome!
How do I get the same prompt that you have?
what prompt?
@@CodewithChristheFreelancer git prompt in the terminal window
Can i get a demo theme just to test git integration
Just use Dawn or any other free theme from Shopify.
👍👍
Thank you
You're welcome!
thanks
kayshing!
The way you say cache is absolutely illegal
how do you say it?
@@CodewithChristheFreelancer Same pronunciation as cash. Appreciate the Shopify content. Will be going through it this weekend :)
dayboo!
bruh you have the same tutorial for 5 mins
Not sure what you mean by that. The video is 20mins+ long
Thank you💌💌💌
Amazing. Thank you! 🙏🏻
Thank you