How to use Github with Shopify (Online Store 2.0)

Подписаться 16 тыс.

Просмотров 31 тыс.

50% 1

To go deeper into Shopify Liquid, check out my full course:
www.shopifythe...
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....
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
christopherdod...
Check out my stuff online...
My Skillshare.com channel:
www.skillshare...
My travel channel:
/ christhefreelancer
My website:
christhefreela...
My socials:
Instagram: / christhefreelancer
Facebook: / christhefreelancer
Twitter: / chrisrdodd

Опубликовано:

18 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 112

@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 ?

@denmccormik7654 3 года назад

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 3 года назад

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.

@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 :)

@liamgriffin6897 3 года назад

Unreal video Chris!

@andreasdevjs298 3 года назад

Thanks for the video!!

@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

@mahedihasanmahmud8329 3 года назад

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 3 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-zBtwd2OfZsI.html

@mahedihasanmahmud8329 3 года назад

@@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 3 года назад

What did you feel the tutorial was missing? I designed it already to cover all the bases.

@mtwata 2 года назад

You're really good at explaining and covering different aspects of the topic! Thanks for making the video!

@jesperahlbom 3 года назад

Great video - looking forward to upcoming one 👍

@devcodenext 2 года назад

Exactly what i was looking for. Thanks for this Awesome Series. Cheers!!!

@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.

@moigncoin4870 2 года назад

cheers brah looking for this info exactly.

@FlowVII 3 года назад

¡YOU ARE THE BEST!

@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.

@nguyenthanh2524 2 года назад

Thanks bro 🤟

@CodewithChristheFreelancer 2 года назад

No problem 👍

@sergeyborunov5551 3 года назад

This is amazing video. Thank you very much.

@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.

@mahedihasanmahmud8329 3 года назад

Hey Chirs.. First comment :D

@stevenhabel6677 2 года назад

Amazing - great video too. Really appreciate you taking the time explain 💯 💯 💯 💯 💯

@speedfreaksusa2 3 года назад

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

@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).

@kirstyvanacker4208 2 года назад

Great explanation, thanks!

@gustavorizzoalbuquerque5834 2 года назад

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 2 года назад

No worries! I'm actually planning on visiting Brazil next year!

@muratkaracabey2490 2 года назад

perfect video

@UmbertoFontanazza 3 года назад

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 3 года назад

Literally my next video 😂 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YM0XOa2LZSs.html

@lala_is_003 Месяц назад

How did you get the neat little [master] [staging} on your source line code?

@BrendanMetcalfe 3 года назад

👍👍

@joeeverett7334 Год назад

amazing, thanks.

@name777 3 года назад

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 3 года назад

Hey mate. Why is it important to you to stop it?

@Mcbootysauce 3 года назад

@@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.

@MarceloDiasSchneider 2 года назад

Thank you

@twinklemittal5754 Год назад

Thank You So much 👍

@CodewithChristheFreelancer Год назад

You are welcome!

@hassasraf 2 года назад

Magnificent

@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?

@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!

@aldrin1056 Год назад

How can I auto update the version label unter the theme name? thanks

@pauls6277 8 месяцев назад

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 7 месяцев назад

Yeah. Via the Shopfy CLI tool. I have a video on this channel about it.

@elliotgluckster 8 месяцев назад

Tutorial starts at 4:42

@Raihan004 2 года назад

thanks

@hoorzahid4177 2 года назад

really helpful th so much

@rayediaz 3 года назад

Hey Chris, are you going to update your course to Shopify 2.0?

@CodewithChristheFreelancer 3 года назад

Hi Ray. I address that question at 21:32. It’s already done.

@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.

@fernandopacheco7025 3 года назад

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 3 года назад

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 3 года назад

@@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 3 года назад

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 3 года назад

@@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.

@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.

@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 RU-vid, 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 RU-vid at the moment but I could possibly provide some insight into my personal Git workflow on Patreon. patreon.com/shopifydeveloper

@webceterauk 2 года назад

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 2 года назад

Hey Webcetera. That's not a VS Code extension but a terminal thing. Pretty sure that feature is provided by 'Oh my ZSH'

@webceterauk 2 года назад

@@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

@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.

@user-qe2ps9vm9o 6 месяцев назад

kayshing!

@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.

@user-qe2ps9vm9o 6 месяцев назад

dayboo!

@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.

@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'.

@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.

@JakBeat Год назад

Where do you get the clean source code for the theme? I need it for Dawn theme

@CodewithChristheFreelancer Год назад

github.com/Shopify/dawn

@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

@noel2002 3 года назад

Hey man, you might have unintentionally unblurred your guthub projects as the video transitioned to another screen.

@CodewithChristheFreelancer 3 года назад

Thanks for the heads up! Not a big deal though I don't think.

@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.

@hiteshbk-p7g Год назад

Can i get a demo theme just to test git integration

@CodewithChristheFreelancer Год назад

Just use Dawn or any other free theme from Shopify.

@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.