How to use Github with Shopify (Online Store 2.0)
Рет қаралды 30,331
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
-----------------------------
In today's video, we discuss the one of the coolest features of Online Store 2.0, the new Github integration.
Previously, theme code had to be synced manually with Git branches but now, Shopify can synchronise automatically using Github.
Links Mentioned
----------------------------
My article on using Git with Shopify
christopherdodd.com/git-with-...
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
@mtwata 2 жыл бұрын
You're really good at explaining and covering different aspects of the topic! Thanks for making the video!
@liamgriffin6897 2 жыл бұрын
Unreal video Chris!
@devcodenext 2 жыл бұрын
Exactly what i was looking for. Thanks for this Awesome Series. Cheers!!!
@noone-gh1nr 2 жыл бұрын
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
@daedalus5070 2 жыл бұрын
FYI the Github Integration works for any theme/store - same as the CLI :)
@jesperahlbom 2 жыл бұрын
Great video - looking forward to upcoming one 👍
@benjamin.konopka Жыл бұрын
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.
@stevenhabel6677 2 жыл бұрын
Amazing - great video too. Really appreciate you taking the time explain 💯 💯 💯 💯 💯
@valentin_gif 2 жыл бұрын
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!
@KaiBleu 2 жыл бұрын
Do you have a website for your services ?
@sergeyborunov5551 2 жыл бұрын
This is amazing video. Thank you very much.
@andreasdevjs298 2 жыл бұрын
Thanks for the video!!
@moigncoin4870 2 жыл бұрын
cheers brah looking for this info exactly.
@abdulrakib9906 2 жыл бұрын
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
@dawid_dahl 2 жыл бұрын
Amazing. Thank you! 🙏🏻
@kirstyvanacker4208 2 жыл бұрын
Great explanation, thanks!
@hassasraf 2 жыл бұрын
Magnificent
@joeeverett7334 Жыл бұрын
amazing, thanks.
@FlowVII 2 жыл бұрын
¡YOU ARE THE BEST!
@denmccormik7654 2 жыл бұрын
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.
@CodewithChristheFreelancer 2 жыл бұрын
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.
@muratkaracabey2490 2 жыл бұрын
perfect video
@hoorzahid4177 Жыл бұрын
really helpful th so much
@MarceloDiasSchneider 2 жыл бұрын
Thank you
@mahedihasanmahmud8329 2 жыл бұрын
Hey Chirs.. First comment :D
@twinklemittal5754 Жыл бұрын
Thank You So much 👍
@CodewithChristheFreelancer Жыл бұрын
You are welcome!
@speedfreaksusa2 2 жыл бұрын
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
@Raihan004 2 жыл бұрын
thanks
@TheNewton 2 жыл бұрын
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.
@nguyenthanh2524 2 жыл бұрын
Thanks bro 🤟
@CodewithChristheFreelancer 2 жыл бұрын
No problem 👍
@mahedihasanmahmud8329 2 жыл бұрын
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 ❤️
@CodewithChristheFreelancer 2 жыл бұрын
kzfaq.info/get/bejne/sKikqsdjtMy-o30.html
@mahedihasanmahmud8329 2 жыл бұрын
@@CodewithChristheFreelancer Thank you. I saw that. It was awesome! That’s why we want you to make a series and teach us liquid extendedly
@CodewithChristheFreelancer 2 жыл бұрын
What did you feel the tutorial was missing? I designed it already to cover all the bases.
@TheNewton 2 жыл бұрын
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.
@gustavorizzoalbuquerque5834 Жыл бұрын
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!
@CodewithChristheFreelancer Жыл бұрын
No worries! I'm actually planning on visiting Brazil next year!
@FreaksOnSofa 2 жыл бұрын
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?
@CodewithChristheFreelancer 2 жыл бұрын
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.
@UmbertoFontanazza 2 жыл бұрын
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"
@CodewithChristheFreelancer 2 жыл бұрын
Literally my next video 😂 kzfaq.info/get/bejne/j7Ngi7KSl7K-g6c.html
@BrendanMetcalfe 2 жыл бұрын
👍👍
@sidharthsankh 2 жыл бұрын
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.
@CodewithChristheFreelancer 2 жыл бұрын
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).
@totallytotallyamazin 2 жыл бұрын
Hey Chris, Great videos!.. Are you using a VS Code Extension to get that cool cursor, e.g. "debut git:(staging)" ?
@CodewithChristheFreelancer 2 жыл бұрын
Nah! It's just Oh My ZSH github.com/ohmyzsh/ohmyzsh
@totallytotallyamazin 2 жыл бұрын
@@CodewithChristheFreelancer Thanks, I'll be sure to check it out and add it!
@user-qe2ps9vm9o 3 ай бұрын
dayboo!
@user-qe2ps9vm9o 3 ай бұрын
kayshing!
@webceterauk Жыл бұрын
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 Жыл бұрын
Hey Webcetera. That's not a VS Code extension but a terminal thing. Pretty sure that feature is provided by 'Oh my ZSH'
@webceterauk Жыл бұрын
@@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
@savant_spoon_bender 2 жыл бұрын
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?
@CodewithChristheFreelancer 2 жыл бұрын
I was not aware that you could customise the folder structure. Maybe it passes theme check but is still not accepted by Shopify?
@tai7123 Жыл бұрын
can I ask, what extension or terminal do you use to get those nice colors in vs code terminal?
@CodewithChristheFreelancer Жыл бұрын
Can you reference a particular timecode and section of the screen at that timecode where you're seeing this?
@beckyboyce7131 2 жыл бұрын
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?
@CodewithChristheFreelancer 2 жыл бұрын
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.
@afterseks Жыл бұрын
Hi, nice video, thanks. I have one question. How can I open a Shopify store in local development mode and update files in development mode, after every change, like "yarn dev" does I mean nodemon
@CodewithChristheFreelancer Жыл бұрын
That's exactly what the Shopify CLI is for shopify.dev/themes/tools/cli Gonna be making a video on upgrading from v2 to v3 soon.
@aldrin1056 Жыл бұрын
How can I auto update the version label unter the theme name? thanks
@rayediaz 2 жыл бұрын
Hey Chris, are you going to update your course to Shopify 2.0?
@CodewithChristheFreelancer 2 жыл бұрын
Hi Ray. I address that question at 21:32. It’s already done.
@GuyLevine 2 жыл бұрын
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 2 жыл бұрын
Hi Guy. Please check your grammar. I was not able to make sense of what you were asking.
@GuyLevine 2 жыл бұрын
@@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?
@CodewithChristheFreelancer 2 жыл бұрын
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.
@GuyLevine 2 жыл бұрын
@@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.
@CodewithChristheFreelancer 2 жыл бұрын
I talk about it in this video: www.patreon.com/posts/git-workflow-vs-67871628
@pauls6277 5 ай бұрын
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
@CodewithChristheFreelancer 5 ай бұрын
Yeah. Via the Shopfy CLI tool. I have a video on this channel about it.
@fernandopacheco7025 2 жыл бұрын
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?
@JarrodKane 2 жыл бұрын
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
@fernandopacheco7025 2 жыл бұрын
@@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.
@CodewithChristheFreelancer 2 жыл бұрын
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)
@fernandopacheco7025 2 жыл бұрын
@@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?
@TheNewton 2 жыл бұрын
@@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.
@JakBeat Жыл бұрын
Where do you get the clean source code for the theme? I need it for Dawn theme
@CodewithChristheFreelancer Жыл бұрын
github.com/Shopify/dawn
@chad.765 2 жыл бұрын
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 KZfaq, and a walkthrough of the diff/merge process would be awesome.
@CodewithChristheFreelancer 2 жыл бұрын
Hey chad. It's not the kind of video I have planned for KZfaq at the moment but I could possibly provide some insight into my personal Git workflow on Patreon. patreon.com/shopifydeveloper
@elliotgluckster 6 ай бұрын
Tutorial starts at 4:42
@grephenson Жыл бұрын
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?
@CodewithChristheFreelancer Жыл бұрын
Yep! I would recommend my clients not to make changes to the live branch for this reason.
@elaistech 2 жыл бұрын
min 10:30. When i select my branch "this branch is not a valid theme". Could u help me?
@CodewithChristheFreelancer 2 жыл бұрын
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.
@kevinok3491 2 жыл бұрын
Is it possible to use this integration with themekit and 1.0 themes?
@CodewithChristheFreelancer 2 жыл бұрын
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.
@name777 2 жыл бұрын
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 2 жыл бұрын
Hey mate. Why is it important to you to stop it?
@Mcbootysauce 2 жыл бұрын
@@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.
@AnthonyAngelinaFarrellLin Жыл бұрын
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)
@CodewithChristheFreelancer Жыл бұрын
Pretty sure the tool you're referring to is called Oh My Zsh
@AnthonyAngelinaFarrellLin Жыл бұрын
@@CodewithChristheFreelancer Thanks Chris.
@farhansheikh3225 2 жыл бұрын
whrn i connect to github I get error branch isn't a valid theme any solutions?
@CodewithChristheFreelancer 2 жыл бұрын
I think the error probably describes the issue here. Your theme doesn't match what Shopify deems as a 'valid theme'.
@user-qh7gk6wx4z Жыл бұрын
Can i get a demo theme just to test git integration
@CodewithChristheFreelancer Жыл бұрын
Just use Dawn or any other free theme from Shopify.
@dassolution3094 Жыл бұрын
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.
@noel2002 2 жыл бұрын
Hey man, you might have unintentionally unblurred your guthub projects as the video transitioned to another screen.
@CodewithChristheFreelancer 2 жыл бұрын
Thanks for the heads up! Not a big deal though I don't think.
@010timeboy27 2 жыл бұрын
The way you say cache is absolutely illegal
@CodewithChristheFreelancer 2 жыл бұрын
how do you say it?
@010timeboy27 2 жыл бұрын
@@CodewithChristheFreelancer Same pronunciation as cash. Appreciate the Shopify content. Will be going through it this weekend :)
@jonakiralo8519 2 жыл бұрын
Thank you
@CodewithChristheFreelancer 2 жыл бұрын
You're welcome!
Code with Chris the Freelancer
Рет қаралды 37 М.
Code with Chris the Freelancer
Рет қаралды 21 М.
Coding with Jan - Shopify Developer
Рет қаралды 63 М.
Jacob Elbaum - Shopify Sales Funnels
Рет қаралды 178