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

FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT

FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT

Duration 6 hours 52 minutes 28 seconds
Ultimate Next.js 13 Course + eBook

Ultimate Next.js 13 Course + eBook

Duration 51 hours 35 minutes 4 seconds
Advanced Shopify Theme Development: Liquid + Vue.js (v3.0)

Advanced Shopify Theme Development: Liquid + Vue.js (v3.0)

Duration 6 hours 37 minutes 49 seconds
Server side rendering with Next + React

Server side rendering with Next + React

Duration 29 hours 43 minutes 19 seconds
Next40. Master Next.js 14 in 40 days of epic projects

Next40. Master Next.js 14 in 40 days of epic projects

Duration 4 hours 52 minutes 49 seconds
Next.js Projects: Build an Issue Tracker

Next.js Projects: Build an Issue Tracker

Duration 7 hours 1 minute 57 seconds
Mastering Next.js 13 with TypeScript

Mastering Next.js 13 with TypeScript

Duration 5 hours 16 minutes 33 seconds