Construir e integrar Shopify: la guía completa

Shopify es ampliamente conocido como plataforma para poner una tienda en marcha rápidamente. Lo que se entiende menos es hasta dónde se extiende la plataforma cuando se construye correctamente sobre ella: lógica de checkout personalizada, storefronts headless, canales B2B enterprise y una API GraphQL capaz de gestionar un backend de commerce completo. Esta guía cubre todo el espectro, desde los conceptos básicos de Liquid hasta la topología de integración de una marca mid-market que usa Shopify Plus junto a un ERP y tres herramientas de marketing. Léala de principio a fin y entenderéis nuestro enfoque antes de que hablemos.

La arquitectura de Shopify

Shopify es una plataforma SaaS multi-tenant. No gestionáis servidores, bases de datos ni infraestructura. En cambio, trabajais dentro de tres capas: el storefront (lo que ven los compradores), el admin (donde los comerciantes gestionan productos, pedidos y configuración) y la capa de API (cómo los sistemas externos leen y escriben datos de la tienda). Entender en qué capa vive un problema determina cómo resolverlo.

Arquitectura storefront de Shopify: del navegador al backend

El storefront y el admin están estrechamente acoplados en Shopify estándar: las plantillas Liquid leen directamente del modelo de datos de Shopify y se renderizan en la CDN de Shopify. En una configuración headless, el storefront está desacoplado y se comunica con Shopify a través de la Storefront API, lo que permite usar cualquier framework frontend pero añade complejidad y elimina algunas funcionalidades nativas como el flujo de checkout hospedado. La mayoría de las tiendas no necesitan headless, y lo diremos sin ambages.

Desarrollo de temas Liquid

Liquid es el lenguaje de plantillas de Shopify. Se parece al HTML con etiquetas adicionales para emitir datos dinámicos, iterar sobre colecciones y renderizar bloques de forma condicional. Cada tema Shopify estándar está construido en Liquid, y la mayor parte del desarrollo personalizado en Shopify implica escribir, extender o depurar este lenguaje.

La arquitectura de temas actual es Online Store 2.0, que introdujo las plantillas JSON y el sistema de secciones y bloques que hace los temas personalizables en el editor visual sin tocar código. Siempre construimos según los estándares OS 2.0:

• Plantillas JSON. Cada tipo de página (producto, colección, página, blog) está definido por un archivo JSON que lista las secciones que puede contener. Esto separa la estructura del contenido y permite a los comerciantes añadir secciones sin un desarrollador.
• Secciones y bloques. Las secciones son componentes de layout reutilizables. Los bloques son los elementos personalizables dentro de ellas. Un tema bien construido tiene una pequeña librería de secciones que los comerciantes pueden componer en cualquier layout de página sin tocar Liquid.
• Metafields y metaobjects. Datos estructurados adjuntos a productos, variantes, colecciones o páginas. Usamos metafields para todo lo que no encaja en el esquema de producto predeterminado: especificaciones técnicas, instrucciones de cuidado, productos relacionados o cualquier dato personalizado que el negocio necesite en el storefront.
• App blocks. La forma OS 2.0 para que las apps inyecten contenido en un tema sin editar directamente los archivos de plantilla. Preferimos los app blocks frente a la inyección manual de plantillas porque sobreviven a las actualizaciones del tema sin problemas.

Shopify Plus

Shopify Plus es el nivel enterprise. Las funcionalidades que realmente importan son específicas, y vale la pena ser claros sobre cuáles son, porque el discurso del equipo de ventas de Shopify no siempre está calibrado según lo que vuestra tienda realmente necesita.

Las funcionalidades que justifican el coste de Plus:

• Checkout extensions. La única forma de modificar el checkout en Shopify es a través del framework de checkout extensions, disponible solo en Plus. Si necesitáis upsells personalizados dentro del checkout, captura de campos personalizados, validación de dirección que hable con vuestra propia API o visualización de puntos de fidelización, este es el camino.
• Shopify Flow. Un builder de automatización sin código que funciona en el backend. Útil para etiquetar clientes de alto valor, activar flujos de trabajo de fulfillment, enviar alertas internas ante condiciones específicas de pedidos y una docena más de cosas que de otro modo requerirían una app personalizada.
• B2B en Shopify. Cuentas de empresa, listas de precios personalizadas por cuenta, términos de pago neto, soporte para pedidos de compra y un storefront mayorista separado. Disponible solo en Plus. Si gestionáis un negocio B2B o híbrido DTC/wholesale, esta es la base adecuada.
• Límites de API más altos. El bucket de la REST Admin API es mayor en Plus, lo que importa cuando sincronizáis miles de pedidos al día con un ERP o ejecutáis actualizaciones de productos en lote.
• Launchpad. Programad flash sales, cambios de precio y publicaciones de tema con antelación con rollback automático. Útil para campañas estacionales y lanzamientos de productos.

Lo que Plus no cambia: el modelo de catálogo de productos subyacente, la GraphQL Storefront API, la infraestructura CDN para la entrega del storefront, o los fundamentos SEO. Si la única razón por la que estais considerando Plus es el rendimiento o el SEO, la respuesta probablemente es no.

Headless y Hydrogen

Una configuración headless de Shopify desacopla el storefront de la capa de renderizado de Shopify. El storefront se construye en un framework separado, normalmente React o Next.js, y se comunica con Shopify exclusivamente a través de la Storefront API o la GraphQL Admin API. Hydrogen es el propio framework React de Shopify para este patrón, construido sobre Remix.

Cuándo tiene sentido ir headless: necesitáis una experiencia de storefront que Liquid genuinamente no puede ofrecer, como un configurador de productos muy interactivo, un modelo de navegación tipo app nativa, o un storefront que forma parte de una aplicación web más grande con su propia autenticación y capa de datos. También necesitáis un equipo con la capacidad frontend para mantenerlo, porque un Shopify headless es un sistema significativamente más complejo de operar que un tema Liquid.

Cuándo headless no tiene sentido: en prácticamente cualquier otra situación. Perdéis el checkout hospedado (y su historial de conversión), el editor visual de temas y gran parte del ecosistema de apps de Shopify. Os haceis cargo de infraestructura de servidor, pipelines de deployment y complejidad de caché que la CDN de Shopify gestiona por vosotros en una tienda Liquid. La mayoría de las tiendas que fueron headless entre 2020 y 2022 porque estaba de moda han pasado los años siguientes manteniendo infraestructura que un tema Liquid bien construido no habría requerido.

Migraciones desde WooCommerce o Magento

Las migraciones de plataforma son donde se acumula más riesgo porque hay muchas cosas que hacer correctamente en secuencia, y un error en cualquiera de ellas, ya sea el mapa de redirects, la exportación de datos de clientes o los metadatos SEO, aparece en ingresos o posicionamiento semanas después de la fecha de go-live cuando es más difícil rastrear la causa.

Pipeline de migración: de la plataforma legada a Shopify

Los elementos que hacen que las migraciones fallen:

• Cobertura de redirects. Cada URL de la plataforma antigua que Google ha indexado necesita un 301 hacia su equivalente en Shopify. Perded una URL y la autoridad de posicionamiento de esa página desaparece. Exportamos el conjunto completo de URLs desde Search Console y el sitemap de la plataforma y los mapeamos todos antes de escribir un solo redirect.
• Portabilidad de contraseñas de clientes. WooCommerce almacena las contraseñas en un formato hash que Shopify no entiende. Los clientes no pueden iniciar sesión después de la migración y deben restablecer su contraseña. No es un bug pero requiere un plan de comunicación, y debe ocurrir en un plazo que no deje a los clientes bloqueados durante un fin de semana.
• Acceso al historial de pedidos. Shopify no importa los pedidos históricos a su sistema de gestión de pedidos nativo. Gestionamos esto como una estructura de metafield personalizada en el registro del cliente para que el equipo de soporte pueda acceder al historial sin salir del admin, manteniendo el sistema de pedidos nativo limpio.
• Plugins personalizados de WooCommerce. Cualquier funcionalidad de plugin personalizado que se ejecuta en el servidor en WooCommerce, ya sea una regla de precios personalizada, un modelo de suscripción o una calculadora de envío a medida, debe reconstruirse en Shopify. Mapeamos cada plugin hacia un equivalente de Shopify, una app de terceros o una app personalizada de Shopify que replica la lógica.
• Conjuntos de atributos y productos configurables de Magento. El modelo de producto de Magento es significativamente más complejo que el de Shopify. Los productos configurables se mapean a variantes de Shopify, pero Magento soporta más de tres ejes de variantes y Shopify no. Normalizamos el catálogo antes de la migración, no después, porque corregir un catálogo de 20.000 SKUs post-migración es costoso.

Apps personalizadas y la API

La Shopify Admin API está disponible tanto en REST como en GraphQL. La versión GraphQL es el estándar actual: soporta operaciones bulk, tiene límites más altos medidos en coste de consulta en lugar de en conteo de solicitudes, y es necesaria para varias funcionalidades más recientes. Escribimos nuevas apps personalizadas contra GraphQL y migramos el código existente basado solo en REST cuando los límites de velocidad o el acceso a funcionalidades lo hacen necesario.

Las apps personalizadas son la herramienta adecuada cuando un flujo de trabajo requerido no puede ser atendido por una app existente en el App Store de Shopify, cuando el modelo de datos necesita ir más allá de lo que expone la configuración del admin, o cuando una integración existente no es fiable y necesita reemplazarse por algo construido específicamente para esa tienda concreta.

Casos frecuentes que gestionamos:

• Herramientas de actualización masiva de productos que se ejecutan en un cron y sincronizan un catálogo de proveedores con Shopify a escala, con lógica de mapeo de campos y resolución de conflictos
• Enrutamiento de fulfillment personalizado que lee los atributos del pedido y envía a diferentes endpoints de 3PL según el tipo de producto, el destino o la ubicación de stock
• Apps de reporting que extraen datos de pedidos, clientes e inventario y los envían a un data warehouse o herramienta BI según una planificación definida
• Gestión de suscripciones para tiendas en Shopify que necesitan lógica de facturación personalizada más allá de las capacidades estándar de las apps de suscripción

Checkout extensions y conversión

El checkout de Shopify es la parte con mayor tasa de conversión de la mayoría de las tiendas y la más difícil de modificar. Con buen motivo: Shopify lo controla para mantener el cumplimiento PCI y la línea base de rendimiento que hace que sus tasas de conversión agregadas sean lo que son. En Shopify Plus, las checkout extensions son la forma admitida de añadir funcionalidad sin romper ninguna de las dos.

Lo que pueden hacer las checkout extensions:

• Mostrar upsells o cross-sells de productos entre el carrito y la confirmación del pedido, con la adición al carrito gestionada inline sin recargar el checkout
• Capturar campos personalizados, como mensajes de regalo, instrucciones de entrega o números de registro empresarial, que se envían a metafields del pedido para el fulfillment posterior
• Ejecutar la validación de dirección contra una API externa durante el checkout para detectar direcciones de envío inválidas antes de que se realice el pedido
• Mostrar el saldo de puntos de fidelización y permitir su canje durante el checkout sin abandonar el flujo
• Aplicar lógica de descuento personalizada basada en etiquetas de cliente, contenido del carrito o respuestas de API externas

Embudo de conversión del checkout: dónde pierden típicamente pedidos las tiendas DTC

El trabajo de conversión que mueve el marcador de forma consistente: mostrar el coste de envío y la fecha de entrega estimada antes de iniciar el checkout (elimina la sorpresa de precio que impulsa el primer drop), reducir los campos obligatorios en el formulario de dirección, asegurarse de que la selección de métodos de pago cubre los que vuestro público usa realmente (Klarna o Afterpay para moda, PayPal para demógraficos de mayor edad, Apple Pay para móvil) y añadir señales de confianza en el momento en que se introduce el pago, no solo en la página de producto.

Integraciones ERP, CRM y marketing

La pregunta no es si integrar Shopify con el resto del negocio. Es cuándo y cómo. La sincronización manual mediante exportación CSV deja de ser viable en algún momento alrededor de los 50 a 100 pedidos al día, y el coste de la tasa de error de una exportación obsoleta se acumula más rápido de lo que la mayoría de los operadores se da cuenta.

Topología de integración de Shopify: una marca mid-market

Las integraciones que desarrollamos con más frecuencia:

• Sync ERP. Pedidos de Shopify escritos en el ERP al realizarse, con niveles de stock y estado de fulfillment escritos de vuelta. El sync funciona con webhooks de Shopify (casi en tiempo real) con un trabajo de reconciliación que captura cualquier evento perdido. Usamos la GraphQL Admin API de Shopify en el lado de Shopify y la API REST o SOAP del ERP de destino en el otro.
• Sync CRM. Registros de clientes creados o actualizados en el primer pedido, con el historial de pedidos adjunto como actividad CRM. Soporta HubSpot, Salesforce, Zoho CRM y cualquier sistema con una API REST. Decidimos la estrategia de merge antes de escribir una línea de código, porque fusionar registros de clientes duplicados a posteriori es costoso.
• Fulfillment y 3PL. Órdenes de compra y listas de picking enviadas al 3PL al realizarse el pedido, con números de seguimiento escritos de vuelta a Shopify y correos de notificación al cliente activados. Mapeamos el formato de la URL de seguimiento de cada transportista para que el cliente reciba un enlace funcional, no un número de tracking en bruto.
• Sync plataforma de marketing. Segmentos de clientes y eventos de compra enviados a Klaviyo, Mailchimp o un ESP personalizado para flujos de carrito abandonado, secuencias post-compra y campañas de win-back. Enviamos los eventos que la plataforma necesita sin enviar PII que la plataforma no necesita.
• Finanzas e informes de ingresos. Resúmenes de ingresos diarios, registros de reembolso y datos de pasivo fiscal enviados a Xero, QuickBooks o un data warehouse. Reconciliamos con los pagos de Shopify Payments para que los números cuadren con la cuenta bancaria.

Rendimiento y Core Web Vitals

Una tienda Shopify con un Largest Contentful Paint superior a 4 segundos en móvil está perdiendo ingresos reales. El número más citado en el sector es que una mejora de un segundo en el tiempo de carga en móvil se correlaciona con un incremento del 8 al 10 por ciento en la tasa de conversión. La dirección es fiable aunque la cifra exacta varía según la tienda y la categoría.

Los problemas más comunes en los temas de Shopify:

• Imágenes hero sin optimizar. Un JPEG de 4 MB como primera imagen above-the-fold es el problema LCP más frecuente que vemos. Corrección: convertir a WebP o AVIF, añadir atributos width y height, y usar fetchpriority="high" en el elemento LCP. La CDN de Shopify gestiona la entrega; el formato y los atributos son responsabilidad del desarrollador.
• Scripts de terceros cargados de forma síncrona. Widgets de chat, herramientas de personalización y apps de reseñas que se inyectan en el bloque head bloquean el hilo principal. Cada script de terceros debería cargarse con async o defer. Los scripts que no se usan activamente en todas las páginas no deberían cargarse en todas las páginas.
• Carga de fuentes que bloquea el renderizado. Cargar una fuente personalizada con un elemento link estándar bloquea el renderizado hasta que la fuente se descarga. Usad font-display: swap y preconnect al host de la fuente. Para Google Fonts en concreto, alojad las fuentes localmente mediante un paso de build para evitar la consulta DNS adicional.
• Exceso de apps. Cada app de Shopify instalada que inyecta JavaScript añade peso a la página. Auditamos el stack de apps en cada proyecto e identificamos apps cuya funcionalidad está duplicada en otro lugar o no se usa en producción. Cada app redundante eliminada es una mejora de rendimiento medible.

B2B y wholesale en Shopify Plus

El conjunto de funcionalidades B2B en Shopify, disponible en Plus, es suficientemente maduro para la mayoría de los casos de uso de wholesale mid-market. La arquitectura se basa en registros de empresa, que contienen uno o más contactos y una o más ubicaciones, cada una con su propia dirección de envío y lista de precios asignada. Los pedidos realizados a través del canal B2B llevan la asociación empresarial y los términos de pago neto hasta el fulfillment sin código personalizado.

Lo que el canal B2B nativo gestiona bien: listas de precios personalizadas por empresa (precios fijos o descuentos porcentuales sobre el precio base), números de orden de compra en pedidos, términos de pago neto con seguimiento de fechas de vencimiento en el admin y una URL de storefront separada con protección por contraseña por empresa o acceso abierto con precios bloqueados por cuenta.

Lo que todavía requiere desarrollo personalizado: reglas de precios escalonadas complejas que dependen del total del carrito o del mix de SKUs, integración de los pedidos B2B de Shopify con un ERP que gestiona el crédito comercial de forma diferente al crédito minorista, y flujos de aprobación avanzados donde el pedido de un comprador requiere la firma de un gestor antes de entrar en fulfillment. Estos son resolubles con apps personalizadas y automatizaciones Flow pero no son nativos.

Lo que no funciona

Una lista breve de cosas que no recomendaremos, porque tienden a malgastar dinero:

• Ir headless solo por el rendimiento. Un tema Liquid bien optimizado en la CDN de Shopify es más rápido que la mayoría de las aplicaciones React en producción. Si el argumento para headless es el rendimiento, casi con certeza no está justificado. Construid primero bien el tema Liquid.
• Instalar cada app disponible. Cada app instalada que ejecuta JavaScript en el storefront añade sobrecarga. Un stack de apps que parece razonable durante la configuración puede acumularse hasta 800 a 900 kilobytes de JavaScript cuando la tienda está madura. Revisad el stack de apps cada seis meses y eliminad todo lo que no se use.
• Integraciones basadas en CSV a cualquier volumen de pedidos significativo. Una exportación CSV más importación manual es un único punto de fallo que escala con el volumen de pedidos. Debería reemplazarse por una integración API antes de que se convierta en un riesgo operativo diario, no después del primer incidente de pérdida de datos.
• Migrar a Shopify Plus antes de necesitarlo. Plus cuesta aproximadamente cuatro veces más que Advanced Shopify mensualmente. Las checkout extensions, Flow y las funcionalidades B2B que justifican el coste son específicas. Si no estáis usando ninguna de ellas, estáis pagando por infraestructura que no necesitáis. Os lo diremos si estáis en esta situación.
• Temas personalizados construidos sin OS 2.0. Un tema personalizado construido antes de 2022 sin la arquitectura de secciones y bloques necesitará reconstruirse la próxima vez que hagais una actualización significativa de la tienda. La reconstrucción es más barata cuando se planifica que cuando la fuerza una fecha límite.

Preguntas frecuentes

---

Ese es el cuadro completo. Cuando queréis que se aplique a vuestra tienda, el próximo paso es una auditoría gratuita: hallazgos específicos sobre vuestra configuración real, en aproximadamente 48 horas, sin compromiso.

Solicita una auditoría Shopify gratuita