CourseFlix

Shopify + Next.js + Tailwind CSS: Modern Ecommerce

5h 7m 23s
English
Paid

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

About the Author: 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.

Watch Online 29 lessons

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

Course content

29 lessons · 5h 7m 23s
Show all 29 lessons
  1. 1 1. Introduction 03:32
  2. 2 2. What we will be building 04:16
  3. 3 3. Next.js + Tailwind CSS Setup 07:56
  4. 4 4. Shopify Setup 10:14
  5. 5 5. Fetching Products with GraphQL 19:54
  6. 6 6. Displaying Products on Home Page 18:09
  7. 7 7. Dynamic Product Pages 15:15
  8. 8 8. Layout (Header and Footer) 06:04
  9. 9 9. Deploying to Vercel 06:55
  10. 10 10. Product Page (Image) 05:19
  11. 11 11. Product Page (Option Selector) 20:15
  12. 12 12. Add To Cart Functionality 32:16
  13. 13 13. Persisting Cart using localStorage 04:59
  14. 14 14. MiniCart with Tailwind CSS 17:17
  15. 15 15. Remove Item Functionality 07:32
  16. 16 16. Clean up and small fixes 07:36
  17. 17 17. Product Page Image Swiper 08:22
  18. 18 18. Footer 06:06
  19. 19 19. Recommended Products Section 07:37
  20. 20 20. Home Page Sections 08:33
  21. 21 21. SEO for Next.js and eCommerce 11:53
  22. 22 22. SWR for Dynamic Content Fetching 17:29
  23. 23 1. Hydrogen Introb 05:14
  24. 24 2. Hydrogen Setups 07:07
  25. 25 3. Shopify Hydrogen Component Naming 07:23
  26. 26 4. Shopify Hydrogen Walkthrough 08:58
  27. 27 5. Shopify Hydrogen Product & Layout 10:30
  28. 28 6. Shopify Hydrogen Color Swatches 07:02
  29. 29 7. Understanding SSR 13:40

Related courses

  • The Ultimate NextJs Course thumbnail

    The Ultimate NextJs Course

    By: Hamed Bahram
    NextJs is a powerful framework for building fullstack React applications. It makes it easy to create fast.
    15 hours 7 minutes 33 seconds 5 / 5
  • The Joy of React thumbnail

    The Joy of React

    By: Josh Comeau
    The 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.
    25 hours 35 minutes 33 seconds 5 / 5
  • Next.js - The Full Course thumbnailFree

    Next.js - The Full Course

    By: Fireship
    Next.js - The Full Course provides a in-depth look into the Next.js App Router introduced in version 13.2. It puts React Server Components into practice by buil
    1 hour 14 minutes 14 seconds 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 Shopify + Next.js + Tailwind CSS: Modern Ecommerce?
Shopify + Next.js + Tailwind CSS: Modern Ecommerce is taught by Working With Shopify. You can find more courses by this instructor on the corresponding source page.
How long is Shopify + Next.js + Tailwind CSS: Modern Ecommerce?
Shopify + Next.js + Tailwind CSS: Modern Ecommerce contains 29 lessons with a total runtime of 5 hours 7 minutes. All lessons are available to watch online at your own pace.
Is Shopify + Next.js + Tailwind CSS: Modern Ecommerce free to watch?
Shopify + Next.js + Tailwind CSS: Modern Ecommerce is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Shopify + Next.js + Tailwind CSS: Modern Ecommerce online?
Shopify + Next.js + Tailwind CSS: Modern Ecommerce 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.