Shopify Hydrogen and Oxygen for beginners

Поділитися
Вставка
  • Опубліковано 22 гру 2024

КОМЕНТАРІ • 94

  • @CodingWithJan
    @CodingWithJan  Місяць тому

    🌟Learn the JavaScript side of Shopify Development: codingwithjan.com/javascript?src=hydrogen-yt
    👨‍💻Find a reliable Developer for your project: www.codingwithjan.com/hire-a-developer

  • @mrmaglet
    @mrmaglet Рік тому +4

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

  • @human_error1
    @human_error1 Рік тому +2

    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!

  • @shuibabdullah4932
    @shuibabdullah4932 2 роки тому +3

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

  • @Jeffzouavf
    @Jeffzouavf 2 роки тому +2

    Thanks Jan! Next video a multi colom slider?👍

  • @zubairblaze
    @zubairblaze 2 роки тому

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

    • @CodingWithJan
      @CodingWithJan  2 роки тому

      haha there we go 😁
      Most welcome 🙌

  • @JwlzStylE
    @JwlzStylE Рік тому

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

  • @shopifyguy5052
    @shopifyguy5052 Рік тому

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

  • @taylorcovington3314
    @taylorcovington3314 2 роки тому

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

  • @Denisfutbol
    @Denisfutbol Рік тому

    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!

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

  • @shivamjha8985
    @shivamjha8985 Рік тому

    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.

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

  • @JohnBYoutube
    @JohnBYoutube 2 роки тому +3

    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
      @CodingWithJan  2 роки тому

      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!

  • @phantazzor
    @phantazzor Рік тому

    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

  • @JordanMattKim
    @JordanMattKim Рік тому

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

  • @youknownuno
    @youknownuno 2 роки тому +1

    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
      @hamburger-fries 2 роки тому

      t3 stack

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

  • @chetanpatole7199
    @chetanpatole7199 2 роки тому

    Thanks Jan please continue these series

  • @arslanali5025
    @arslanali5025 2 роки тому

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

    • @CodingWithJan
      @CodingWithJan  2 роки тому +1

      I will think about, thanks for the suggestion 😁

  • @cordelldev
    @cordelldev 10 місяців тому

    Great overview, thanks Jan!

  • @jonice4229
    @jonice4229 2 роки тому +1

    can be used also with vue?

    • @CodingWithJan
      @CodingWithJan  2 роки тому

      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

  • @neelthakkar5346
    @neelthakkar5346 Рік тому

    how to publish live ??

  • @yousufrashwan
    @yousufrashwan Місяць тому

    I don't understand, I am a React/Next.js developer, I want to start building e-commerce websites as a freelancer, but I have no backend knowldge, where to start?

  • @davidgrana1268
    @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
      @MinhThongLuu Рік тому

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

  • @ericgirirealestate1592
    @ericgirirealestate1592 2 роки тому

    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
      @CodingWithJan  2 роки тому

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

    • @ericgirirealestate1592
      @ericgirirealestate1592 2 роки тому

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

  • @jamesauble8091
    @jamesauble8091 5 місяців тому

    Did you have to pay for a Shopify Plus plan to demo Oxygen?

    • @CodingWithJan
      @CodingWithJan  5 місяців тому

      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.

  • @yogeshamane7061
    @yogeshamane7061 2 роки тому

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

  • @hasanmougharbel8030
    @hasanmougharbel8030 2 роки тому

    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.

  • @julianzagar2000
    @julianzagar2000 2 роки тому

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

    • @CodingWithJan
      @CodingWithJan  2 роки тому

      Hello Internet, welcome to my dev store 😁

  • @AgustinMoyaca
    @AgustinMoyaca 2 роки тому

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

  • @surprisingstuff
    @surprisingstuff Рік тому

    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.

  • @joinodestry
    @joinodestry 2 роки тому

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

  • @vinitasharda2678
    @vinitasharda2678 2 роки тому

    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
      @CodingWithJan  2 роки тому

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

  • @m.muzamilabbasi2803
    @m.muzamilabbasi2803 2 роки тому

    Amazing Introduction to Hydrogen

    • @CodingWithJan
      @CodingWithJan  2 роки тому

      Thanks! Happy that you enjoyed it :-) 🙌

  • @muji_pen
    @muji_pen 2 роки тому

    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
      @CodingWithJan  2 роки тому

      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
      @muji_pen 2 роки тому

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

  • @AnthonyCandaele
    @AnthonyCandaele 2 роки тому

    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
      @CodingWithJan  2 роки тому +1

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

    • @dianrahmaji
      @dianrahmaji 2 роки тому

      echo this ✨

  • @waseemchaudhary3138
    @waseemchaudhary3138 2 роки тому

    Would Hydrogen and Oxygen be added in Freemote course?

    • @CodingWithJan
      @CodingWithJan  2 роки тому +1

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

  • @collinsmbaka
    @collinsmbaka 2 роки тому

    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
      @MinhThongLuu Рік тому

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

  • @SalonSonikPasadena
    @SalonSonikPasadena Рік тому

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

  • @asadullahbaig5698
    @asadullahbaig5698 2 роки тому

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

    • @CodingWithJan
      @CodingWithJan  2 роки тому +1

      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
      @asadullahbaig5698 2 роки тому

      @@CodingWithJan Okay Jan got your point 👌🌟

    • @CodingWithJan
      @CodingWithJan  2 роки тому +1

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

    • @asadullahbaig5698
      @asadullahbaig5698 2 роки тому

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

  • @mystupidbrain5299
    @mystupidbrain5299 2 роки тому

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

  • @michaelgergen4318
    @michaelgergen4318 2 роки тому

    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
      @CodingWithJan  2 роки тому

      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.

  • @nri_raj
    @nri_raj Рік тому

    Please make more videos on hydrogen

  • @atulgavali4249
    @atulgavali4249 2 роки тому

    Informative as usual

  • @svenhoman5657
    @svenhoman5657 2 роки тому

    Awesome stuff!!

  • @MdHasanMahbubUlkarim
    @MdHasanMahbubUlkarim Рік тому

    Very nice video.

  • @quentincaldway
    @quentincaldway 2 роки тому

    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!

  • @propertiesofgabe3865
    @propertiesofgabe3865 2 роки тому

    Fantastic video! Thank you!

  • @BF-non
    @BF-non 2 роки тому

    More of This Jan!

  • @CodeInspire
    @CodeInspire 2 роки тому

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

  • @nghiahoang765
    @nghiahoang765 6 місяців тому

    6:40

  • @johnalexander4242
    @johnalexander4242 Рік тому

    So what just happened someone please explain simply

  • @samuelwawina2373
    @samuelwawina2373 2 роки тому

    Interesting! When will Hydrogen completely take over Liquid ?

    • @CodingWithJan
      @CodingWithJan  2 роки тому +1

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

  • @koolio1100
    @koolio1100 2 роки тому

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

  • @alexmorris3648
    @alexmorris3648 2 роки тому

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

    • @CodingWithJan
      @CodingWithJan  2 роки тому

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

    • @alexmorris3648
      @alexmorris3648 2 роки тому

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

  • @arvylynogoy9341
    @arvylynogoy9341 2 роки тому

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

    • @CodingWithJan
      @CodingWithJan  2 роки тому +1

      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
      @arvylynogoy9341 2 роки тому

      @@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
    @Bilo_7 8 місяців тому

    Dein Englisch ist einfach zu deutsch 😂

    • @CodingWithJan
      @CodingWithJan  8 місяців тому +1

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

  • @AdrianNunez
    @AdrianNunez 2 роки тому

    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!