Shopify + Next.js + Tailwind CSS: Modern Ecommerce

5h 7m 23s
English
Paid
November 21, 2023

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.

More

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

Watch Online Shopify + Next.js + Tailwind CSS: Modern Ecommerce

Join premium to watch
Go to premium
# Title Duration
1 1. Introduction 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

Similar courses to Shopify + Next.js + Tailwind CSS: Modern Ecommerce

The Joy of React

The Joy of ReactJosh Comeau

Duration 25 hours 35 minutes 33 seconds
React Simplified - Next.js

React Simplified - Next.jswebdevsimplified.com

Duration 8 hours 56 minutes 9 seconds