Shopify Hydrogen and Oxygen for beginners

Рет қаралды 27,927

Жыл бұрын

Shopify Hydrogen is a brand new front-end web development framework, but why and when should you use it and how do you even get started? That’s exactly what we’re covering in this video.
► Free Help
--------------------------------------------------------------------------
🎯 Get Personal Career Advice for Shopify Developers:
codingwithjan.com/personal-career-advice?
👨‍💻 Find a qualified Shopify Developer for your next project:
codingwithjan.com/hire-a-developer?
► Contact
--------------------------------------------------------------------------
🌐 Website
codingwithjan.com
🤝 LinkedIn
www.linkedin.com/in/jan-frey/
📚 Recommended Resources:
Hydrogen Overview: shopify.dev/custom-storefronts/hydrogen
Shopify Oxygen: shopify.dev/custom-storefronts/oxygen
Shopify Partners: www.shopify.com/partners
Hydrogen Templates: shopify.dev/custom-storefronts/hydrogen/templates
Shopify CLI: shopify.dev/themes/tools
#shopifypartner
🔎 SEO Description:
In this video, we cover the new react framework Hydrogen for creating Shopify custom storefront.
So if you are a Shopify developer you may want to learn when and why to use a custom storefront, and how to get started using a demo template. In addition to hydrogen, we also cover Shopify Oxygen which is a Shopify solution for hosting your custom storefront which uses GitHub.
#Shopify-Partner

Пікірлер: 91

@CodingWithJan 2 ай бұрын

🎯 Get Personal Career Advice for Shopify Developers: codingwithjan.com/personal-career-advice 👨‍💻 Find a qualified Shopify Developer for your next project: codingwithjan.com/hire-a-developer

@mrmaglet Жыл бұрын

You explained that hydrogen is in 5 min. Something the acutal Hydrogen site failed to document. Thank you 😊😊

@shuibabdullah4932 Жыл бұрын

Great video Jan! a server-side video in-depth would be perfect

@cordelldev 4 ай бұрын

Great overview, thanks Jan!

@human_error1 8 ай бұрын

Thanks for making this a much easier way to digest this framework. Im going to take what I've seen here and put it into practice over the coming weekend. Thanks Jan!

@CodingWithJan 8 ай бұрын

Glad it was helpful!

@chetanpatole7199 Жыл бұрын

Thanks Jan please continue these series

@Jeffzouavf Жыл бұрын

Thanks Jan! Next video a multi colom slider?👍

@zubairblaze Жыл бұрын

You took your sweet time. I was waiting for your video. Thanks

@CodingWithJan Жыл бұрын

haha there we go 😁 Most welcome 🙌

@yogeshamane7061 Жыл бұрын

You are providing really great videos and information. Keep publishing. I 💕 your way videos and Shopify development.

@daveharrison9248 Жыл бұрын

in your workflow when you clone the repository locally i was wondering if you HAVE To use yarn or if you can also use NPM?

@taylorcovington3314 Жыл бұрын

Hey Jan, will you guys be teaching Hydrogen to build custom storefronts in Freemote?

@Denisfutbol 9 ай бұрын

Hi Jan! Is there a way to add conditions in the product page? For example: "Do you want to engrave a message on the product?" Yes / No. If yes → Input your message (string). I need this for my shop, and I'm willing to integrate Hydrogen for this, but I can't seem to find out if this is at all possible. Thanks!

@JwlzStylE Жыл бұрын

I think you talked about templates of hydrogen. Where can we find these?

@arslanali5025 Жыл бұрын

It's amazing Jan. Hoping to get more videos about the hydrogen.

@CodingWithJan Жыл бұрын

I will think about, thanks for the suggestion 😁

@hasanmougharbel8030 Жыл бұрын

Hey there, Glad to discover your channel. I am a newbie at shopify development with a simple enquiry. Is there any community or forum through which i can network with like-mind programmers and where i can ask technical questions related to my coding in shopify. Thanks for any recommendations.

@shopifyguy5052 Жыл бұрын

Finally, an actual explanation of what headless even means. Shopify should pay you for these videos.

@CodingWithJan Жыл бұрын

Glad they did 😁

@mystupidbrain5299 Жыл бұрын

Would love to here your thoughts on Shopify squiring Remix JS and the impact it will have.

@birsingh5388 Жыл бұрын

Is there no need to create apps for Shopify if we use storefront hydrogen and can manage everything from there by creating custom storefront?

@phantazzor 11 ай бұрын

cool thanks, so you seem to be the person to ask, I'm new to shopify and I'm a react dev. I'm not affraid of liquid but is there any advantages to liquid ? is plugin/package added really slows it down ? maybe only good if you want to use the dawn theme and sell few products right, saves up a lot of time I guess and maybe the strategy would be to create a custom one while your liquid theme is up ? AND SHOPIFY PLUS IS NOT FREE RIGHT ?where would you deploy it not oxygen? THANKS

@propertiesofgabe3865 Жыл бұрын

Fantastic video! Thank you!

@CodingWithJan Жыл бұрын

Awesome man, thanks so much :-) 🙌

@AgustinMoyaca Жыл бұрын

Hey, would be so interesting a complete course of Hydrogen, is it in mind???

@JordanMattKim 7 ай бұрын

do I need to know how to code to use Hydrogen?! is there any tools that can get me there in a short term?

@Jan-jf4th Жыл бұрын

More of This Jan!

@neelthakkar5346 Жыл бұрын

how to publish live ??

@user-yg6zy3ko3h Жыл бұрын

Very nice video.

@quentincaldway Жыл бұрын

Your videos are always next level! Excited for these react lessons as well! *insider* - They should definitely be useful for creating / managing the Oxygen + Hydrogen Shopify templates as devs. As always I appreciate the time you put into these videos. It blows my mind why you don'g have more likes, and yet you choose to stay consistent regardless! Looking forward for more content related to these new templates and features! ~Cheers!

@svenhoman5657 Жыл бұрын

Awesome stuff!!

@collinsmbaka Жыл бұрын

Hey Jan - thank you for the video. It is really useful, I would like to see how to custom code bundling feature into a storefront like this. So if you develop a storefront, how you can add product bundling feature to it?

@MinhThongLuu Жыл бұрын

Hi Collins, We developed the bundling feature in our Hydrogen theme. The solution is using discount feature.

@m.muzamilabbasi2803 Жыл бұрын

Amazing Introduction to Hydrogen

@CodingWithJan Жыл бұрын

Thanks! Happy that you enjoyed it :-) 🙌

@nri_raj Жыл бұрын

Please make more videos on hydrogen

@shivamjha8985 8 ай бұрын

I just wanted to know that if someone has a theme then how can they use Hydrogen to add components for this. Like I have a theme. I need to make a custom page for showing the people who won a lucky draw on buying my products. Now to do that I don't know how to use liquid. But I know I how to design it in React so how can I do it using Hydrogen for my store.

@AnthonyCandaele Жыл бұрын

Great introduction! I'm looking really forward to a course where we build step by step a webshop and deploy it on Oxygen. I'm interested in the different components and how to implement them.

@CodingWithJan Жыл бұрын

Will definitely consider it, thanks for the suggestion and the great feedback 😉

@dianrahmaji Жыл бұрын

echo this ✨

@youknownuno Жыл бұрын

Hi Jan! Great video, as always. Given all the options available today, I have a question for you : What stack would you use to create a custom react shopping experience inside an existing shopify storefront ? Headless seems amazing, but it would mean rebuilding everything, and that would also mean that the shop owners would be completely dependent on react developers for that matter. I'm currently weighing the options, and for me, a seamless developer experience with quick iterations and version control is king ! Thanks !

@hamburger-fries Жыл бұрын

t3 stack

@GroupHIIT Жыл бұрын

We're curious about this too. Is it possible to use hydrogen as a hybrid solution just for one product checkout experience while keeping the rest of the liquid based theme / website in tact? Or in that case, you just use the storefront API?

@iancallaghan9987 Жыл бұрын

It is awesome unless there is vendor lock-in with oxygen. Shopify plus seems way too expensive just to have a custom storefront. I mean this should work with the starter 5 usd plan.

@atulgavali4249 Жыл бұрын

Informative as usual

@CodingWithJan Жыл бұрын

I'll take it as a compliment! :D

@ericgirirealestate1592 Жыл бұрын

Thanks Jan for update. Quick question, is there anyway to remove shipping page and take directly to checkout from cart ? I have a store that doesn’t need shipping page at all. Looking for your reply. Regards

@CodingWithJan Жыл бұрын

Hey Eric, you could mark your products as "digital products" :-)

@ericgirirealestate1592 Жыл бұрын

@@CodingWithJan Hey Jan, thanks for reply I tried that too but it still takes to shipping page. Am I missing something?

@weodestry Жыл бұрын

Hey, Jan thanks for this beautiful introduction, don't worry about that access token it's a Public token.

@CodingWithJan Жыл бұрын

😁

@muji_pen Жыл бұрын

Thanks for the video! How were you able to get Plus features enabled on your dev store? Is that for Plus partners only? Partner support told me Oxygen on a dev store isn't possible XD

@CodingWithJan Жыл бұрын

Yeah you're right, it was because we were collaborating with Shopify on these videos, and they had been able to set that flag for a while 😄

@muji_pen Жыл бұрын

@@CodingWithJan Gotcha! Plus's "Sandbox Store" as opposed to development store. Thanks Jan

@SalonSonikPasadena 9 ай бұрын

Any way there is a simple app we can use to speed up on mobile views.

@JohnBYoutube Жыл бұрын

Nice option shopify is adding, curious to know, I assume there will be no more functionality of theme customizer? We would need to keep updating the files? i.e. custom, so it never can be changed easily. The store owner will need to keep a dev on hand, although his options have now expanded, beyond shopify developers, this could mean shopify developers don't have the upper edge :D. I'll stick with theme customizers, I only seeing this solution coming to play if the store owner is a very big business, and store speed is number 1 for them, and as you mentioned oxygen hosting only for plus right now. I don't even think Shopify plus people will flock on this, I have a few plus clients, and they are heavy on customizer use.

@CodingWithJan Жыл бұрын

Hey John, great perspective and I definitely agree with all you said. :-) Hydrogen makes it easier to build very custom storefronts. And "custom" can always be seen as a PRO and a CON at the same time because as you said, you'll definitely need a developer at hand. For most merchants, starting with a theme + utilizing customizer will still be the most cost-effective way!

@davidgrana1268 Жыл бұрын

I'm having a hard time understanding whether this uses the store theme or not, what i already purchased a theme? can i use it with hydrogen?

@MinhThongLuu Жыл бұрын

With Hydrogen, you will no longer use Liquid to build and modify custom Shopify themes.

@asadullahbaig5698 Жыл бұрын

Very informative jan 💯 Should i learn react before start working on liquid?

@CodingWithJan Жыл бұрын

Hey Asad, Thanks for the awesome feedback 🎉 Liquid is for building and editing themes, and React is for building custom storefronts Your choice will depend on what you want to specialize in 😄

@asadullahbaig5698 Жыл бұрын

@@CodingWithJan Okay Jan got your point 👌🌟

@CodingWithJan Жыл бұрын

As a rule of thumb I'd learn liquid first :-) It's also easier as a beginner

@asadullahbaig5698 Жыл бұрын

@@CodingWithJan Thank you soo much Jan I'm very happy to read your kind advice 😅 I'm learning liquid as i have added it to my to-do list on daily basis. I have learn so far how to built custom templates and now want to accelerate my skills so what should be my next step ? Once again many many thanks 🤩

@michaelgergen4318 Жыл бұрын

Hey Jan! Hydrogen seems exciting, but Oxygen comes with a big price tag ($2000/mo for Shopify Plus)! Can you recommend any viable alternatives to Oxygen for use with Hydrogen?

@CodingWithJan Жыл бұрын

Hey Michael, probably anything that can host a react application works. :-) Heroku being one example. --- That being said, I also think custom hydrogen storefront should rather be considered if you already have an enterprise brand. Cause it's so expensive as a whole.

@vinitasharda2678 Жыл бұрын

Thanks Jan :) I have one technical query, Can we create a new app in Hydrogen also Can we update already created app with Hydrogen?

@CodingWithJan Жыл бұрын

If you have an app that only acts on the Shopify Backend (invoices for orders for example) that will still work perfectly fine. However, if you have an app that injects code into a theme, that will no longer work with your custom storefront. In that case, you'd probably write your own code. :-)

@julianzagar2000 Жыл бұрын

Hey Jan, your access token was still visible in the video! Just wanted to let you know

@CodingWithJan Жыл бұрын

Hello Internet, welcome to my dev store 😁

@jonice4229 Жыл бұрын

can be used also with vue?

@CodingWithJan Жыл бұрын

In theory yes, but since hydrogen is react based, adding Vue seems kinda overkill :D If you want to build your own custom storefront in view, you should rather start from scratch IMHO

@waseemchaudhary3138 Жыл бұрын

Would Hydrogen and Oxygen be added in Freemote course?

@CodingWithJan Жыл бұрын

Hey Wassem, for the moment that's not planned. We do have a strong section on react, and we might have a longer bonus video on Hydrogen too, but I think for most merchants out there, starting with a theme would still be a lot more cost-effective. Freemote is all about building an income and earning your freedom as a developer, and currently, there are just far more theme-based paid projects out there than for hydrogen. :-)

@CodeInspire Жыл бұрын

Thank you Jan! You forgot to blur your API key 😄

@CodingWithJan Жыл бұрын

No worries, I trust you 😁

@nghiahoang765 11 күн бұрын

6:40

@samuelwawina2373 Жыл бұрын

Interesting! When will Hydrogen completely take over Liquid ?

@CodingWithJan Жыл бұрын

Not sure if that would ever happen. :-) 'Liquid will still be used in themes, and if your brand can operate on a prebuilt theme, that's a super cost-effective way to get started. Hydrogen on the other hand would rather be an option for larger brands who really want something unique and custom. :-)

@johnalexander4242 10 ай бұрын

So what just happened someone please explain simply

@koolio1100 Жыл бұрын

Oxygen only works with a plus plan which is $2000 per month. For learning in a dev environment why even bother?

@alexmorris3648 Жыл бұрын

Woah hold on... you could totally make a theme work for any context. Smart fridge or whatever

@CodingWithJan Жыл бұрын

Maybe if the smart fridge had a browser installed 😁 But other than that, I don't see a way ^^

@alexmorris3648 Жыл бұрын

@@CodingWithJan Of course it would, or you could wrap some simple webkit/chrome thing. You'd need that for React anyway!

@arvylynogoy9341 Жыл бұрын

Me customising the dawn theme. And me waiting for part 2 for this content. 👉👈

@CodingWithJan Жыл бұрын

Dawn is also awesome! :-) Personally, I think Hydrogen is rather an option for larger brands. Could be part of the reason why Oxygen is only available on Plus and soon on Advanced plans

@arvylynogoy9341 Жыл бұрын

@@CodingWithJan only explore the basic plan, cause most of the clients avail that. I agree that dawn is awesome 😉, getting used to json 👉👈

@Bilo_7 2 ай бұрын

Dein Englisch ist einfach zu deutsch 😂

@CodingWithJan 2 ай бұрын

Du wärst überrascht wie Englisch mein Deutsch ist 😁

@AdrianNunez Жыл бұрын

Hey there Jan, I sent you a message on Instagram but didn’t hear back. I’m looking for some help with my website, it’s not a Shopify website rather it’s Wordpress. Is there a better way I can reach you? Thanks!