Shopify is an e-commerce platform that allows businesses to create and manage online stores. It provides a range of features and tools for selling products, managing inventory, processing payments, and customizing the online store's design.
Shopify Next.js Starter is a starter template or boilerplate for building Shopify storefronts using Next.js. Next.js is a popular React framework for building web applications. The Shopify Next.js Starter provides a pre-configured setup for integrating a Next.js frontend with the Shopify platform, enabling developers to quickly start building custom Shopify storefronts with modern web technologies.
Here is our list:
Hull is a free and open-source Shopify starter that is built on top of Next.js, Sanity.io and uses cutting-edge libraries. It offers a high level integration with Shopify API.
Its features include:
- Utility-first CSS with Tailwind CSS
- Animations powered by Framer Motion
- Cart powered by Shopify Buy SDK
- Real-time inventory check for products using SWR
- Customizable Filtering & Sorting for product collections
- Klaviyo waitlist form for out-of-stock products
- Klaviyo newsletter form with opt-in field
- Dynamic Page Routes for custom page creation
- Automatic 301 Redirects from Sanity
- Live Preview content directly from Sanity
- Modern Image component using Sanity's Hotspot, Crop, and automatic WEBP format
- Modular page content for all pages, including dynamic grid layouts
- Customizable Promotion Banner
- Customizable Cookie Notice
- Accessibility features:
- ARIA Landmark Roles
- Default focus states preserved for keyboard navigation
- Correctly trap focus for drawers with focus-trap-react
- Roving tabindex for radio buttons
- Input-based quantity counters
alttext for all images
- "Skip to Content" link
- SEO features:
- Page-level SEO/Share settings with previews
- Fallback Global SEO/Share settings
- Automatic JSON-LD Schema markup for products
Shopify Integration features
- Automatically syncs products from Shopify into Sanity
- Custom action to sync product cart thumbnails back to Shopify from Sanity
- Tracks product status (draft/published) from Shopify to help control visibility while editing
- Deleted products and variants are preserved and flagged in Sanity
- Updates the URL on variant changes while keeping a clean history stack
- Vanity shop URL masking
- Global Cart with access to all variant data for line items
- Supports Single Variant products out of the box
- Product photo galleries with variant granularity
- Custom collection pages
- Ability to surface a variant option on product cards
2- Next.js + Tailwind CSS + Shopify Starter
This is a fully functional eCommerce store starter that uses Next.js + Tailwind CSS in the front end and leverages the Shopify Storefront API to interact with your Shopify backend. It is licensed under the MIT license.
- Next.js + Tailwind CSS
- localStorage to persist user session
- Font Awesome Icons
- Josefin Sans Google Font
3- Next.js + Shopify + Builder.io starter kit
The ultimate starter for headless Shopify stores. It is SEO optimized, themable and highly customizable.
- Ultra high performance
- SEO optimized
- Personalizable (internationalization, a/b testing, etc)
- Builder.io Visual CMS integrated
4- Shopify Next.js x Prisma Boilerplate
This is an embedded app starter template to get up and ready with Shopify app development with Next.js and Prisma.
5- shopify-next.js-tailwind (Course)
This is a production ready Headless Shopify storefront using Next.js, Shopify Storefront API (GraphQL), Tailwind CSS, and Vercel. This is a project from the "Learn Shopify + Next.js + Tailwind CSS" course available at www.BuildNextShop.com
This is an opinionated Shopify App starter kit based on Next.js.
7- Next Shopify Storefront
This is a complete Shopping Cart starter built with TypeScript, Tailwind CSS, Headless UI, Next.js, React.js, Shopify Hydrogen React,... and Shopify Storefront GraphQL API.
8- Shopify App Template | Next.js | Typescript
This is an opinionated starter template for embedded Shopify apps. The biggest opinion is, that Typescript should be used everywhere and it's the only right opinion.
This Template utilizes Middleware and Next.js APIs for OAuth, so no custom server is needed.
- 📝 TypeScript
- ⚡ Next.js - React Framework for static rendering
- ✨ Serverless Architecture
- 💳 App Subscriptions
- 💾 Session Storage with Redis
- 🚇 Ngrok for development
- 🪝 Webhook registration and persistance after server restart
- 🔑 Ready to use online and offline accesstokens simultaneously
- 🌐 App context set up. Can be used to store data, that only needs to be fetched once, but is needed in multiple places
- Request verification set up
- Link component to convert
<a>tags to Next Links for relative paths
- Routepropagation set up
- Examples for creating and displaying of app subscriptions
- Loading screen while the app context is initializing
9- Shopify and Hydrogen Template
This is a Next.js implementation of the Shopify Hydrogen template that utilizes Remix.
10- Shopify NextJS App Example
An example app built with NextJS that can be setup and deployed to production in seconds on Vercel.
11- Shopify Storefornt
- A Shopify storefront built with TakeShape and Next.js
This project shows off how connecting Shopify with TakeShape opens up new possibilities for e-commerce on the Jamstack. By connecting Shopify to your TakeShape project, you can get data for your products and content from a single GraphQL API. This sample project is built using Next.js and our live demo is deployed to Vercel.
13- Shopify + Next.js + Tailwind CSS portfolio project
This is a production ready Headless Shopify storefront using Next.js, Shopify Storefront API (GraphQL), Tailwind CSS, and Vercel.
14- Next Shopify
Next Shopify is an open-source starter that include A context, a hook, and an API route handler, to manage a Shopify Storefront in your Next.js app.
- ✅ Easy to use, Next.js friendly implementation of the Shopify Storefront API.
- 🗄 Store your cart id in
- 🐎 Global app cache with
- 💥 API route handler with catch-all API routes.
15- Shopify NextJS Toolbox
A set of server side and client side Next.js utilities for integrating with Shopify's OAuth & App Bridge authentication systems.
These tools will allow you to complete all steps for Shopify's new authentication system without Koa.js.
This package includes the following tools:
handleAuthStart- for handling the first step of the Shopify OAuth handshake and redirecting back to Shopify with access scope requests
handleAuthCallback- for handling the second step of the Shopify OAuth handshake and retrieving the merchant's access token
withSessionToken- for verifying the Authorization HTTP header containing the frontend generated Session Token
handleAuthCallback assumes that after a user has accepted your app's scopes it will redirect the user back to the path defined in the
HOME_PATH environment variable. No need to return a string or use
res.redirect inside of the
However, if your app prompts for a payment plan immediately on install, you'll need to redirect them to the payment plan's confirmation URL at runtime.