Learn how to build blazing fast online storefronts used by the top brands today. Get a quick start with the latest tech stack that is in demand with the top brands and largest technology companies today.
Shopify + Next.js + Tailwind CSS: Modern Ecommerce
5h 7m 23s
English
Paid
Shopify
We take advantage of the Shopify Storefront API (GraphQL) to get a robust, lightning fast checkout system out of the box. No extra set up needed.
Next.js
Next.js is the React framework of choice for some of the largest companies in the world. It allows of effortless hybrid and server side rendering on the fly. The result is insanely fast page load times.
Tailwind CSS
Tailwind CSS allows us to build modern websites without ever needing to touch our CSS file. It is a utility-first CSS framework used by some of the top designers and developers in the industry.
GraphQL
By leveraging the GraphQL query language, we are able to fully leverage the Shopify Storefront API and build with read speed. By using the GraphQL explorer, we can see exactly what data we will be working with.
Vercel
Shipping production level projects to Vercel is as easy as a push of a button. You will learn how to efficiently configure Vercel for quick deployments
What we will be building
Having a snappy website is becoming increasing important for eCommerce stores. In this course we use all the latest technologies to bring a modern shopping experience to the customer. This is done through the use of Next.js, Tailwind CSS, and the Shopify Storefront API. When compared, it is easy to see the difference between what we will be building when compared to an older eCommerce store.
Additional
About the Author: Working With Shopify
Working With Shopify (workingwithshopify.com) publishes paid course material on the practical craft of building Shopify-based ecommerce stores — particularly on the modern stack of Shopify + Next.js + Tailwind CSS for headless commerce setups.
The CourseFlix listing carries Shopify + Next.js + Tailwind CSS — Modern Ecommerce — a project-based walkthrough of building a headless Shopify storefront from scratch, covering the Storefront API, cart and checkout integration, and the Next.js patterns for ecommerce sites.
Material is paid and aimed at developers building headless Shopify storefronts. For broader content, see CourseFlix's Next.js and Shopify category pages.
Watch Online 29 lessons
0:00
/ #1: 1. Introduction
All Course Lessons (29)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | 1. Introduction Demo | 03:32 | |
| 2 | 2. What we will be building | 04:16 | |
| 3 | 3. Next.js + Tailwind CSS Setup | 07:56 | |
| 4 | 4. Shopify Setup | 10:14 | |
| 5 | 5. Fetching Products with GraphQL | 19:54 | |
| 6 | 6. Displaying Products on Home Page | 18:09 | |
| 7 | 7. Dynamic Product Pages | 15:15 | |
| 8 | 8. Layout (Header and Footer) | 06:04 | |
| 9 | 9. Deploying to Vercel | 06:55 | |
| 10 | 10. Product Page (Image) | 05:19 | |
| 11 | 11. Product Page (Option Selector) | 20:15 | |
| 12 | 12. Add To Cart Functionality | 32:16 | |
| 13 | 13. Persisting Cart using localStorage | 04:59 | |
| 14 | 14. MiniCart with Tailwind CSS | 17:17 | |
| 15 | 15. Remove Item Functionality | 07:32 | |
| 16 | 16. Clean up and small fixes | 07:36 | |
| 17 | 17. Product Page Image Swiper | 08:22 | |
| 18 | 18. Footer | 06:06 | |
| 19 | 19. Recommended Products Section | 07:37 | |
| 20 | 20. Home Page Sections | 08:33 | |
| 21 | 21. SEO for Next.js and eCommerce | 11:53 | |
| 22 | 22. SWR for Dynamic Content Fetching | 17:29 | |
| 23 | 1. Hydrogen Introb | 05:14 | |
| 24 | 2. Hydrogen Setups | 07:07 | |
| 25 | 3. Shopify Hydrogen Component Naming | 07:23 | |
| 26 | 4. Shopify Hydrogen Walkthrough | 08:58 | |
| 27 | 5. Shopify Hydrogen Product & Layout | 10:30 | |
| 28 | 6. Shopify Hydrogen Color Swatches | 07:02 | |
| 29 | 7. Understanding SSR | 13:40 |
Unlock unlimited learning
Get instant access to all 28 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionRelated courses
-
Updated 2y agoEcommerce on the Jamstack with Snipcart, Next.js, & WordPress
By: Level Up Tutorials (Scott Tolinski)Welcome to E-commerce on the Jamstack with Snipcart, Next.js & WordPress! In this series, we will learn how make a fast, modern, e-commerce site using Next.j4h 18m -
ClassicThe Joy of React
By: Josh ComeauThe all-new interactive learning experience that teaches you how to build rich, dynamic web apps with React. So, let s be real. Learning React is hard.25h 35m5/5 -
Updated 1y agosupastarter - SaaS starter kit for Next.js & Nuxt
By: SupastarterSupastarter is a powerful starter kit for creating scalable and production-ready SaaS applications based on Next.js.5/5
Frequently asked questions
What is Shopify + Next.js + Tailwind CSS: Modern Ecommerce about?
Learn how to build blazing fast online storefronts used by the top brands today. Get a quick start with the latest tech stack that is in demand with the top brands and largest technology companies today.
Who teaches this course?
It is taught by Working With Shopify. You can find more courses by this instructor on the corresponding source page.
How long is the course?
It contains 29 lessons with a total runtime of 5 hours 7 minutes. Every lesson is available to watch online at your own pace.
Is it free to watch?
It is part of CourseFlix's premium catalog. A subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch it online?
The course is available to watch online on CourseFlix at https://courseflix.net/course/shopify-next-js-tailwind-css-modern-ecommerce. The page hosts every lesson with the integrated video player; no download is required.