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.

Read more about the course

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

FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT

FULL Authentication WITH REACT JS NEXT JS TYPESCRIPTudemy

Category: TypeScript, React.js, Next.js
Duration 6 hours 52 minutes 28 seconds
Next.js Projects: Build an Issue Tracker

Next.js Projects: Build an Issue Trackercodewithmosh (Mosh Hamedani)

Category: Next.js
Duration 7 hours 1 minute 57 seconds
Next.js Firebase - The Full Course

Next.js Firebase - The Full Coursefireship.io

Category: Next.js, Firebase
Duration 2 hours 38 minutes 13 seconds
Ultimate Next.js Course 2024 Edition

Ultimate Next.js Course 2024 Editiondevelopedbyed.com

Category: Next.js
Duration 29 hours 39 minutes 9 seconds
The Ultimate NextJs Course

The Ultimate NextJs Coursehamedbahram.io

Category: Next.js
Duration 15 hours 7 minutes 33 seconds
supastarter - SaaS starter kit for Next.js & Nuxt

supastarter - SaaS starter kit for Next.js & Nuxtsupastarter

Category: Next.js, Other (Mobile Apps Development)
Duration
The Joy of React

The Joy of ReactJosh Comeau

Category: React.js, Next.js
Duration 25 hours 35 minutes 33 seconds