15 Open-source Shopify Next.js Starters, Boilerplate and Templates

15 Open-source Shopify Next.js Starters, Boilerplate and Templates
Photo by Roberto Cortese / Unsplash

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.

Hull: Headless Next.js Starter for Shopify and Headless CMS with Sanity.io
Hull is a free open-source Next.js starter for anyone who is interested in building a content rich eCommerce shop with full SEO support. It is easy to deploy on Vercel platform, and simple to setup. Developers can also deploy it on Sanity or their own servers. Hull is maintained

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.xml generation
  • Automatic robots.txt generation
  • 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 alt text 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 /shop collection page
  • Custom collection pages
  • Ability to surface a variant option on product cards
GitHub - ndimatteo/HULL: ๐Ÿ’€ Headless Shopify Starter โ€“ powered by Next.js + Sanity.io
๐Ÿ’€ Headless Shopify Starter โ€“ powered by Next.js + Sanity.io - GitHub - ndimatteo/HULL: ๐Ÿ’€ Headless Shopify Starter โ€“ powered by Next.js + Sanity.io

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.

Tech stack

  • Next.js + Tailwind CSS
  • GraphQL
  • localStorage to persist user session
  • Shopify
  • Vercel
  • Font Awesome Icons
  • Josefin Sans Google Font
GitHub - btahir/next-shopify-starter: Nextjs + Tailwind CSS + Shopify Starter
Nextjs + Tailwind CSS + Shopify Starter. Contribute to btahir/next-shopify-starter development by creating an account on GitHub.

3- 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
GitHub - BuilderIO/nextjs-shopify: The ultimate starter for headless Shopify stores
The ultimate starter for headless Shopify stores. Contribute to BuilderIO/nextjs-shopify development by creating an account on GitHub.

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.

GitHub - kinngh/shopify-nextjs-prisma-app: An embedded Shopify app starter template made with Next.js and Prisma ORM, with all the required stuff hooked up.
An embedded Shopify app starter template made with Next.js and Prisma ORM, with all the required stuff hooked up. - GitHub - kinngh/shopify-nextjs-prisma-app: An embedded Shopify app starter templaโ€ฆ

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

GitHub - iskurbanov/shopify-next.js-tailwind: Learn the Shopify + Next.js + Tailwind CSS Stack! SWR, Hydrogen, + more
Learn the Shopify + Next.js + Tailwind CSS Stack! SWR, Hydrogen, + more - GitHub - iskurbanov/shopify-next.js-tailwind: Learn the Shopify + Next.js + Tailwind CSS Stack! SWR, Hydrogen, + more

6- shopify-app-nextjs-starter

This is an opinionated Shopify App starter kit based on Next.js.

GitHub - r0busta/shopify-app-nextjs-starter: Opinionated Shopify App starter kit based on Next.js
Opinionated Shopify App starter kit based on Next.js - GitHub - r0busta/shopify-app-nextjs-starter: 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.

GitHub - Maxvien/next-shopify-storefront: ๐Ÿ› A Shopping Cart built with TypeScript, Tailwind CSS, Headless UI, Next.js, React.js, Shopify Hydrogen React,... and Shopify Storefront GraphQL API.
๐Ÿ› A Shopping Cart built with TypeScript, Tailwind CSS, Headless UI, Next.js, React.js, Shopify Hydrogen React,... and Shopify Storefront GraphQL API. - GitHub - Maxvien/next-shopify-storefront: ๐Ÿ›โ€ฆ

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
GitHub - carstenlebek/shopify-node-app-starter: ๐Ÿš€๐Ÿš€ A Shopify embedded app starter template, written in TypeScript with session storage, app context and examples for basic functionalities.
๐Ÿš€๐Ÿš€ A Shopify embedded app starter template, written in TypeScript with session storage, app context and examples for basic functionalities. - GitHub - carstenlebek/shopify-node-app-starter: ๐Ÿš€๐Ÿš€ A Shโ€ฆ

9- Shopify and Hydrogen Template

This is a Next.js implementation of the Shopify Hydrogen template that utilizes Remix.

GitHub - thisdot/hydrogen-nextjs: This is a Next.js implementation of the Shopify Hydrogen template that utilizes Remix.
This is a Next.js implementation of the Shopify Hydrogen template that utilizes Remix. - GitHub - thisdot/hydrogen-nextjs: This is a Next.js implementation of the Shopify Hydrogen template that utiโ€ฆ

10- Shopify NextJS App Example

An example app built with NextJS that can be setup and deployed to production in seconds on Vercel.

GitHub - redochka/nextjs-shopify-app-no-custom-server: Shopify app using NextJS. No custom NextJS server needed.
Shopify app using NextJS. No custom NextJS server needed. - GitHub - redochka/nextjs-shopify-app-no-custom-server: Shopify app using NextJS. No custom NextJS server needed.

11- Shopify Storefornt

  1. 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.

GitHub - takeshape/takeshape-starter-shopify-nextjs: A Shopify storefront built with TakeShape and Next.js
A Shopify storefront built with TakeShape and Next.js - GitHub - takeshape/takeshape-starter-shopify-nextjs: A Shopify storefront built with TakeShape and Next.js

12- nextjs-shopify-app

Boilerplate to create an embedded Shopify app made with Node, Next.jsPolaris, 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.

GitHub - circular-way/nextjs-shopify-app: Boilerplate to create an embedded Shopify app made with Next.js and Typescript
Boilerplate to create an embedded Shopify app made with Next.js and Typescript - GitHub - circular-way/nextjs-shopify-app: Boilerplate to create an embedded Shopify app made with Next.js and Typescโ€ฆ

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.

GitHub - bdoroshev/Shopify-NextJS-Tailwind
Contribute to bdoroshev/Shopify-NextJS-Tailwind development by creating an account on GitHub.

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

GitHub - basementstudio/next-shopify: A context, a hook, and an API route handler, to manage a Shopify Storefront in your Next.js app.
A context, a hook, and an API route handler, to manage a Shopify Storefront in your Next.js app. - GitHub - basementstudio/next-shopify: A context, a hook, and an API route handler, to manage a Shoโ€ฆ

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 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

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.

GitHub - ctrlaltdylan/shopify-nextjs-toolbox: A set of tools to authenticate NextJs apps with Shopifyโ€™s OAuth handshake and AppBridge Session Tokens
A set of tools to authenticate NextJs apps with Shopify&#39;s OAuth handshake and AppBridge Session Tokens - GitHub - ctrlaltdylan/shopify-nextjs-toolbox: A set of tools to authenticate NextJs appsโ€ฆ







Open-source Apps

9,500+

Medical Apps

500+

Lists

450+

Dev. Resources

900+