15 Open-source Shopify Next.js Starters, Boilerplate and Templates
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:
1- Hull
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.
Hamza Mousa
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
Sitemap.xmlgeneration - Automatic
robots.txtgeneration - 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
- Required
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
- Dynamic
/shopcollection page - Custom collection pages
- Ability to surface a variant option on product cards
ndimatteo2- 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.
Tech stack
- Next.js + Tailwind CSS
- GraphQL
- localStorage to persist user session
- Shopify
- Vercel
- Font Awesome Icons
- Josefin Sans Google Font
btahir3- Next.js + Shopify + Builder.io starter kit
The ultimate starter for headless Shopify stores. It is SEO optimized, themable and highly customizable.
Features
- Ultra high performance
- SEO optimized
- Themable
- Personalizable (internationalization, a/b testing, etc)
- Builder.io Visual CMS integrated
BuilderIO
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.
kinngh
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
iskurbanov
6- shopify-app-nextjs-starter
This is an opinionated Shopify App starter kit based on Next.js.
r0busta
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.
Maxvien
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.
Features
- 📝 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
carstenlebek
9- Shopify and Hydrogen Template
This is a Next.js implementation of the Shopify Hydrogen template that utilizes Remix.
thisdot10- Shopify NextJS App Example
An example app built with NextJS that can be setup and deployed to production in seconds on Vercel.
redochka
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.
takeshape
12- nextjs-shopify-app
Boilerplate to create an embedded Shopify app made with Node, Next.js, Polaris, and App Bridge React.
Based on bluebeel/nextjs-shopify, uses only Next.js as a server, enabling Serverless deployments. Unlike Shopify/shopify-app-node which requires use of a custom server with Koa router.
circular-way
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.
bdoroshev
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.
Features
- ✅ Easy to use, Next.js friendly implementation of the Shopify Storefront API.
- 🗄 Store your cart id in
localStorage. - 🐎 Global app cache with
react-query. - 💥 API route handler with catch-all API routes.
basementstudio
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:
Server Side
Middleware
handleAuthStart- for handling the first step of the Shopify OAuth handshake and redirecting back to Shopify with access scope requestshandleAuthCallback- for handling the second step of the Shopify OAuth handshake and retrieving the merchant's access tokenwithSessionToken- for verifying the Authorization HTTP header containing the frontend generated Session Token
Redirect to a custom URL after OAuth
By default 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 handleAuthCallback.
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.
ctrlaltdylan
