CF

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

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

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.

Check out the GitHub Repo

Additional

https://github.com/iskurbanov/shopify-next.js-tailwind

Who teaches Shopify + Next.js + Tailwind CSS: Modern Ecommerce? Working With Shopify

Working With Shopify thumbnail

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?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 29 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: 1. Introduction
All Course Lessons (29)
#Lesson TitleDurationAccess
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 subscription

What courses are similar to Shopify + Next.js + Tailwind CSS: Modern Ecommerce?

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.