Adapter nativo

Provador virtual para Shopify

Dois passos: uma linha no theme.liquid e um Custom Pixel em Eventos de cliente. O mK Fashion+ tem módulo dedicado à Shopify que resolve a variante certa por cor e tamanho, adiciona pela API de carrinho da loja e atualiza a sacola do próprio tema. Sem app na loja.

Instalação
Tag + Custom Pixel
Dificuldade
Baixa
Integração
Adapter nativo
  • Catálogo sincronizado pelo app, sem cadastro manual de produto
  • Uma linha no theme.liquid, em todas as páginas da loja
  • Custom Pixel captura a compra no checkout, onde o tema não roda
  • Variante resolvida por cor e tamanho, não pelo produto
  • Sacola do tema atualizada no lugar, sem recarregar a página

Uma tag, em todas as páginas

No theme.liquid, antes do fechamento do <head> (Loja virtual > Temas > Editar código).

<script src="https://unpkg.com/mk-sdk-git@1/dist/mk-sdk.js"
        data-mk-project="SEU_PROJECT_ID"
        data-mk-product="mk-fashion"
        async></script>

Troque SEU_PROJECT_ID pelo identificador do seu projeto. O atributo async garante que a tag não bloqueia o carregamento da página, e @1 fixa a major da versão: você recebe correção sem risco de um release novo mudar a loja sem aviso.

  1. Receba o seu projectId

    A metaKosmos cria o projeto e envia o identificador. Ele é o único valor que muda na tag, e não é segredo: vai no HTML público da loja.

  2. Conecte o catálogo pelo app

    A instalação do app da metaKosmos na loja autoriza a leitura do catálogo por OAuth e importa produtos, variantes, preços, imagens e categorias. O token é renovado sozinho e a loja avisa por webhook quando algo muda, então o catálogo acompanha a operação sem ninguém reimportar nada.

  3. Cole a tag no theme.liquid

    No admin: Loja virtual > Temas > ... > Editar código > theme.liquid. Cole antes do fechamento do <head>. Como o theme.liquid envolve todas as páginas do tema, a tag passa a valer na home, na categoria, na busca, no produto e no carrinho de uma vez.

  4. Instale o Custom Pixel

    Em Configurações > Eventos de cliente > Adicionar pixel personalizado, cole o arquivo que a metaKosmos gera para a sua loja, salve e clique em Conectar. É o que traz a receita: as páginas de checkout e de obrigado não são renderizadas pelo tema, então a tag do passo anterior não roda nelas.

  5. Publique num tema de teste primeiro

    Duplique o tema, aplique a alteração na cópia e use a pré-visualização. Abra uma PDP, troque de cor, abra o provador, escolha um tamanho e confirme o item certo na sacola antes de publicar.

  6. Faça um pedido de teste

    Com o pixel conectado, um pedido de teste confirma a captura de receita ponta a ponta. A agregação do painel roda de hora em hora, então o número aparece na hora seguinte, não na mesma.

Observações importantes

  • Fixe a major da versão (@1) em vez de @latest: você recebe correção sem risco de um release novo mudar a loja sem aviso.
  • Sem o Custom Pixel, a loja aparece com receita zero no painel mesmo com o provador funcionando na PDP. O provador continua funcionando; o que falta é a compra ser contada.
  • Não use "Scripts adicionais" para isso. A Shopify desligou scripts adicionais nas páginas de obrigado e de status do pedido em agosto de 2025 nas lojas Plus e em agosto de 2026 nas demais. Quem captura por ali hoje já não captura mais.
  • Na Shopify, a peça é identificada pela variante, não pelo produto: o mesmo produto em seis cores tem seis variantes. O cadastro na metaKosmos aceita o id da variante ou o SKU dela.
  • O SDK não precisa de Google Analytics, Tag Manager nem dataLayer, e não pede nenhum evento manual da loja.

O que o adapter de Shopify resolve

  • Catálogo por OAuth, com webhook

    O app instalado na loja autoriza a leitura do catálogo e mantém o token renovado sozinho. Produto novo, troca de preço e mudança de estoque chegam sem ninguém reimportar planilha.

  • A variante certa, não o produto

    O adapter lê a variante selecionada na ordem que a Shopify realmente atualiza: o parâmetro da URL, o metadado do tema e o campo do formulário de carrinho. O id do produto é último recurso, porque ele é igual em todas as cores e faria o provador mostrar sempre o mesmo modelo.

  • Guarda contra "complete o look"

    Tema com bloco de produtos sugeridos costuma escrever no metadado a variante de outro produto. O adapter confere se a variante pertence ao produto da página antes de aceitá-la, então o provador não gera a peça errada.

  • Carrinho pela API da loja

    A adição usa a rota oficial de carrinho da Shopify com o id da variante, casada por cor e tamanho contra os dados do próprio produto. Não é clique simulado em botão.

  • Sacola do tema atualizada no lugar

    Em temas da família Dawn, o adapter pede as seções da sacola na mesma resposta e manda o próprio tema re-renderizar, inclusive tirando o estado de sacola vazia. Sem isso o item entra no carrinho mas a gaveta continua mostrando vazio até recarregar.

  • Início de checkout de verdade

    Sem o pixel, o início de checkout é inferido por clique em botão, o que infla o número de pedidos com sessões que nunca compraram. O pixel assina o evento medido pela própria Shopify.

  • Receita sem dado pessoal

    O pixel envia valor, moeda, id do pedido e itens. E-mail, telefone, endereço e nome ficam de fora de propósito, e um reload da página de obrigado não conta a compra duas vezes.

Três peças: catálogo, loja e checkout

A Shopify é a plataforma onde a integração tem mais partes, e cada uma resolve um problema diferente.

O catálogo é servidor com servidor. O app instalado na loja autoriza a leitura por OAuth e importa produtos, variantes, preços, imagens e categorias, com o token renovado automaticamente e webhooks avisando o que mudou. É o que faz o provador saber que peça é aquela e com que grade.

A loja é a tag no theme.liquid, que roda no navegador do cliente final, injeta o botão na página de produto e adiciona ao carrinho.

O checkout é o Custom Pixel, porque nem o catálogo nem a tag alcançam a página de obrigado. Sem ele não há receita.

Por que a Shopify precisa de dois passos no storefront

A tag no tema cobre tudo que o tema renderiza: home, categoria, busca, página de produto e carrinho. É onde o provador aparece e onde a maior parte do funil é medida.

O checkout e a página de obrigado da Shopify não são renderizados pelo tema. Nenhum script do tema roda lá, e é exatamente lá que a compra acontece. Sem um segundo caminho, a loja fica com o provador funcionando e receita zero no painel, o que faz qualquer cálculo de retorno sobre o investimento parecer nulo.

Esse segundo caminho é o Custom Pixel, que a Shopify executa no contexto dela e entrega o pedido de forma estruturada: total, moeda, itens e identificador. É fonte melhor do que tentar ler a página de obrigado.

Por que não usar Scripts adicionais

O campo "Scripts adicionais" das páginas de obrigado e de status do pedido foi o caminho histórico para esse tipo de captura, e já não é.

A Shopify desativou esse campo em agosto de 2025 para lojas Plus e em agosto de 2026 para as demais. Integração que dependia dele parou de capturar sozinha, sem ninguém mexer em nada. O pixel é o caminho suportado.

Como o produto é identificado

Na Shopify, o que tem preço, estoque e SKU é a variante, não o produto. Uma calça em seis cores é um produto e seis variantes, cada uma com id e SKU próprios.

Por isso o adapter resolve sempre a variante selecionada, e só cai no id do produto quando nenhuma variante aparece na página. O catálogo do provador pode conhecer a peça pelo id da variante ou pelo SKU dela: a checagem de disponibilidade testa os dois e fica com o que existir, então o cadastro acompanha o jeito que a sua loja já nomeia as peças.

O que acontece ao adicionar ao carrinho

O cliente escolhe o tamanho dentro do provador. O adapter busca os dados do produto na própria loja, casa a variante por cor e tamanho e adiciona pela rota de carrinho da Shopify.

Em seguida, a sacola do tema é atualizada no lugar. Em temas da família Dawn isso é feito pelo próprio mecanismo do tema, o que também limpa o estado de sacola vazia. Quando o tema não tem gaveta detectável, o cliente é levado ao carrinho ao fechar o provador, nunca durante a avaliação.

Validação antes de publicar

O caminho de carrinho é validado em lojas Shopify em produção, incluindo tema da família Dawn com gaveta lateral.

Para conferir na sua loja antes de qualquer alteração, existe uma extensão de navegador que injeta o SDK em qualquer site e mostra a detecção de plataforma, a variante resolvida e o fluxo de carrinho. Dá para validar a integração inteira sem duplicar tema e sem instalar nada.

mK Fashion+ na Shopify

Preciso instalar um app na minha loja Shopify?

Não. São uma linha no theme.liquid e um Custom Pixel em Configurações > Eventos de cliente. Nenhum aplicativo é instalado na loja.

Por que preciso do Custom Pixel além da tag no tema?

Porque as páginas de checkout e de obrigado da Shopify não são renderizadas pelo tema, então nenhum script do tema roda nelas. Sem o pixel, o provador funciona na página de produto mas a compra não é contada, e a loja aparece com receita zero no painel.

Posso usar Scripts adicionais em vez do pixel?

Não. A Shopify desativou o campo de scripts adicionais nas páginas de obrigado e de status do pedido, em agosto de 2025 nas lojas Plus e em agosto de 2026 nas demais. Quem ainda depende dele já parou de capturar.

O provador mostra a peça certa quando o cliente troca de cor?

Sim. O adapter identifica a variante selecionada, não o produto. Como o id do produto é o mesmo em todas as cores, usá-lo mostraria sempre o mesmo modelo, e é justamente o que ele evita.

Como cadastro os produtos: por SKU ou por id da variante?

Pelos dois. A checagem de disponibilidade testa o id da variante e o SKU dela e fica com o que existir no catálogo, então o cadastro acompanha o jeito que a sua loja já nomeia as peças.

Preciso importar o catálogo na mão?

Não. O app instalado na loja autoriza a leitura do catálogo por OAuth e importa produtos, variantes, preços, imagens e categorias. O token é renovado sozinho e webhooks avisam quando algo muda.