Building a Headless Ecommerce Store with Tailwind CSS, Shopify, and Next.js

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

КОМЕНТАРІ • 125

  • @francismori7
    @francismori7 3 роки тому +132

    This actually taught me GraphQL better than any Shopify videos I watched.

    • @Ss-zg3yj
      @Ss-zg3yj 3 роки тому +24

      Learning GraphQL by watching Shopify and Tailwind videos? Genius.

    • @DaviAreias
      @DaviAreias 2 роки тому +9

      Shopify tutorials generally suck lol

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

      @@DaviAreias they do!

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

      @@Ss-zg3yj This! You read so muxh nonsense in the yt comments just to shamelessly please the channel owner and get likes

    • @Ss-zg3yj
      @Ss-zg3yj 2 роки тому

      @@nextentrepreneur9288 lol whole Tailwind community is basically circle jerking club 😃 Also, Tailwind is absolutely disgusting, I hate it so much (and have to use it for almost 3 years now)

  • @returnZeroo
    @returnZeroo 2 роки тому +8

    You don't know how much confidence you gave me. Just from this one video, I got a solid idea of how to create a custom Shopify theme with Shopify GraphQL API.
    I can't give you thank enough.

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

      This is awesome to hear! Wishing you the best with your idea 👊

  • @braydoncoyer174
    @braydoncoyer174 3 роки тому +19

    I'm here mainly for Simon's introduction fade outro.

    • @simonswiss
      @simonswiss 3 роки тому +4

      Lol I definitely FADED after recording that marathon video, I was toast 😅

  • @valtism
    @valtism 3 роки тому +15

    Love these longer form videos. Very informative watching the (pseudo) workflow of someone who is more experienced in working with these technologies.

  • @ChadSolomon
    @ChadSolomon 3 роки тому +8

    Gotta love those hidden sound effects. Epic video, thanks

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

      Heh they're a lot of fun to add when editing 😅

  • @pjmanning
    @pjmanning 3 роки тому +26

    Would love to see a Nuxt/Vue 3 implementation with Shopify/Swell as well :)

  • @gavinbryan123
    @gavinbryan123 3 роки тому +5

    Just brilliant. You covered and explained a plethora of tech there with a real world example with ease and superb clarity.

  • @hot4mix
    @hot4mix 3 роки тому +17

    10:57
    i looked at my phone, i looked at my desktop. was convinced i'm haunted before i replayed the video...

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

      Haha the magic "getStaticProps" delivery from the left side of the brain

    • @bulletdrop
      @bulletdrop 3 роки тому +3

      I thought the google assistant on my phone acquired consicousness and started AI revolution haha

  • @kenyaseemenow
    @kenyaseemenow 3 роки тому +9

    Perfect timing, I just started a project using this stack.

    • @simonswiss
      @simonswiss 3 роки тому +1

      Haha that's awesome! I'd love to see what you come up with 🎉

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

    I feel like this left me with more questions than answers.

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

    Amazing video...hope to see more advance Shopify and tailwind tutorials

  • @yashsolanki069
    @yashsolanki069 Рік тому +1

    I had no idea this video would be so full of content!!
    Thanks for the amazing Content! and your teaching style is really simple and easy to follow along for us.🙌

  • @chunli680
    @chunli680 3 роки тому +3

    15:55 I think all UA-cam tutorial videos should do this lol
    Thank you for the fantastic content!

  • @Tottinguero
    @Tottinguero Рік тому +1

    It would be amazing to have an update on this including how to manage customers accounts in a headless way (login, logout, see order info...)

  • @jtrenda333
    @jtrenda333 3 роки тому +4

    How did you get to the graphql api? that bit of info would have been helpful.

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

    I know every stack in this video but still enjoy watching it.

  • @ahmedsamir-m8s
    @ahmedsamir-m8s 2 роки тому

    Nice person, tailwind lucky for having him 15:57

  • @iano.marketing
    @iano.marketing 14 годин тому

    This is so great. Thank you

  • @МаксимДраганов-е8м

    21:05 - Here we go!

  • @techcheck3042
    @techcheck3042 3 роки тому +1

    Wow.. Such a good video. Definitely subscribed 👌

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

    Bro I really do appreciate you for this help, Thanks! I subscribed and Liked the video.

  • @eli007s
    @eli007s 3 роки тому +1

    Lemme know when a NuxtJs tutorial is available

  • @angeloliwanag2619
    @angeloliwanag2619 3 роки тому

    Thank you so much. I really needed a starter guide

  • @the42nd
    @the42nd 3 роки тому +4

    Possible to share this code for a starting point?

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

    @Tailwind Labs
    ...wondering if you plan to update this video to Next js13 or make a more comprehensive tutorial? BTW, FYI, the link to the demo site is broken.

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

    Une suite avec hydrogen remix would be cool

  • @BTCruiser2011
    @BTCruiser2011 3 роки тому +1

    Simply an amazing video

  • @Demonnof
    @Demonnof 3 роки тому +1

    really needed this thanks!

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

    where did you get the API_URL from? it didnt work for me when I changed it to fit my store name

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

    The demo url is missing???

  • @haski2965
    @haski2965 3 роки тому +1

    Can you guys make a tutorial on the animated code block on tailwind home page?

  • @tamrat_assefa
    @tamrat_assefa 3 роки тому

    Learned a lot with this one. Thanks.

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

    Was the checkout page already implemented or does Shopify handles that through the link returned from the GQL query?

  • @Troy-ol5fk
    @Troy-ol5fk 2 роки тому +2

    the demo link is broken

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

    Amazing tutorial, thank you very much!

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

    i love tailwind css!!!. i found no reason to not to use it. why using MUI or any other component based library when you have to customize it anyway.

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

    I love soft soft so so so so much!

  • @nesabadiano448
    @nesabadiano448 3 роки тому +1

    Hi Simon where is the process of getting the Access Token?

    • @simonswiss
      @simonswiss 3 роки тому +1

      Hey! In your Shopify store, under the "apps" menu, there is a "manage private apps" at the bottom. In there, you can find both the access token and the API URL!

  • @gocanto
    @gocanto 3 роки тому +1

    amazing stuff!

  • @akamfoad
    @akamfoad 3 роки тому

    Very well done, keep it up!

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

    Isn't easier to map the response from GraphQL to a FE model and use it instead? I'm thinking that a slight change in BE response will break the FE.

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

    AMAZING, thanks. 🤞🏻

  • @closernear5058
    @closernear5058 3 роки тому +1

    transformedSrc is deprecated ??

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

    this is good tutorial

  • @BigScaryMonster
    @BigScaryMonster 3 роки тому

    This is beautiful. Why would you ever want to live in a #NoCode world?

  • @malindaweerasinghe2501
    @malindaweerasinghe2501 3 роки тому

    Nice one guys

  • @gmartins-dev
    @gmartins-dev Рік тому +2

    code repository please?

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

    Amazing Video so far

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

    Hi
    Can make a video using sass?
    I'm a lot of problems using Tailwind on my nextjs project with sass

  • @abdullahsiddiqui1681
    @abdullahsiddiqui1681 2 місяці тому

    Can we not use the graphql api url ?

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

    How do we go about getting a confirmation response once the checkout is completed?

  • @nishitsarvaiya2941
    @nishitsarvaiya2941 2 місяці тому

    Can you please tell me the name of the font you are using here?

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

    This is perfect

  • @QueeeeenZ
    @QueeeeenZ 3 роки тому

    hey Simon what microphone are you using?

    • @simonswiss
      @simonswiss 3 роки тому

      Rode VideoMic NTG - absolutely love it 🙏 But the secret here to have it off-camera is not the mic itself, it's the moving blankets on the walls and the carpet I added to absorb all the room reverb 👍

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

    what's the music? love it at 18:30

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

    how can i integrate printful with next.js and shopify storefront

  • @sebastian5100630
    @sebastian5100630 3 роки тому

    amazing!

  • @nesabadiano448
    @nesabadiano448 3 роки тому

    Hi Simon! how did you get the shopify API path?

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

    don't we have a rest api for storefront API

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

    what's your font in vs code ?

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

    awesome

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

    Goddamit youtube, why can I give only 1 like?

  • @bluemelon-io
    @bluemelon-io 3 роки тому

    Just curious if it is also possible to build headless checkout with Shopify. Any idea?

    • @alessandro2092
      @alessandro2092 3 роки тому

      Not possible at the moment.

    • @Georg360s
      @Georg360s 11 місяців тому

      yep, with stripe as the payment processor, there are a bunch of them as a service

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

    does anyone know can you go from development to live website what are the steps?

  • @colynatrockethomes2595
    @colynatrockethomes2595 3 роки тому

    Why do you need the env vars to be public if they are only used at build time?

    • @simonswiss
      @simonswiss 3 роки тому +1

      Good question - no real need for the homepage, but on the single product page, the "buy now" button sends a mutation to the GraphQL API from the browser, that's the only place it's actually needed!

  • @NeverCodeAlone
    @NeverCodeAlone 3 роки тому +1

    This is magic!! Thx for your passion. Are you fasten your videos?

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

      I speed up a few typing sections in this video, yeah. But most of it is just very tightly edited, not fast-forwarded!

    • @NeverCodeAlone
      @NeverCodeAlone 3 роки тому

      @@simonswiss Very good. I have to be much better i think ;)

  • @user-bq4xc2yy3m
    @user-bq4xc2yy3m 2 роки тому

    Is this a secure option?

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

    is there any way to handle checkout custom not redirect weburl to shopify website

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

      same couldn't find much. did you find a solution to this?

  • @robotprogrammer2902
    @robotprogrammer2902 3 роки тому

    what theme are you using ???

    • @simonswiss
      @simonswiss 3 роки тому +4

      Night Owl by Sarah Drasner 👍

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

    I'm not sure how you deal with that font in your IDE thats used for your classes. The lord is testing me lol

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

    No cart?

  • @MadHolms
    @MadHolms 3 роки тому +1

    can we get the source code for the project?

    • @xmorse
      @xmorse 3 роки тому +1

      Probably not because tailwind ui is a payed service

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

    The url seems not working.

  • @kartikmistry6399
    @kartikmistry6399 3 роки тому

    thats VSCode but whats the theme used?

  • @martingalovic6097
    @martingalovic6097 3 роки тому

    anybody knows what's the font name used in his IDE?

  • @valorant.mp4413
    @valorant.mp4413 2 роки тому

    Can you please share your before theme, font and settings?

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

    more for next.js

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

    Where do you get the api url???????
    half-baked tutorials are always my favourite

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

    this react tutorial actually

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

    Thanks for &middle;

  • @scriptkeeper8243
    @scriptkeeper8243 3 роки тому +3

    This is more of a reference for troubleshooting your own app vs. a proper tutorial as too many key steps are left out. You could make do scraping the structures from their demo site, but you'd better reference other projects if you're actually looking to build a demo. Shame he didn't just use their demo UI elements to build this vs. trying to push paid options...trying to build a demo here. If I was selling it, I'd pay for your really pricey UI kit there TW.....

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

    Tailwind UI extremely poor support for Next JS

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

    you have a french accent no ? ^^

  • @wutangpaul
    @wutangpaul 3 роки тому +1

    Came here looking for a solution for actual related products functionality.... this is just mocking it up, right?

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

      Did you ever figure out how to do related products? I'm building a store right now and would like to add that functionality to the wabsite.

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

    my eyes hurt ong

  • @codernerd7076
    @codernerd7076 3 роки тому

    Sponsored by Shopify?!

    • @NeverCodeAlone
      @NeverCodeAlone 3 роки тому +1

      Just a framework example and not bad. Never worked with it but I think its the right thing to start your online business. What are you using for this usecase?

    • @simonswiss
      @simonswiss 3 роки тому +1

      Not even 😅

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

    I'm getting a FetchError: invalid json response body at xxxMY-SHOPIFY-DOMAINxxx reason: unexpected end of JSON input. This is really busting my head sinds I can't solve this even other people have looked at the code and can't seem to find the reason. Any idea or workaround for this?

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

      Having some strange issues as well, I wonder if it has something to do with the release of Hydrogen, will go that route instead

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

    which theme and font you're using???