0
0
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:
Tailwind UI:
Storefront API:
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
source
This post was automatic generated with this wp-automatic-plugin
the demo link is broken
don't we have a rest api for storefront API
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???
Hey, really great video that inspired me to record similar one but with Nuxt 3 -> https://www.youtube.com/watch?v=QK6wPHFiRyM
more for next.js
what's the music? love it at 18:30
Amazing video…hope to see more advance Shopify and tailwind tutorials
I'm not sure how you deal with that font in your IDE thats used for your classes. The lord is testing me lol
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?
The demo url is missing???
The url seems not working.
where did you get the API_URL from? it didnt work for me when I changed it to fit my store name
Is this a secure option?
you have a french accent no ? ^^
AMAZING, thanks. 🤞🏻
Amazing tutorial, thank you very much!
what's your font in vs code ?
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.
Hi
Can make a video using sass?
I'm a lot of problems using Tailwind on my nextjs project with sass
Can you please share your before theme, font and settings?
awesome
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.
Thanks for &middle;
Goddamit youtube, why can I give only 1 like?
I feel like this left me with more questions than answers.
This is perfect
Nice person, tailwind lucky for having him 15:57
this react tutorial actually
does anyone know can you go from development to live website what are the steps?
how can i integrate printful with next.js and shopify storefront
transformedSrc is deprecated ??
How did you get to the graphql api? that bit of info would have been helpful.
Possible to share this code for a starting point?
Came here looking for a solution for actual related products functionality…. this is just mocking it up, right?
15:55 I think all YouTube tutorial videos should do this lol
Thank you for the fantastic content!
Very well done, keep it up!
Thank you so much. I really needed a starter guide
Just brilliant. You covered and explained a plethora of tech there with a real world example with ease and superb clarity.
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…..
Learned a lot with this one. Thanks.
Simply an amazing video
Can you guys make a tutorial on the animated code block on tailwind home page?
amazing stuff!
thats VSCode but whats the theme used?
Just curious if it is also possible to build headless checkout with Shopify. Any idea?
Why do you need the env vars to be public if they are only used at build time?
I'd pay to watch you build a headless Nuxt + Tailwind + Sanity + Vercel/Netlify Website 👀 Great Video as always! 😊🙏🏻
Hi Simon where is the process of getting the Access Token?