Shopify sin cabeza con hidrógeno: crea escaparates personalizados de alto rendimiento

El comercio sin cabeza desacopla la capa de presentación del frontend del motor de comercio backend. Shopify Hydrogen es el marco oficial para crear escaparates personalizados que se conectan al backend de Shopify a través de la Storefront API. Construido sobre Remix (un marco de trabajo completo basado en React), Hydrogen proporciona componentes, ganchos y utilidades específicos del comercio que aceleran el desarrollo al tiempo que aprovechan la infraestructura de gestión de carritos, pagos y clientes de Shopify. Esta guía cubre todo, desde decisiones de arquitectura hasta la implementación.

Conclusiones clave

• Hydrogen se basa en Remix con componentes de servidor React para un rendimiento óptimo de renderizado del lado del servidor
• La API Storefront proporciona acceso de lectura a productos, colecciones y contenido; la API de la cuenta del cliente maneja la autenticación
• Los componentes comerciales (ProductPrice, CartForm, AddToCartButton) eliminan el texto estándar y siguen siendo totalmente personalizables.
• El alojamiento de oxígeno proporciona una infraestructura implementada en el borde optimizada para hidrógeno con escalamiento automático
• Las ganancias de rendimiento del 30 al 50 % en Largest Contentful Paint en comparación con los temas de Shopify Liquid son típicas

Cuándo quedarse sin cabeza

Elija hidrógeno cuando

• Su marca requiere un diseño personalizado que supere las capacidades del tema Liquid
• Necesita integrar contenido desde un CMS headless (Contentful, Sanity, Strapi)
• El rendimiento es un diferenciador competitivo crítico (cargas de página en menos de 1 segundo)
• Su equipo de frontend prefiere React y herramientas modernas de JavaScript
• Necesita una experiencia de aplicación web progresiva (PWA)
• Quiere compartir componentes a través de la web, dispositivos móviles y otros canales.

Quédese con los temas líquidos cuando

• Sus requisitos de diseño se cumplen con temas existentes con personalización
• Carece de recursos de desarrollo frontend para el mantenimiento continuo.
• Necesitas la experiencia completa del editor de temas de administración de Shopify para usuarios no técnicos
• Su presupuesto no permite el alojamiento y el desarrollo de frontend personalizados

Descripción general de la arquitectura

Cómo funciona el hidrógeno

La arquitectura del Hidrógeno consta de:

Remix (marco completo): maneja el enrutamiento, la representación del lado del servidor, la carga de datos y el manejo de formularios. Cada ruta define una función loader (se ejecuta en el servidor) y un componente (se representa en el cliente).

Storefront API (GraphQL): la fuente de datos principal para información de productos, colecciones, búsquedas y contenido. Todos los datos del producto fluyen a través de esta API en lugar de acceder directamente a la base de datos.

API de cuenta de cliente: maneja la autenticación del cliente, el historial de pedidos y la administración de cuentas. Esta API proporciona un flujo de autenticación sin contraseña nativo de Shopify.

Cart API: Gestiona el carrito de compras con el estado del lado del servidor. Las operaciones de carrito (agregar, actualizar, eliminar) utilizan la infraestructura de carrito de Shopify.

Pago: Pago alojado en Shopify (Extensibilidad de pago). El escaparate sin cabeza redirige a la caja de Shopify, que se encarga del procesamiento de pagos, el envío y la creación de pedidos.

Flujo de datos

Configuración del proyecto

Creando un proyecto de hidrógeno

Arma un nuevo proyecto de Hydrogen usando Shopify CLI:

Ejecute Shopify Hydrogen CLI con npx shopify hydrogen init para crear un nuevo proyecto. La CLI solicita:

1. Nombre del proyecto: el nombre de tu tienda
2. Plantilla: esqueleto (mínimo), tienda de demostración (ejemplo completo) o personalizado
3. Idioma: TypeScript (recomendado) o JavaScript
4. Estilo: Tailwind CSS, módulos CSS o CSS básico
5. Credenciales de API de Storefront: dominio de tienda y token de API

Estructura del proyecto

Un proyecto de Hydrogen sigue la convención Remix:

Conexión API de escaparate

Configure la conexión API Storefront en hydrogen.config.ts:

• Dominio de la tienda: Tu dominio myshopify.com
• Token API Storefront: token de acceso público (seguro para uso del lado del cliente)
• Versión de API: la versión de API de Storefront (por ejemplo, 2026-01)
• País/idioma predeterminado: para precios y contenido localizados

Creación de páginas principales

Página de listado de productos

La página de colección utiliza una función loader para recuperar productos de la API Storefront:

La función del cargador recibe el identificador de la colección de los parámetros de URL, consulta la API Storefront con paginación (primeros N productos) y devuelve los datos de la colección. El componente genera una cuadrícula de productos responsiva con imágenes, títulos, precios e información de variantes.

Consideraciones clave:

• Paginación: use paginación basada en cursor (la API Storefront usa conexiones estilo retransmisión)
• Filtrado: aplicar filtros mediante el argumento filters en la consulta de productos
• Clasificación: clasificación por precio de soporte, título, más vendido y por relevancia
• Desplazamiento infinito o "Cargar más": recupera páginas adicionales sin recargar la página completa

Página de detalles del producto

La página del producto busca un único producto con todas las variantes, imágenes y metacampos:

El cargador consulta el producto por identificador, incluidas variantes con precios, imágenes (con tamaños adaptables) y cualquier metacampo que contenga información ampliada del producto. El componente muestra una galería de imágenes, un selector de variantes, una visualización de precios y un botón para agregar al carrito.

Implementación del carrito

Hydrogen proporciona utilidades al carrito a través del componente CartForm:

El CartForm envuelve las operaciones del carrito (agregar, actualizar, eliminar) como envíos de formularios que funcionan sin JavaScript (mejora progresiva). El estado del carrito se almacena en el lado del servidor en la infraestructura del carrito de Shopify, lo que garantiza la coherencia entre pestañas y dispositivos.

Operaciones de carrito:

Optimización del rendimiento

Representación del lado del servidor

Hydrogen aprovecha el SSR de transmisión de Remix para lograr un tiempo rápido hasta el primer byte (TTFB):

• Transmisión: el servidor envía el shell HTML inmediatamente y luego transmite contenido dinámico a medida que se cargan los datos.
• Encabezados de caché: establezca encabezados Cache-Control por ruta para el almacenamiento en caché de CDN
• Obsoleto mientras se revalida: entrega contenido en caché inmediatamente mientras se actualiza en segundo plano

Optimización de imagen

Utilice el componente Image de @shopify/hydrogen para imágenes optimizadas:

• Generación automática de srcset para imágenes responsivas
• Entrega en formato WebP/AVIF basada en la compatibilidad del navegador
• Carga diferida para imágenes en la mitad inferior de la página
• Imágenes borrosas del marcador de posición durante la carga

División de código

Remix divide automáticamente el código por ruta. Optimización adicional:

• Utilice importaciones dinámicas para componentes pesados (galerías de imágenes, visores 3D)
• Carga diferida de scripts de terceros (análisis, widgets de chat) después de cargar la página
• Minimizar JavaScript del lado del cliente con componentes de React Server

Puntos de referencia de rendimiento

Rendimiento típico de Hidrógeno en comparación con los temas de Líquido:

Despliegue con Oxígeno

¿Qué es el oxígeno?

Oxygen es la plataforma de alojamiento de Shopify creada específicamente para escaparates de Hydrogen. Se implementa en una red de borde global con:

• Escalado automático basado en el tráfico.
• Protección DDoS incorporada
• Gestión de certificados SSL/TLS
• Integración CI/CD con GitHub
• Gestión de variables de entorno.
• Vista previa de implementaciones para solicitudes de extracción

Proceso de implementación

1. Conecta tu repositorio de GitHub a Oxygen a través del administrador de Shopify
2. Empujar a la rama principal activa la implementación automática
3. Las solicitudes de extracción generan URL de vista previa para realizar pruebas.
4. Las variables de entorno se gestionan a través del administrador de Shopify.
5. Los dominios personalizados se configuran con registros DNS CNAME

Alojamiento alternativo

Si bien Oxygen está optimizado para Hydrogen, puede implementarlo en cualquier alojamiento compatible con Node.js:

• Vercel: Excelente compatibilidad con Remix con funciones periféricas
• Cloudflare Workers: implementación perimetral con tiempo de ejecución de Workers
• Fly.io: implementación basada en contenedores con distribución global
• AWS: implementación de ECS, Lambda o App Runner

Integración CMS sin cabeza

Arquitectura de contenido

Los escaparates de hidrógeno comúnmente se integran con plataformas CMS sin cabeza para contenido que no es de productos:

Integraciones de CMS populares

• Sanity: vistas previas en tiempo real con Sanity Studio integrado en Hydrogen
• Contenido: integración de la API GraphQL con modelado de contenido
• Strapi: opción autohospedada con API REST o GraphQL
• Shopify Metaobjects: contenido nativo de Shopify para requisitos más simples

SEO para escaparates sin cabeza

Implementaciones críticas de SEO

• Representación del lado del servidor: todo el contenido se representa en el servidor para los rastreadores de motores de búsqueda.
• Metaetiquetas: utilice la exportación meta de Remix para etiquetas de título, descripción y Open Graph.
• Datos estructurados: esquemas JSON-LD para Producto, BreadcrumbList y Organización
• Mapa del sitio: generar dinámicamente a partir de datos de Storefront API
• URL canónicas: evita contenido duplicado en variantes y colecciones
• Hreflang: Implementación para escaparates de Markets Pro en varios idiomas

Servicios de Hidrógeno ECOSIRE

Crear una tienda Shopify sin cabeza requiere experiencia en desarrollo de frontend junto con una estrategia comercial. El equipo de desarrollo de temas personalizados de Shopify de ECOSIRE crea escaparates de Hydrogen desde el concepto hasta el lanzamiento. Nuestros servicios de optimización de velocidad garantizan que tu tienda headless cumpla con los objetivos de Core Web Vitals, y nuestro soporte continuo mantiene y evoluciona tu tienda a medida que avanza la plataforma de Shopify.

Lectura relacionada

• Shopify Headless Commerce con Hidrógeno
• Guía de integración de API de Shopify
• Guía de optimización de la velocidad de la página de Shopify
• Guía de desarrollo de aplicaciones de Shopify
• Guía de personalización del tema de Shopify

¿Quedarse sin cabeza con Hydrogen significa perder el editor de temas de Shopify?

Sí. Los escaparates de Hydrogen no utilizan el editor de temas de Shopify. Los cambios de contenido requieren actualizaciones de código o integración con un CMS sin cabeza que brinde una experiencia de edición visual. Esta es la principal desventaja de la arquitectura headless: máxima flexibilidad frontal a costa de la experiencia de edición sin código.

¿Puedo usar Hydrogen solo en una parte de mi tienda Shopify?

No directamente: el hidrógeno reemplaza toda la interfaz. Sin embargo, puedes utilizar un enfoque híbrido: ejecutar una tienda Hydrogen para el sitio principal y utilizar el proceso de pago alojado en Shopify para el flujo de pago (este es el enfoque estándar). Algunos comerciantes también utilizan Hydrogen para páginas de marketing y mantienen un tema Liquid para el catálogo.

¿Cuál es el costo de desarrollo de un escaparate de Hydrogen en comparación con un tema de Liquid?

Una compilación personalizada de Hydrogen generalmente cuesta entre 2 y 5 veces más que un tema Liquid personalizado debido a los requisitos de desarrollo de React y la configuración de la infraestructura. Sin embargo, la velocidad de iteración continua es más rápida para los equipos con experiencia en React y los beneficios de rendimiento pueden traducirse en mejoras de conversión mensurables que justifiquen la inversión.