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 + Next.js + Tailwind CSS: Modern Ecommerce is a 29-lesson 5 hours 7 minutes self-paced course by Working With Shopify. Learn how to build blazing fast online storefronts used by the top brands today.
Course facts
- Lessons
- 29
- Duration
- 5 hours 7 minutes
- Level
- All levels
- Language
- English
- Updated
- Instructor
- Working With Shopify
- Price
- Premium
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
Who teaches Shopify + Next.js + Tailwind CSS: Modern Ecommerce? 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.
What lessons are included in Shopify + Next.js + Tailwind CSS: Modern Ecommerce?
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 subscriptionWhat courses are similar to Shopify + Next.js + Tailwind CSS: Modern Ecommerce?
-
NewBuild a full stack Next.js app with Cursor
By: Gregory JohnLearn how to create applications with Next.js: UI design, authentication, databases, UX, payments via Stripe, and email automation. Suitable for beginners.8h -
Updated 2y agoMERN React Node Next.js Multi User SEO Blogging Platform
By: UdemyMaster the Art of Building Real World SEO Web Applications using MERN (Mongo Express React Node) Stack. Become a true Web Developer with this Ultimate Project b20h 25m -
Updated 5mo agoThe Complete Next.js Testing Course
By: JavaScript Mastery, Adrian HajdinMaster production-level testing in Next.js with this comprehensive course, bridging the gap to a senior developer level with ease.8h 12m5/5 -
Updated 2y agoNext.js 14 Real-Time Chat App using Socket IO
By: UdemyDiscover the potential of real-time communication applications by building a chat app from scratch using Next.js 14 and Socket.IO.12h 22m -
Updated 1y agoBuild a Multi-Tenant E-Commerce with Next.js, Tailwind v4, Stripe Connect
By: Antonio Erdeljac (Code With Antonio)Learn to build a multi tenant e commerce app with Next.js, Tailwind v4 and Stripe Connect. You create stores, manage files and handle safe pay flows.19h 52m5/5 -
Updated 1y agoReact Simplified - Next.js
By: Web Dev Simplified (Kyle Cook)Welcome to my Next.js course. This course is a little bit interesting in how it's structured because it's actually broken into two main sections. That's because9h 33m5/5 -
Updated 2y agoCode With Antonio Workshops
By: Antonio Erdeljac (Code With Antonio)These workshops show you how to build real apps with modern tools. You follow clear steps in each task. You learn by doing and test ideas as you go.17h 3m
Frequently asked questions
What prerequisites are required for this course?
Before enrolling in the course, students should have a basic understanding of JavaScript and React. Familiarity with HTML and CSS is also beneficial, as the course involves working with Next.js and Tailwind CSS to build ecommerce sites. Prior experience with GraphQL and Shopify would be helpful but is not mandatory, as the course provides setup instructions and covers product fetching using GraphQL.
What will I build during the course?
Throughout the course, students will build a modern ecommerce storefront. The project includes setting up and integrating Shopify with Next.js and Tailwind CSS, fetching and displaying products, creating dynamic product pages, implementing a cart system with localStorage, and deploying the final site to Vercel. Additional features such as a MiniCart, recommended products section, and SEO optimizations are also covered.
Who is the target audience for this course?
This course is designed for developers interested in building modern ecommerce websites using popular technologies like Next.js, Tailwind CSS, and Shopify. It's particularly suitable for those who wish to learn how to create fast, scalable online storefronts similar to those used by top brands. Both beginners with some coding experience and more advanced developers looking to upgrade their tech stack will find value in this course.
How does the depth of this course compare to others on similar topics?
The course provides a focused approach to building ecommerce sites with a specific tech stack, covering everything from setup to deployment. While it offers practical, hands-on experience with Next.js, Tailwind CSS, and Shopify, it may not delve as deeply into each individual tool as specialized courses would. Instead, it emphasizes integration and application in an ecommerce context, making it suitable for learners interested in a project-based approach.
Is there any specific tooling or platform emphasized in the course?
Yes, the course emphasizes the use of Shopify for product management and ecommerce functionality, Next.js for building the frontend, and Tailwind CSS for styling. Deploying to Vercel is also covered, providing a complete workflow from development to production. Students will learn how to use GraphQL for data fetching and explore Shopify's Hydrogen for server-side rendering and component management.
What topics are not covered in this course?
While the course covers building a modern ecommerce site, it does not include advanced topics such as payment gateway integration beyond Shopify's basic functionalities, in-depth database management, or custom backend development. It focuses primarily on the frontend development and deployment aspects using Shopify, Next.js, and Tailwind CSS.
What is the estimated time commitment for this course?
The course consists of 29 lessons. Although the total runtime is not specified, learners should expect to invest several hours to complete the entire course, including time for setting up environments, coding along, and implementing additional features. The hands-on nature of the lessons may require additional time for testing and deploying the project to Vercel.