How to use Github with Shopify (Online Store 2.0)
Вставка
- Опубліковано 15 сер 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
-----------------------------
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
![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)
You're really good at explaining and covering different aspects of the topic! Thanks for making the video!
Unreal video Chris!
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 :)
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 ?
Exactly what i was looking for. Thanks for this Awesome Series. Cheers!!!
Great video - looking forward to upcoming one 👍
Thanks for the video!!
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.
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.
Great explanation, thanks!
amazing, thanks.
This is amazing video. Thank you very much.
Amazing - great video too. Really appreciate you taking the time explain 💯 💯 💯 💯 💯
cheers brah looking for this info exactly.
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
Amazing. Thank you! 🙏🏻
¡YOU ARE THE BEST!
Thank you
perfect video
really helpful th so much
Thank You So much 👍
You are welcome!
Magnificent
thanks
Thanks bro 🤟
No problem 👍
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.
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 have a request, Please make a series of Shopify Basic liquid. There are no well Shopify liquid tutorials out there. Please think about it ❤️
ua-cam.com/video/zBtwd2OfZsI/v-deo.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.
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.
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.
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).
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 😂 ua-cam.com/video/YM0XOa2LZSs/v-deo.html
Tutorial starts at 4:42
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!
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, 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!
Hey Chirs.. First comment :D
How can I auto update the version label unter the theme name? thanks
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 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.
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
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.
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?
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
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.
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 - 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
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 UA-cam, and a walkthrough of the diff/merge process would be awesome.
Hey chad. It's not the kind of video I have planned for UA-cam at the moment but I could possibly provide some insight into my personal Git workflow on Patreon. patreon.com/shopifydeveloper
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.
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.
Where do you get the clean source code for the theme? I need it for Dawn theme
github.com/Shopify/dawn
kayshing!
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.
dayboo!
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.
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.
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'.
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.
Can i get a demo theme just to test git integration
Just use Dawn or any other free theme from Shopify.
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.
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 :)
Thank you
You're welcome!