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 Firebase - The Full Course

Next.js Firebase - The Full Course

Sources: fireship.io
You will build a full-stack Social Blogging Platform inspired by sites like DEV.to and Medium. Authors can create content under their custom username, then pub
2 hours 38 minutes 13 seconds
FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT

FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT

Sources: udemy
This is simply the best course on the internet if you want to build and deploy the best authentication system that you can take and use in all of your projects
6 hours 52 minutes 28 seconds
Building an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)

Building an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)

Sources: Web Dev Cody
Are you looking to take your web development skills to the next level? Do you want to learn how to build a fully functional icon generator that integrates with
5 hours 53 minutes 23 seconds
Next.js From Scratch 2024

Next.js From Scratch 2024

Sources: Brad Traversy
The main project in this course is a full-featured property rental website with property search, browsing and management. User authentication using Next Auth al
11 hours 54 minutes 9 seconds
Build your AI startup in hours using our customizable demo apps | AnotherWrapper

Build your AI startup in hours using our customizable demo apps | AnotherWrapper

Sources: Fekri
Create your AI startup quickly and efficiently using AnotherWrapper's customizable demo apps. Our all-in-one Next.js AI starter kit includes everything you...