Desarrollador Shopify - tiendas, headless e integraciones que aguantan picos

#Desarrollo Shopify para tiendas en España

Shopify te ahorra el servidor, pero no ordena por sí solo el catálogo, el IVA ni la logística. Mi trabajo es que el tema Liquid se pueda mantener, que los webhooks no dupliquen pedidos en el ERP y que el checkout siga funcionando cuando marketing añade otro píxel.

En España la tienda online suele convivir con marketplaces y con tienda física. Shopify funciona bien cuando contabilidad y almacén ven los mismos precios, tipos de IVA y plazos que el cliente en el checkout. Si además necesitas mucho contenido editorial, puede tener más sentido conectar WordPress como CMS que duplicar el catálogo en dos bases sin sincronización.

#Qué decidir antes de montar la tienda

Empiezo por los mercados, los transportistas, la política de devoluciones y la facturación. Shopify Markets solo ayuda si los datos que muestra el checkout son los mismos que usa contabilidad.

En pagos, Shopify Payments está disponible en España. Bizum, Redsys u otros métodos llegan a través de proveedores y apps compatibles con tu configuración; cuál conviene es una decisión de negocio que tomas tú con tu banco o pasarela. Lo que sí hago es no acumular apps de pago que compiten por el mismo checkout y probar reembolsos parciales antes de una campaña.

Con los scripts de marketing hago inventario: qué etiqueta es de quién, para qué sirve y cuánto empeora el INP; la etiqueta que nadie reclama se elimina.

#Qué hace un desarrollador Shopify

• Metacampos y metaobjetos para fichas técnicas, tallas y compatibilidades, con importaciones CSV validadas.
• Secciones Online Store 2.0 que el equipo de contenido ajusta sin tocar las plantillas que deciden el LCP.
• Storefront API con paginación por cursor para colecciones grandes.
• Admin API y fulfillment cuando hay varios almacenes, por ejemplo península y Canarias con reglas de envío distintas.
• Revisión de apps para quitar solapamientos entre reseñas, upsell y puntos.

#Liquid y migración a Online Store 2.0

Online Store 2.0 cambia las plantillas por JSON con secciones. Muchas tiendas siguen en temas antiguos porque migrar obliga a reubicar contenido y ajustes. Lo hago como una refactorización: uno snippets duplicados, quito consultas de colección dentro de bucles y doy proporciones fijas a las imágenes para evitar CLS. En el carrito lateral cuido el foco del teclado y los mensajes de stock para lectores de pantalla.

#Ejemplos de código Liquid, GraphQL y webhooks para Shopify

#Esquema de sección (Online Store 2.0)

{% schema %}
{
  "name": "Featured collection",
  "tag": "section",
  "class": "section-featured-collection",
  "settings": [
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 12,
      "step": 1,
      "default": 4,
      "label": "Products to show"
    }
  ],
  "presets": [{ "name": "Featured collection" }]
}
{% endschema %}

#Consulta Storefront API con paginación por cursor

Variables: handle (colección), first (tamaño de página), after (cursor).

query CollectionProducts($handle: String!, $first: Int!, $after: String) {
  collection(handle: $handle) {
    id
    title
    products(first: $first, after: $after) {
      pageInfo {
        hasNextPage
        endCursor
      }
      edges {
        cursor
        node {
          id
          handle
          title
        }
      }
    }
  }
}

#Cómo procesar webhooks de Shopify sin duplicados

Shopify puede entregar el mismo webhook más de una vez. Según su documentación, se deduplica por X-Shopify-Webhook-Id. La respuesta debe llegar en cinco segundos, así que el receptor solo encola.

// Pseudocódigo: receptor estilo Node con caché de deduplicación breve
async function handleOrderCreate(payload, headers) {
  const webhookId = headers["x-shopify-webhook-id"];
  const orderId = payload?.id?.toString();
  if (!webhookId || !orderId) return { status: 400 };

  const dedupeKey = `orders/create:${webhookId}`;
  if (await cache.has(dedupeKey)) {
    return { status: 200, body: "duplicate ignored" };
  }

  await enqueueErpExport(orderId);
  await cache.set(dedupeKey, "1", { ttlSeconds: 86400 });
  return { status: 200 };
}

#Bucle Liquid acotado para la rejilla de producto

Un limit fijo y anchos explícitos en image_url evitan bucles caros y descargas de imagen excesivas en el móvil.

{% assign cap = section.settings.products_to_show | default: 8 %}
{% assign collection = section.settings.collection %}
<ul class="product-grid" role="list">
  {% for product in collection.products limit: cap %}
    <li>
      <a href="{{ product.url }}">
        {{
          product.featured_image
          | image_url: width: 640
          | image_tag: loading: 'lazy', widths: '320,640,960'
        }}
      </a>
    </li>
  {% endfor %}
</ul>

#Cómo añadir productos al carrito con Storefront API

Si quieres que el token no viaje en el bundle del navegador, lanza la mutación desde el servidor: una ruta propia, un worker o una action de React Router en Hydrogen.

mutation cartLinesAdd($cartId: ID!, $lines: [CartLineInput!]!) {
  cartLinesAdd(cartId: $cartId, lines: $lines) {
    cart {
      id
      totalQuantity
    }
    userErrors {
      field
      message
    }
  }
}

Variables de ejemplo:

{
  "cartId": "gid://shopify/Cart/YOUR_CART_ID",
  "lines": [
    {
      "merchandiseId": "gid://shopify/ProductVariant/YOUR_VARIANT_ID",
      "quantity": 1
    }
  ]
}

#Hydrogen, Storefront API y Oxygen

La Storefront API da acceso por GraphQL al catálogo y al carrito, para que un frontend propio pinte colecciones y gestione el carrito sin Liquid. Hydrogen es el stack de Shopify para eso: su plantilla usa React Router 7 en modo framework y se despliega en Oxygen, el alojamiento de Shopify. Si tu equipo ya trabaja con Next.js o Astro, puede llamar a la Storefront API directamente y quedarse con su sistema de diseño.

Headless no es más rápido por definición. Un bundle de React con diez trackers pierde frente a un buen tema Liquid. Comparo el LCP en las mismas URLs de colección, el peso del JavaScript, el coste de alojamiento y cómo previsualiza los cambios quien no programa. Si el tema optimizado basta, me quedo en Liquid.

#Integración de Shopify con ERP mediante webhooks y colas

Pedidos y stock necesitan receptores idempotentes. Shopify reintenta un webhook fallido 8 veces durante 4 horas y, si una suscripción creada por Admin API falla 8 veces seguidas, la elimina. Una cola con registro de errores evita que una caída del ERP se convierta en descuadres de stock que nadie ve hasta el siguiente inventario. Si vendes en tienda física y online, los ajustes de stock se programan para no chocar con las horas punta de caja.

Si vienes de WooCommerce, se puede migrar por partes: primero catálogo y pagos en Shopify, y el checkout antiguo se apaga cuando los webhooks llevan un tiempo estables.

#Rendimiento y Core Web Vitals en Shopify

La CDN de Shopify ayuda, pero el tema y las etiquetas deciden el INP y el CLS. Mido cada plantilla, aplazo el JavaScript que no hace falta al cargar y cargo las fuentes de forma que no muevan el contenido. Te entrego el antes y el después medidos con el mismo perfil de prueba.

#Venta B2B e internacional

Las funciones B2B de Shopify (empresas cliente, catálogos, condiciones de pago) están en los planes Basic, Grow, Advanced y Plus, con alcance distinto según el plan; en Starter y Retail no. Con Markets configuro monedas y textos de envío para que el total sea el mismo antes y después del pago. Aranceles y fiscalidad de envíos fuera de la UE los decides con tu asesor; el código aplica las reglas acordadas.

#Stack técnico para desarrollo Shopify

El tema vive en Git con integración continua y los secretos quedan fuera de Liquid. Documento las integraciones para que tu equipo de sistemas pueda mantenerlas sin depender de mí.

#Integraciones de Shopify con pagos, logística y ERP

Si estás creando una app de Shopify y necesitas ayuda con su ficha en la App Store, la medición del onboarding y el seguimiento posterior, eso es ingeniería go-to-market.

#Cómo empezar un proyecto Shopify

Envíame por el formulario de contacto la URL de la tienda, tu plan de Shopify, la lista de apps e integraciones y las fechas de campaña. Te respondo por escrito con preguntas y, cuando el alcance esté claro, con un presupuesto y los supuestos en los que se basa.