Shopify Hydrogen and Oxygen for beginners
Вставка
- Опубліковано 31 лип 2022
- 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-ca...
👨💻 Find a qualified Shopify Developer for your next project:
codingwithjan.com/hire-a-deve...
► Contact
--------------------------------------------------------------------------
🌐 Website
codingwithjan.com
🤝 LinkedIn
/ jan-frey
📚 Recommended Resources:
Hydrogen Overview: shopify.dev/custom-storefront...
Shopify Oxygen: shopify.dev/custom-storefront...
Shopify Partners: www.shopify.com/partners
Hydrogen Templates: shopify.dev/custom-storefront...
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
🎯 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
Great video Jan! a server-side video in-depth would be perfect
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!
Glad it was helpful!
You explained that hydrogen is in 5 min. Something the acutal Hydrogen site failed to document. Thank you 😊😊
Great overview, thanks Jan!
You took your sweet time. I was waiting for your video. Thanks
haha there we go 😁
Most welcome 🙌
Thanks Jan! Next video a multi colom slider?👍
You are providing really great videos and information. Keep publishing.
I 💕 your way videos and Shopify development.
It's amazing Jan. Hoping to get more videos about the hydrogen.
I will think about, thanks for the suggestion 😁
Hey Jan, will you guys be teaching Hydrogen to build custom storefronts in Freemote?
Thanks Jan please continue these series
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?
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 !
t3 stack
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?
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.
Will definitely consider it, thanks for the suggestion and the great feedback 😉
echo this ✨
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!
Would love to here your thoughts on Shopify squiring Remix JS and the impact it will have.
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?
Hi Collins, We developed the bundling feature in our Hydrogen theme. The solution is using discount feature.
Hey, Jan thanks for this beautiful introduction, don't worry about that access token it's a Public token.
😁
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.
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.
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!
I think you talked about templates of hydrogen. Where can we find these?
Is there no need to create apps for Shopify if we use storefront hydrogen and can manage everything from there by creating custom storefront?
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!
Hey, would be so interesting a complete course of Hydrogen, is it in mind???
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
Fantastic video! Thank you!
Awesome man, thanks so much :-) 🙌
Finally, an actual explanation of what headless even means. Shopify should pay you for these videos.
Glad they did 😁
Amazing Introduction to Hydrogen
Thanks! Happy that you enjoyed it :-) 🙌
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.
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
Hey Eric, you could mark your products as "digital products" :-)
@@CodingWithJan Hey Jan, thanks for reply I tried that too but it still takes to shipping page. Am I missing something?
Informative as usual
I'll take it as a compliment! :D
Very nice video.
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.
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
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 😄
@@CodingWithJan Gotcha! Plus's "Sandbox Store" as opposed to development store. Thanks Jan
do I need to know how to code to use Hydrogen?! is there any tools that can get me there in a short term?
Awesome stuff!!
how to publish live ??
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?
With Hydrogen, you will no longer use Liquid to build and modify custom Shopify themes.
Please make more videos on hydrogen
More of This Jan!
Very informative jan 💯
Should i learn react before start working on liquid?
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 😄
@@CodingWithJan Okay Jan got your point 👌🌟
As a rule of thumb I'd learn liquid first :-)
It's also easier as a beginner
@@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 🤩
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?
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.
Thanks Jan :)
I have one technical query, Can we create a new app in Hydrogen also Can we update already created app with Hydrogen?
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. :-)
Any way there is a simple app we can use to speed up on mobile views.
Hey Jan, your access token was still visible in the video! Just wanted to let you know
Hello Internet, welcome to my dev store 😁
can be used also with vue?
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
Did you have to pay for a Shopify Plus plan to demo Oxygen?
This was a Shopify Collab and I received special access rights on my development store.
However, this might also be available in the public developer preview now, I'd have to check.
Would Hydrogen and Oxygen be added in Freemote course?
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. :-)
Thank you Jan!
You forgot to blur your API key 😄
No worries, I trust you 😁
Interesting! When will Hydrogen completely take over Liquid ?
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. :-)
6:40
So what just happened someone please explain simply
Oxygen only works with a plus plan which is $2000 per month. For learning in a dev environment why even bother?
Woah hold on... you could totally make a theme work for any context. Smart fridge or whatever
Maybe if the smart fridge had a browser installed 😁
But other than that, I don't see a way ^^
@@CodingWithJan Of course it would, or you could wrap some simple webkit/chrome thing. You'd need that for React anyway!
Me customising the dawn theme. And me waiting for part 2 for this content. 👉👈
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
@@CodingWithJan only explore the basic plan, cause most of the clients avail that. I agree that dawn is awesome 😉, getting used to json 👉👈
Dein Englisch ist einfach zu deutsch 😂
Du wärst überrascht wie Englisch mein Deutsch ist 😁
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!