Shopify + Next.js + Tailwind CSS: Modern Ecommerce

5h 7m 23s
English
Paid

Course description

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

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

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

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Next.js Ecommerce

Next.js Ecommerce

Sources: Brad Traversy
The Next.js Ecommerce course is an extensive 22-hour program that teaches you step by step how to create a full-fledged e-commerce platform with...
22 hours 12 minutes 23 seconds
MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs

MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs

Sources: udemy
If you are a person who is not picky about a CSS framework and wants to learn how to create enterprise-grade, practical full stack app using new technologies, then this course i...
13 hours 2 minutes 12 seconds
Real-Time Collaborative Apps with Next.js and Supabase

Real-Time Collaborative Apps with Next.js and Supabase

Sources: fullstack.io
This course is here to assist you in efficiently creating real-time applications using Next.js, TypeScript, Tailwind CSS, and Supabase. We go beyond the fundame
51 minutes 59 seconds
Duolingo Clone

Duolingo Clone

Sources: Code With Antonio
In this 11-hour course, you will learn how to create your own SaaS application for language learning, similar to Duolingo. Users will be able to choose language
11 hours 12 minutes 32 seconds
Zero To Shipped. The ultimate Next.js template

Zero To Shipped. The ultimate Next.js template

Sources: Kitze
Zero To Shipped is a powerful Next.js template designed to accelerate the full cycle of web application development. It offers a ready-made infrastructure with.