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

Complete Next.js Developer in 2023: Zero to Mastery

Complete Next.js Developer in 2023: Zero to Masteryzerotomastery.io

Category: Next.js
Duration 32 hours 32 minutes 25 seconds
Ultimate Next.js Course 2024 Edition

Ultimate Next.js Course 2024 Editiondevelopedbyed.com

Category: Next.js
Duration 29 hours 39 minutes 9 seconds
NextJS & OpenAI - 2024 Edition

NextJS & OpenAI - 2024 Editionudemy

Category: Next.js
Duration 13 hours 41 minutes 21 seconds
Next.js - The Full Course

Next.js - The Full Coursefireship.io

Category: React.js, Next.js
Duration 1 hour 14 minutes 14 seconds
The Joy of React

The Joy of ReactJosh Comeau

Category: React.js, Next.js
Duration 25 hours 35 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
Solidity & Ethereum in React (Next JS): The Complete Guide

Solidity & Ethereum in React (Next JS): The Complete Guideudemy

Category: React.js, Next.js, Decentralized Applications (dApps) / 'Web 3'
Duration 38 hours 47 minutes 24 seconds
Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2

Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2udemy

Category: Next.js, Wordpress
Duration 8 hours 6 minutes 25 seconds
Real-Time Collaborative Apps with Next.js and Supabase

Real-Time Collaborative Apps with Next.js and Supabasefullstack.io

Category: Next.js
Duration 51 minutes 59 seconds