Building a Headless Ecommerce Store with Tailwind CSS, Shopify, and Next.js
Вставка
- Опубліковано 8 чер 2024
- In this video, we're going to build a simple Ecommerce website with Tailwind UI, Shopify, and Next.js.
We'll fetch products from Shopify using the Storefront GraphQL API, and build our front-end by assembling and customizing components from Tailwind UI.
Demo site: tailwindui-shopify.vercel.app
Tailwind UI: tailwindui.com
Storefront API: shopify.dev/api/storefront
0:00 - Intro
0:42 - Starting point
1:56 - Tailwind UI
2:29 - Homepage hero
3:56 - Products list
5:26 - Storefront API
8:01 - Fetching data in Next.js
8:33 - Fetch helper method
10:50 - Products query
12:52 - Displaying products
15:55 - Drink some water!
16:04 - Single product page
16:33 - Tailwind UI page example
19:07 - Single product query
23:29 - Displaying the product
25:38 - Related products query
27:31 - Displaying related products
28:21 - Checkout button
32:45 - Wrap up - Наука та технологія
This actually taught me GraphQL better than any Shopify videos I watched.
Learning GraphQL by watching Shopify and Tailwind videos? Genius.
Shopify tutorials generally suck lol
@@DaviAreias they do!
@@Ss-zg3yj This! You read so muxh nonsense in the yt comments just to shamelessly please the channel owner and get likes
@@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)
I'm here mainly for Simon's introduction fade outro.
Lol I definitely FADED after recording that marathon video, I was toast 😅
Love these longer form videos. Very informative watching the (pseudo) workflow of someone who is more experienced in working with these technologies.
Just brilliant. You covered and explained a plethora of tech there with a real world example with ease and superb clarity.
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.
This is awesome to hear! Wishing you the best with your idea 👊
Gotta love those hidden sound effects. Epic video, thanks
Heh they're a lot of fun to add when editing 😅
10:57
i looked at my phone, i looked at my desktop. was convinced i'm haunted before i replayed the video...
Haha the magic "getStaticProps" delivery from the left side of the brain
I thought the google assistant on my phone acquired consicousness and started AI revolution haha
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.🙌
Thanks Yash!
Amazing video...hope to see more advance Shopify and tailwind tutorials
I feel like this left me with more questions than answers.
Thank you so much. I really needed a starter guide
15:55 I think all UA-cam tutorial videos should do this lol
Thank you for the fantastic content!
Learned a lot with this one. Thanks.
Perfect timing, I just started a project using this stack.
Haha that's awesome! I'd love to see what you come up with 🎉
Amazing tutorial, thank you very much!
Simply an amazing video
really needed this thanks!
Very well done, keep it up!
Love Tailwind videos, and Simons's intro.
Bro I really do appreciate you for this help, Thanks! I subscribed and Liked the video.
Would love to see a Nuxt/Vue 3 implementation with Shopify/Swell as well :)
+100
Nuxt Yes !
Wow.. Such a good video. Definitely subscribed 👌
Thank you! 🙏
amazing stuff!
AMAZING, thanks. 🤞🏻
Nice person, tailwind lucky for having him 15:57
Thank you, Simon!
You're welcome! 🙏
I know every stack in this video but still enjoy watching it.
Nice one guys
this is good tutorial
I love soft soft so so so so much!
This is perfect
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...)
amazing!
21:05 - Here we go!
How did you get to the graphql api? that bit of info would have been helpful.
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.
Can you guys make a tutorial on the animated code block on tailwind home page?
Une suite avec hydrogen remix would be cool
where did you get the API_URL from? it didnt work for me when I changed it to fit my store name
This is beautiful. Why would you ever want to live in a #NoCode world?
awesome
How do we go about getting a confirmation response once the checkout is completed?
@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.
The demo url is missing???
Possible to share this code for a starting point?
does anyone know can you go from development to live website what are the steps?
Lemme know when a NuxtJs tutorial is available
Was the checkout page already implemented or does Shopify handles that through the link returned from the GQL query?
This is magic!! Thx for your passion. Are you fasten your videos?
I speed up a few typing sections in this video, yeah. But most of it is just very tightly edited, not fast-forwarded!
@@simonswiss Very good. I have to be much better i think ;)
how can i integrate printful with next.js and shopify storefront
Amazing Video so far
transformedSrc is deprecated ??
Hi
Can make a video using sass?
I'm a lot of problems using Tailwind on my nextjs project with sass
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.
which theme and font you're using???
code repository please?
Hi Simon where is the process of getting the Access Token?
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!
the demo link is broken
don't we have a rest api for storefront API
hey Simon what microphone are you using?
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 👍
what's your font in vs code ?
what's the music? love it at 18:30
Why do you need the env vars to be public if they are only used at build time?
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!
Hi Simon! how did you get the shopify API path?
See my comment just above 👍
@@simonswiss where?
Just curious if it is also possible to build headless checkout with Shopify. Any idea?
Not possible at the moment.
yep, with stripe as the payment processor, there are a bunch of them as a service
Is this a secure option?
Goddamit youtube, why can I give only 1 like?
what theme are you using ???
Night Owl by Sarah Drasner 👍
is there any way to handle checkout custom not redirect weburl to shopify website
same couldn't find much. did you find a solution to this?
Thanks for &middle;
The url seems not working.
No cart?
I'm not sure how you deal with that font in your IDE thats used for your classes. The lord is testing me lol
thats VSCode but whats the theme used?
Night Owl!
can we get the source code for the project?
Probably not because tailwind ui is a payed service
anybody knows what's the font name used in his IDE?
Fira code?
Dank Mono!
this react tutorial actually
more for next.js
Where do you get the api url???????
half-baked tutorials are always my favourite
Code plz
Can you please share your before theme, font and settings?
Tailwind UI extremely poor support for Next JS
Came here looking for a solution for actual related products functionality.... this is just mocking it up, right?
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.
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.....
you have a french accent no ? ^^
my eyes hurt ong
Sponsored by Shopify?!
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?
Not even 😅
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?
Having some strange issues as well, I wonder if it has something to do with the release of Hydrogen, will go that route instead