Shopify es una plataforma de comercio electrónico que permite a las empresas crear y administrar tiendas en línea. Proporciona una variedad de funciones y herramientas para vender productos, administrar inventario, procesar pagos y personalizar el diseño de la tienda en línea.

Shopify Next.js Starter es una plantilla inicial o modelo estándar para crear escaparates de Shopify utilizando Next.js. Next.js es un marco React popular para crear aplicaciones web. Shopify Next.js Starter proporciona una configuración preconfigurada para integrar una interfaz Next.js con la plataforma Shopify, lo que permite a los desarrolladores comenzar rápidamente a crear escaparates Shopify personalizados con tecnologías web modernas.

Aquí está nuestra lista:

1- Casco

Cáscara es un iniciador de Shopify gratuito y de código abierto que se basa en Next.js, Sanity.io y utiliza bibliotecas de última generación. Ofrece una integración de alto nivel con Shopify API.

Sus características incluyen:

• CSS de utilidad con CSS de viento de cola
• Animaciones impulsadas por Movimiento del encuadre
• Carro impulsado por Shopify Comprar SDK
• Verificación de inventario en tiempo real para productos que utilizan ROE
• Filtrado y clasificación personalizables para colecciones de productos
• Formulario de lista de espera de Klaviyo para productos agotados
• Formulario de boletín informativo de Klaviyo con campo de suscripción
• Rutas de página dinámicas para la creación de páginas personalizadas
• Automático Sitemap.xml generación
• Automático robots.txt generación
• Redirecciones automáticas 301 desde Sanity
• Vista previa en vivo del contenido directamente desde Sanity
• Componente de imagen moderna que utiliza Hotspot, Recorte y formato WEBP automático de Sanity
• Contenido de página modular para todas las páginas, incluidos diseños de cuadrícula dinámica
• Banner de promoción personalizable
• Aviso de cookies personalizable
• Funciones de accesibilidad:
  • Roles emblemáticos de ARIA
  • Estados de enfoque predeterminados conservados para la navegación con el teclado
  • Enfoque correcto para cajones con enfoque-trampa-reaccionar
  • Índice de tabulación móvil para botones de radio
  • Contadores de cantidades basados ​​en entradas
  • Requerido alt texto para todas las imágenes
  • Enlace “Saltar al contenido”
• Funciones de SEO:
  • Configuración de SEO/Compartir a nivel de página con vistas previas
  • Configuración alternativa de SEO global/Compartir
  • Marcado automático de esquema JSON-LD para productos

Funciones de integración de Shopify

• Sincroniza automáticamente productos de Shopify con Sanity
• Acción personalizada para sincronizar las miniaturas del carrito de productos con Shopify desde Sanity
• Realiza un seguimiento del estado del producto (borrador/publicado) desde Shopify para ayudar a controlar la visibilidad durante la edición.
• Los productos y variantes eliminados se conservan y marcan en Sanity
• Actualiza la URL sobre cambios de variantes mientras mantiene una pila de historial limpia
• Enmascaramiento de URL de tienda personalizada
• Carrito global con acceso a todos los datos de variantes de artículos de línea
• Admite productos de variante única listos para usar
• Galerías de fotos de productos con granularidad variante
• Dinámica /shop página de colección
• Páginas de colección personalizadas
• Posibilidad de mostrar una opción variante en las tarjetas de producto

2- Next.js + Tailwind CSS + Inicio de Shopify

Este es un completamente funcional. iniciador de tienda de comercio electrónico que utiliza Next.js + Tailwind CSS en el front-end y aprovecha el API de escaparate de Shopify para interactuar con tu backend de Shopify. Tiene licencia bajo la licencia MIT.

Pila de tecnología

• Next.js + CSS de viento de cola
• GrafoQL
• localStorage para persistir la sesión del usuario
• comprar
• Vercel
• Iconos impresionantes de fuentes
• Fuente Josefin Sans Google

3- Kit de inicio Next.js + Shopify + Builder.io

El iniciador definitivo para Shopify sin cabeza historias. Está optimizado para SEO, tematizable y altamente personalizable.

Características

• Rendimiento ultraalto
• SEO optimizado
• temática
• Personalizable (internacionalización, test a/b, etc)
• Builder.io Visual CMS integrado

4- Shopify Next.js x Prisma modelo estándar

Esto es un aplicación integrada plantilla inicial para comenzar a trabajar en el desarrollo de aplicaciones Shopify con Next.js y Prisma.

5- shopify-next.js-tailwind (Curso)

Esto es un listo para la producción Escaparate de Shopify sin cabeza usando Next.js, Shopify Storefront API (GraphQL), Tailwind CSS y Vercel. Este es un proyecto del curso “Learn Shopify + Next.js + Tailwind CSS” disponible en www.BuildNextShop.com

6- inicio-shopify-aplicación-nextjs

Esto es un Aplicación Shopify obstinada kit de inicio basado en Next.js.

7- Siguiente escaparate de Shopify

Este es un completo Iniciador del carrito de compras construido con TypeScript, Tailwind CSS, Headless UI, Next.js, React.js, Shopify Hydrogen React,… y Shopify Storefront GraphQL API.

8- Plantilla de aplicación Shopify | Siguiente.js | Mecanografiado

Este es un obstinado plantilla inicial para aplicaciones Shopify integradas. La opinión más generalizada es que Typecript debería usarse en todas partes y es la única opinión correcta.

Esta plantilla utiliza las API Middleware y Next.js para OAuth, por lo que no se necesita un servidor personalizado.

Características

• Mecanografiado
• Next.js: React Framework para renderizado estático
• Arquitectura sin servidor
• Suscripciones a aplicaciones
• Almacenamiento de sesiones con Redis
• Ngrok para el desarrollo
• Registro y persistencia del webhook después del reinicio del servidor
• Listo para usar tokens de acceso en línea y fuera de línea simultáneamente
• Configuración del contexto de la aplicación. Se puede utilizar para almacenar datos que solo deben recuperarse una vez, pero que se necesitan en varios luga
  res.
• Solicitar configuración de verificación
• Componente de enlace para convertir <a> etiquetas a enlaces siguientes para rutas relativas
• Configuración de propagación de ruta
• Ejemplos para crear y mostrar suscripciones a aplicaciones
• Cargando pantalla mientras se inicializa el contexto de la aplicación

9- Plantilla Shopify e Hidrógeno

Esta es una implementación Next.js del Shopify Hidrógeno plantilla que utiliza Remix.

10- Ejemplo de aplicación Shopify NextJS

Una aplicación de ejemplo creada con NextJS que se puede configurar e implementar en producción en segundos en Vercel.

11- Tienda Shopify

1. Un escaparate de Shopify creado con TakeShape y Next.js

Este proyecto muestra cómo conectar comprar con Tomar forma abre nuevas posibilidades para el comercio electrónico en el pila de mermelada. Al conectar Shopify a tu proyecto TakeShape, puedes obtener datos de tus productos y contenido desde una única API GraphQL. Este proyecto de muestra se construye usando Siguiente.js y nuestro demo en vivo se despliega a Vercel.

12- aplicación-shopify-nextjs

repetitivo para crear una aplicación Shopify integrada hecha con Node, Siguiente.js, estrella polary Aplicación Puente Reaccionar.

Residencia en bluebeel/nextjs-shopify, utiliza solo Next.js como servidor, lo que permite implementaciones sin servidor. A diferencia de Shopify/nodo-aplicación-shopify lo que requiere el uso de un servidor personalizado con enrutador Koa.

13- Proyecto de cartera Shopify + Next.js + Tailwind CSS

Esto es un listo para la producción Escaparate de Shopify sin cabeza usando Next.js, Shopify Storefront API (GraphQL), Tailwind CSS y Vercel.

14- Siguiente Shopify

Siguiente Shopify es un iniciador de código abierto que incluye un contexto, un enlace y un controlador de ruta API para administrar un Shopify Storefront en su aplicación Next.js.

Características

• Fácil de usar, implementación amigable con Next.js del API de escaparate de Shopify.
• Guarde la identificación de su carrito en localStorage.
• Caché global de aplicaciones con react-query.
• Controlador de ruta API con rutas API generales.

15- Caja de herramientas Shopify NextJS

A conjunto del lado del servidor y del lado del cliente Utilidades de Next.js para la integración con los sistemas de autenticación OAuth y App Bridge de Shopify.

Estas herramientas te permitirán completar todos los pasos del nuevo sistema de autenticación de Shopify sin Koa.js.

Este paquete incluye las siguientes herramientas:

Lado del servidor

software intermedio

• handleAuthStart – para manejar el primer paso del protocolo de enlace de Shopify OAuth y redirigir nuevamente a Shopify con solicitudes de alcance de acceso
• handleAuthCallback – para manejar el segundo paso del protocolo de enlace Shopify OAuth y recuperar el token de acceso del comerciante
• withSessionToken – para verificar el encabezado HTTP de autorización que contiene el token de sesión generado por la interfaz

Redirigir a una URL personalizada después de OAuth

Por defecto handleAuthCallback asume que después de que un usuario haya aceptado los alcances de su aplicación, lo redireccionará a la ruta definida en el HOME_PATH Variable ambiental. No es necesario devolver una cadena o usar res.redirect dentro de la handleAuthCallback.

Sin embargo, si su aplicación solicita un plan de pago inmediatamente después de la instalación, deberá redirigirla a la URL de confirmación del plan de pago en tiempo de ejecución.

Etiquetas

Lista Next.js CMS de comercio electrónico de código abierto JavaScript sin cabeza TypeScript Vercel Generador estático React