Desenvolvedor Shopify - lojas, headless e integrações à prova de pico de tráfego

#Desenvolvedor Shopify para lojas portuguesas

A Shopify trata do alojamento e do checkout, mas não modela por si o catálogo, o IVA e a logística da sua loja. O meu trabalho é manter o Liquid legível, os webhooks idempotentes e o checkout estável quando o marketing acrescenta mais um pixel.

Uma loja portuguesa tem particularidades concretas. O IVA tem taxas diferentes no continente, na Madeira e nos Açores, e os envios para as ilhas têm prazos e custos próprios. Os clientes esperam MB WAY e referências Multibanco ao lado do cartão; a Shopify Payments está disponível em Portugal, e os métodos que a sua conta oferece confirmam-se no painel antes de prometer seja o que for no checkout. Se precisar de conteúdo editorial longo, um WordPress ao lado da loja pode servir, desde que o catálogo continue a ter uma só fonte.

#O que planear antes de criar uma loja Shopify

Começo pelos mercados, transportadoras, política de devoluções e requisitos de faturação. O Shopify Markets só ajuda se a contabilidade concordar com os preços, o IVA e os portes que o cliente vê. Lógica de ERP metida em ficheiros de tema acaba sempre por partir numa atualização.

As apps de marketing são o segundo ponto. Pixels, testes A/B, widgets de avaliações e programas de pontos somam JavaScript que compete pelo thread principal. Faço um inventário com o objetivo de cada script e o efeito medido no INP antes e depois de o remover.

O trabalho típico:

• metacampos e metaobjetos para fichas técnicas, compatibilidades e rotulagem;
• secções OS2 que o merchandising ajusta sem estragar o LCP das coleções;
• consultas à Storefront API que aguentam picos de tráfego;
• integrações pela Admin API com armazém, ERP e transportadoras;
• limpeza de apps que se sobrepõem.

{% 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 %}

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

#Shopify headless com Storefront API, Hydrogen e Oxygen

A Storefront API serve catálogo e carrinho por GraphQL a um frontend próprio. O Hydrogen é o framework da Shopify para isso: o modelo atual usa React Router 7 em modo framework e é publicado no Oxygen, o alojamento da Shopify. Não é obrigatório. Uma equipa com Next.js ou Astro pode chamar a Storefront API diretamente.

Headless não é rápido por definição: um bundle React com dez trackers perde para um bom tema Liquid. Comparo LCP nas mesmas URLs, peso do JavaScript, custo de alojamento e a pré-visualização para quem edita conteúdos. Se o tema otimizado ganhar, fico pelo tema.

#Consulta Storefront API com paginação por cursor

Variáveis: handle (coleção), first (tamanho da 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
        }
      }
    }
  }
}

#Como adicionar produtos ao carrinho com a Storefront API

Quando o modelo de risco o exige, chamo as mutações a partir de uma rota de servidor ou de uma action do React Router no Hydrogen, para o token não ficar exposto em bundles do browser.

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

Variáveis de exemplo:

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

#Como personalizar o checkout da Shopify

O checkout da Shopify não aceita JavaScript arbitrário do comerciante, o que protege pagamentos e clientes. Descontos, portes e métodos de pagamento personalizam-se com Shopify Functions; a interface, com checkout UI extensions. Segundo a documentação da Shopify, as extensões nos passos de informação, envio e pagamento só estão disponíveis no Shopify Plus, e uma app personalizada com Functions também exige Plus. Uma app pública da App Store com Functions funciona em qualquer plano. Antes de propor uma regra, confirmo o que o plano da sua loja permite.

// Pseudocódigo: worker Node com cache de deduplicação de curta duração
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 };
}

#Desempenho e Core Web Vitals

A CDN da Shopify ajuda, mas o tema e as tags decidem o INP e o CLS. Defino limites por tipo de página, adio JavaScript não crítico e trato as fontes para não provocarem saltos de layout. Não prometo aumentos de conversão; entrego medições antes e depois com o mesmo perfil de teste.

#Venda B2B e internacional

As funcionalidades B2B da Shopify (empresas, catálogos, condições de pagamento) existem nos planos Basic, Grow, Advanced e Plus, com diferenças por plano, segundo a ajuda da Shopify. Configuro empresas e listas de preços para não duplicar trabalho entre o CRM e o Admin. Na venda para outros países da UE, o Markets mostra moedas e portes; as regras de IVA e devoluções decide-as o seu contabilista, e a loja apenas as reflete.

#Migração para a Shopify sem perder SEO

Inventario cada URL antigo e mapeio-o com um redirecionamento 301. Os atributos técnicos passam para metacampos, para os filtros das coleções continuarem a funcionar. Os dados estruturados de produto ficam iguais à oferta real, e acompanho o Search Console depois do lançamento.

#Stack técnica para desenvolvimento Shopify

O código do tema vive num repositório Git com CI, os segredos ficam fora do Liquid e as integrações são documentadas para que a sua equipa de TI as possa manter sem mim.

Se está a criar uma app Shopify e precisa de ajuda com a ficha na App Store, a medição do onboarding e o acompanhamento posterior, isso é engenharia go-to-market.