Guia de Integração Shopify

Este guia explica como instalar o Kleep na sua loja Shopify. O Kleep oferece três recursos principais: um guia de tamanhos inteligente (Kleep Sizing), recomendações de produtos similares (Kleep Similar Products) e uma busca de produtos otimizada (Kleep Search).

Visão Geral do Processo de Integração

Veja o que esperar desde a assinatura do contrato até o lançamento e além. A integração completa geralmente leva cerca de 5 a 6 semanas.

Onboarding

Contrato assinado e faturamento configurado

Após a assinatura do contrato, seu representante Kleep inicia o faturamento via GoCardless: Configurar débito direto →.

Reunião de kickoff do onboarding

Uma breve chamada com seu representante Kleep para alinhar cronograma, contatos técnicos e quaisquer requisitos específicos da loja antes do início da instalação.

Preencher o formulário de onboarding

Após o kickoff, pediremos que você compartilhe alguns detalhes sobre sua empresa, faturamento, ambientes de loja e configuração de devoluções para que possamos preparar a integração.Preencha nosso formulário de onboarding →Leva cerca de 5 minutos. Após o envio, nossa equipe revisará suas respostas e confirmará os próximos passos em até 1 dia útil.

Compartilhar sua URL do Shopify e código de colaborador

Envie-nos o endereço da sua loja (ex.: your-store.myshopify.com) junto com seu código de solicitação de colaborador para que possamos solicitar acesso à sua loja.

Múltiplas lojas Shopify? Se você tem várias instâncias Shopify (ex.: regiões ou marcas diferentes), por favor envie-nos um código de colaborador para cada loja — precisamos de um código por loja.

Não sabe onde encontrar esses dados? No admin do Shopify, vá em Configurações → Usuários e permissões — sua URL myshopify.com é exibida no topo, e o Código de solicitação de colaborador está listado na seção Colaboradores. Consulte o artigo de ajuda do Shopify sobre contas de colaborador para mais detalhes.

Aceitar nossa solicitação de colaborador

Enviaremos uma solicitação de acesso de colaborador da nossa conta de Parceiro Shopify. Aprove-a em Configurações → Usuários e permissões → Colaboradores no seu admin Shopify.

Instalar o aplicativo Kleep em cada loja

Assim que tivermos acesso de colaborador, enviaremos um link de instalação do aplicativo para cada loja. Você precisará instalar o aplicativo Kleep separadamente em cada loja Shopify onde deseja ativar o Kleep.

Escolher o posicionamento do CTA

Revise as posições sugeridas para o botão “Encontrar meu tamanho” e escolha a que melhor se adapta à sua loja: Figma de posicionamento do CTA →.

Instalação e testes

Instalamos o Kleep em um tema duplicado

Nossa equipe duplica seu tema Shopify atual e instala o Kleep na cópia, para que sua loja ao vivo permaneça intocada durante os testes.

Prévia e feedback

Enviamos um link de prévia privado para você testar a integração de ponta a ponta e compartilhar feedback ou ajustes necessários.

Ir ao ar

Após sua aprovação, publicamos o Kleep no seu tema ao vivo.

Pós-integração

Acesso ao painel do cliente

Provisionamos credenciais para sua equipe acessar o Painel Kleep, onde você pode monitorar KPIs de desempenho do Kleep em tempo real.

Fit Feedback ativado

Ativamos o Fit Feedback no seu painel para que sua equipe possa refinar as recomendações de tamanho do Kleep usando dados reais de ajuste.

1. Funcionalidades

O Kleep é integrado à sua loja instalando um aplicativo personalizado criado previamente. Ele permite:

Adicionar nosso CTA “Encontrar meu tamanho” nas suas páginas de produto
Personalizar sua interface diretamente no Editor de Temas

Nosso aplicativo também cria fluxos automatizados de dados de Produtos, Pedidos e Devoluções para se manter atualizado. Esses dados são recuperados diariamente. Após a instalação, o aplicativo cria um WebPixel usado para rastrear múltiplas métricas das quais derivamos o ROI da solução.

2. Recurso de Produtos Similares

Produtos Similares sugere produtos alternativos quando um tamanho está fora de estoque. Esse recurso aumenta as conversões oferecendo alternativas relevantes aos clientes. Modos de Exibição Disponíveis

Modo	Descrição
Popup (auto)	Popup automático ao passar o mouse no tamanho (desktop) / botão (mobile)
Botão (auto)	Botão CTA automático próximo ao carrinho quando fora de estoque
Apenas botões personalizados	Você posiciona os botões manualmente pelo editor de temas
Popup + personalizado	Popup automático + botões personalizados adicionais
Botão + personalizado	Botão automático + botões personalizados adicionais

Configuração Passo 1: Escolher o Modo de Exibição Nas configurações do Kleep App Embed, encontre a opção “Mostrar produtos recomendados” e selecione o modo desejado no menu dropdown.

Seleção do Modo de Produtos Similares Adicionar Botões Personalizados (para modos com “personalizado”) Se você escolheu um modo com “personalizado”, pode adicionar botões em locais específicos:

Vá para o template de Página do produto no editor de temas
Na seção desejada, clique em Adicionar bloco
Clique na aba Apps e selecione “Kleep Similar Button”
Posicione o bloco onde desejar e salve

Adicionar Bloco Kleep Similar Button

Os botões de Produtos Similares aparecem apenas quando uma variante está fora de estoque. É normal não vê-los em todos os produtos.

Adicionar Múltiplos Botões Você pode adicionar qualquer número de botões de Produtos Similares na Página do Produto. Para permitir múltiplos botões, o widget deve ser configurado para um dos modos: custom_buttons, popup+custom ou button+custom. Para temas OS 2.0:

Vá em Loja Online → Personalizar
Abra o template de Página do produto
Clique em Adicionar bloco → Kleep Similar Button
Repita se desejar 2+ botões na página

Cada botão aparece automaticamente apenas quando a variante selecionada está fora de estoque.

3. Recurso de Busca Kleep

O Kleep Search substitui a busca nativa do Shopify por uma busca otimizada com filtros de tamanho e recomendações personalizadas. Passo 1: Ativar Custom Search Nas configurações do Kleep App Embed, ative a opção “Enable custom search”.

Ativar Custom Search Passo 2: Acessar o Template de Busca No editor de temas, clique no menu dropdown no topo (padrão “Página inicial”) e selecione “Search” na lista de templates.

Selecionar Template de Busca Passo 3: Ocultar a Busca Nativa Na seção Template, oculte ou remova o bloco nativo “Search results” clicando no ícone de olho.

Ocultar Busca Nativa Passo 4: Adicionar o Bloco Kleep Search Clique em Adicionar seção, depois na aba Apps, selecione “Search” (kleep-dev).

Adicionar Bloco Kleep Search Passo 5: Configurar Opções Clique no bloco Search que você adicionou para acessar as configurações: número de resultados, exibição em grade/lista, atraso de busca, etc.

Opções de Configuração de Busca

4. Integração de Devoluções (Opcional)

Se você usa uma plataforma de gerenciamento de devoluções, o Kleep pode integrar dados de devolução para melhorar as recomendações de tamanho. Provedores de Devolução Suportados

Global-e
Aftership
Fast Return
Return Go
Outros (entre em contato conosco)

Configuração

No Painel Kleep, vá em Configurações → Devoluções
Selecione seu provedor de devoluções
Siga as instruções específicas do provedor para conectar sua conta

Se o seu provedor não estiver listado, entre em contato em support@kleep.ai — podemos configurar uma integração personalizada via SFTP ou API.

5. Rastreamento de Eventos e Analytics

O Kleep rastreia automaticamente as interações do usuário para analytics. Certifique-se de que o rastreamento está funcionando corretamente antes do lançamento. Eventos Rastreados

Evento	Descrição
`kleep_button_click`	Usuário clicou no botão do guia de tamanhos
`kleep_drawer_open`	Drawer do guia de tamanhos aberto
`kleep_size_recommended`	Uma recomendação de tamanho foi exibida
`kleep_add_to_cart`	Usuário adicionou produto ao carrinho pelo Kleep
`kleep_similar_click`	Usuário clicou em um produto similar

Verificação Para verificar se os eventos estão sendo disparados corretamente:

Abra as Ferramentas de Desenvolvedor do seu navegador (F12)
Vá para a aba Network
Filtre por “kleep”
Interaja com o botão do guia de tamanhos
Você deve ver chamadas de API para cada evento

Antes do lançamento: Certifique-se de que pelo menos 5 eventos são acionados e que os payloads são válidos. Complete uma jornada de usuário completa (clique no botão → recomendação de tamanho → adicionar ao carrinho) para validar a integração.

6. Personalização CSS

Você pode personalizar a aparência dos elementos Kleep (botões, popups, busca) adicionando CSS personalizado. Onde Adicionar o CSS Nas configurações do Kleep App Embed, você encontrará um campo “Input custom CSS styles”. Cole seu CSS personalizado lá.

Campo de CSS Personalizado Exemplo de Personalização

Código

.kleep-button {
  all: unset;
  font-style: normal;
  font-size: 1.3rem;
  font-weight: 400;
  text-transform: none;
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  position: relative;
}

7. Múltiplos Ambientes

Se você tem múltiplos ambientes Shopify (dev, homologação, produção), precisa configurar o Kleep para cada um. Configuração para Cada Ambiente

Loja de produção — Loja principal, totalmente configurada
Lojas de homologação/dev — Para testes antes de enviar para produção

Para cada ambiente:

Instale o aplicativo Kleep
Ative o App Embed
Entre em contato com seu CSM do Kleep para vincular o ambiente à sua conta

Sempre teste as alterações em homologação antes de aplicar em produção.

URLs por Ambiente Forneça ao seu CSM do Kleep:

URL de produção: https://www.yourbrand.com
URL de homologação: https://staging.yourbrand.com (se aplicável)
URL de dev: https://dev.yourbrand.com (se aplicável)

7.5 Botão CTA e Produtos Similares — Guia de Instalação Completo

Para a referência técnica completa sobre instalação do botão CTA e do recurso de Produtos Similares do Kleep (incluindo todo o código Liquid, esquema de configurações e configuração de botão secundário), consulte o guia dedicado abaixo: Botão CTA e Produtos Similares — Guia de Instalação Completo

8. Temas Vintage - Configuração do Guia de Tamanhos

Temas vintage (também chamados de “legados” ou criados antes da Online Store 2.0) não suportam App Blocks. A instalação requer modificações no código Liquid.

Esta seção requer conhecimento de desenvolvimento Shopify (Liquid).

Pré-requisitos

Acesso ao editor de código do tema (Loja Online → Temas → Editar código)
O Kleep App Embed deve estar ativado no seu admin Shopify (Loja Online → Temas → Personalizar → App embeds → Kleep)

Passo 1: Ativar o App Embed No seu admin Shopify, vá em Loja Online → Temas → Personalizar → App embeds e ative o aplicativo Kleep. Passo 2: Chamar o Trecho Cole o código a seguir onde deseja que o Kleep apareça. Deve fazer parte do bloco Product info dentro da pasta snippets:

Código

{% render 'kleep-button', cms: section.settings %}

Passo 3: Criar o Trecho do Botão Crie um novo arquivo chamado kleep-button.liquid dentro da pasta snippets. Coloque o seguinte conteúdo:

Código

<button
  type="button"
  style="display: none;{% if cms.font_family and cms.default_font_family == false %}font-family: '{{ cms.font_family }}' ;{% endif %}font-style: {{ cms.text_style }}; font-size: {{ cms.text_size }}px; font-weight: {{ cms.text_weight }}; text-transform: {{ cms.text_transform }}; color: {{ cms.text_color }}; background-color: {{ cms.bg_color }}; padding: {{ cms.padding_t }}px {{ cms.padding_r }}px {{ cms.padding_b }}px {{ cms.padding_l }}px;{% if cms.center %} margin: {{ cms.margin_y }}px auto;{% else %} margin: {{ cms.margin_y }}px {{ cms.margin_x }}px;{% endif %}; border: {{ cms.border_color }} {{ cms.border_width }}px solid; border-radius: {{ cms.border_radius }}px;"
  class="kleep-button"
  id="kleep-size-button"
  data-product-id="{{ product.id }}"
>
  <span class="kleep-wrapper-content">
    {% if cms.text_underline %}
      <span
        style="position: absolute; width: calc(100% + 2px); height: 1px; bottom: -{{ cms.text_underline_offset }}px; left: 0; background-color: {{ cms.text_color }};"
      ></span>
    {% endif %}

    {% if cms.image_url != blank %}
      <img
        height="{{ cms.image_size }}"
        width="{{ cms.image_size }}"
        src="{{ cms.image_url }}"
        loading="lazy"
        alt="Kleep button image"
      >
    {% endif %}

    <span class="kleep-btn-text">
      <span class="kleep-default">
        {% if cms.custom_button_text_toggle %}
          {{ cms.custom_find_size_text }}
        {% else %}
          {{ 'blocks.button.text.without_hash' | t }}
        {% endif %}
      </span>
      <span style="display: none;" class="kleep-custom">
        {% if cms.custom_button_text_toggle %}
          {{ cms.custom_recommended_size_text }}{% if localization.language.iso_code == "fr" %}&nbsp;{% endif %}<span class="kleep-colon">:</span>
        {% else %}
          {{ 'blocks.button.text.with_hash' | t }}{% if localization.language.iso_code == "fr" %}&nbsp;{% endif %}<span class="kleep-colon">:</span>
        {% endif %}
        <span class="kleep-custom-res"></span>
      </span>
    </span>
  </span>

  <span
    style="display: none; color: {{ cms.text_color }}; border-top-color: {{ cms.text_color }};"
    class="kleep-spinner"
    id="size-spinner"
  ></span>
</button>

Passo 4: Adicionar Esquema de Configurações Adicione as seguintes opções ao seu esquema de configurações no final do arquivo de seção:

Código

{
  "type": "header",
  "content": "Button text",
      "info": "If you enable this feature, the button text you enter will be replaced for all languages in your store"
    },
    {
      "type": "checkbox",
      "default": false,
      "id": "custom_button_text_toggle",
      "label": "Enable custom button text"
    },
    {
      "type": "text",
      "id": "custom_find_size_text",
      "label": "Find my best size text",
      "info": "What text will display instead of\"Find my best size\"?"
    },
    {
      "type": "text",
      "id": "custom_recommended_size_text",
      "label": "Recommended size text",
      "info": "What text will display instead of\"Recommended size\"?"
    },
    {
      "type": "header",
      "content": "Image"
    },
    {
      "type": "url",
      "id": "image_url",
      "label": "Url Image"
    },
    {
      "type": "range",
      "id": "image_size",
      "min": 0,
      "max": 80,
      "step": 2,
      "unit": "px",
      "label": "Image size (square)",
      "default": 20
    },
    {
      "type": "header",
      "content": "CSS Styles"
    },
    {
      "type": "checkbox",
      "default": true,
      "id": "default_font_family",
      "label": "Theme font",
      "info": "If checked, the css variable `--font-body-family` is used"
    },
    {
      "type": "font_picker",
      "id": "font_family",
      "label": "Font Family",
      "default": "helvetica_n4"
    },
    {
      "type": "select",
      "id": "text_style",
      "label": "Text style",
      "default": "normal",
      "options": [
        { "label": "Normal", "value": "normal" },
        { "label": "Italic", "value": "italic" },
        { "label": "Oblique", "value": "oblique" }
      ]
    },
    {
      "type": "select",
      "id": "text_transform",
      "label": "Text transformation",
      "default": "none",
      "options": [
        { "label": "Normal", "value": "none" },
        { "label": "Capitalize", "value": "capitalize" },
        { "label": "Uppercase", "value": "uppercase" },
        { "label": "Lowercase", "value": "lowercase" }
      ]
    },
    {
      "type": "select",
      "id": "text_weight",
      "label": "Text weight",
      "default": "400",
      "options": [
        { "label": "100", "value": "100" },
        { "label": "200", "value": "200" },
        { "label": "300", "value": "300" },
        { "label": "400", "value": "400" },
        { "label": "500", "value": "500" },
        { "label": "600", "value": "600" },
        { "label": "700", "value": "700" },
        { "label": "800", "value": "800" },
        { "label": "900", "value": "900" }
      ]
    },
    {
      "type": "range",
      "id": "text_size",
      "min": 2,
      "max": 50,
      "step": 2,
      "unit": "px",
      "label": "Font size",
      "default": 16
    },
    {
      "type": "checkbox",
      "id": "text_underline",
      "label": "Text underline",
      "default": false
    },
    {
      "type": "range",
      "id": "text_underline_offset",
      "min": 1,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Underline offset",
      "default": 2
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Button text color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Border color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "border_width",
      "min": 0,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Border width",
      "default": 0
    },
    {
      "type": "header",
      "content": "Spacing"
    },
    {
      "type": "checkbox",
      "id": "center",
      "label": "Center the button",
      "default": false,
      "info": "This will override 'Horizontal margin'"
    },
    {
      "type": "range",
      "id": "margin_y",
      "min": 0,
      "max": 80,
      "step": 2,
      "unit": "px",
      "label": "Vertical margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "margin_x",
      "min": 0,
      "max": 80,
      "step": 2,
      "unit": "px",
      "label": "Horizontal margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_t",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Padding top",
      "default": 12
    },
    {
      "type": "range",
      "id": "padding_r",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Padding right",
      "default": 16
    },
    {
      "type": "range",
      "id": "padding_b",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Padding bottom",
      "default": 12
    },
    {
      "type": "range",
      "id": "padding_l",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Padding left",
      "default": 16
    },
    {
      "type": "range",
      "id": "border_radius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Border radius",
      "default": 0
    }

Passo 5: Validar Valide as atualizações na área de personalização de temas do Shopify. Configure os visuais nas configurações do bloco de informações do produto. Opcional: Botão Secundário Se quiser adicionar um botão secundário, crie um novo arquivo chamado kleep-secondary-button.liquid dentro da pasta snippets:

Código

<div class="kleep-secondary-button-box">
    <button
                type="button"
                style="{% if cms.kleep_font_family and cms.kleep_default_font_family == false %}font-family: '{{ cms.kleep_font_family }}' ;{% endif %}font-style: {{ cms.kleep_text_style }}; font-size: {{ cms.kleep_text_size }}px; font-weight: {{ cms.kleep_text_weight }}; text-transform: {{ cms.kleep_text_transform }}; color: {{ cms.kleep_text_color }}; background-color: {{ cms.kleep_bg_color }}; {% if cms.kleep_center %} margin: {{ cms.kleep_margin_y }}px auto;{% else %} margin: {{ cms.kleep_margin_y }}px {{ cms.kleep_margin_x }}px;{% endif %}; border: {{ cms.kleep_border_color }} {{ cms.kleep_border_width }}px solid; border-radius: {{ cms.kleep_border_radius }}px;"
                class="kleep-secondary-button"
                onclick="kleep_cta();"
                data-product-id="{{ product.id }}"
        >
        <span class="kleep-wrapper-content">
          {% if cms.kleep_text_underline %}
              <span style="position: absolute; width: calc(100% + 2px); height: 1px; bottom: -{{ cms.kleep_text_underline_offset }}px; left: 0; background-color: {{ cms.kleep_text_color }};"></span>
          {% endif %}
    
            {% if cms.kleep_image_url != blank %}
                <img height="{{ cms.kleep_image_size }}" width="{{ cms.kleep_image_size }}" src="{{ cms.kleep_image_url }}"
                     loading="lazy" alt="Kleep button image">
            {% endif %}
    
          <span class="kleep-secondary-btn-text">
            <span class="kleep-secondary-default">
              {{ 'kleep.button.text.without_hash' | t }}
            </span>
            <span style="display: none;" class="kleep-secondary-custom">
              {{ 'kleep.button.text.with_hash' | t }}:
              <span class="kleep-secondary-custom-res"></span>
            </span>
          </span>
        </span>
    
            <span
                    style="display: none; color: {{ cms.kleep_text_color }}; border-top-color: {{ cms.kleep_text_color }};"
                    class="kleep-secondary-spinner"
            ></span>
        </button>
    </div>

Cole o código a seguir onde deseja que o Kleep apareça. Deve fazer parte do bloco Product info dentro da pasta snippets.

Código

{% render 'kleep-secondary-button', cms: section.settings %}

9. Temas Vintage - Configuração de Produtos Similares

Passo 1: Criar o Trecho Crie o arquivo snippets/kleep-similar-button.liquid com o seguinte código:

Código

{% assign cms = block.settings %}
    {% assign domain = shop.domain %}
    {% assign translated_similar = '' %}
    {% assign translated_similar_missing = true %}
    
    {%- assign domain_key = domain | prepend: 'www.' | append: '.recommended' -%}
    {% assign raw_domain_similar = domain_key | t %}
    
    {% unless raw_domain_similar contains 'Translation missing'
      or raw_domain_similar contains domain
    %}
      {% assign translated_similar = raw_domain_similar %}
      {% assign translated_similar_missing = false %}
    {% endunless %}
    
    {%- if translated_similar_missing -%}
      {% assign raw_global_similar = 'kleep.recommended.text.btn' | t %}
      {% unless raw_global_similar contains 'Translation missing' %}
        {% assign translated_similar = raw_global_similar %}
        {% assign translated_similar_missing = false %}
      {% endunless %}
    {%- endif %}
    
    <button
      type="button"
      class="kleep-similar-btn {{ block.settings.extra_classes }}"
      data-kleep-similar
      data-product-id="{{ product.id }}"
      {% if product.selected_or_first_available_variant %}
        data-variant-id="{{ product.selected_or_first_available_variant.id }}"
      {% endif %}
      style="
        display:none; align-items:center; gap:.5rem;
        {% if block.settings.center %}margin: {{ block.settings.margin_y }}px auto; justify-content:center;{% else %}margin: {{ block.settings.margin_y }}px {{ block.settings.margin_x }}px;{% endif %}
      "
    >
      <span>
        {% if cms.custom_text != blank %}
          {{ cms.custom_text }}
        {% else %}
          {% if translated_similar_missing %}
            {{ 'kleep.recommended.text.btn' | t }}
          {% else %}
            {{ translated_similar }}
          {% endif %}
        {% endif %}
      </span>
    </button>

Passo 2: Renderizar o Trecho Insira esta linha onde deseja que o botão apareça:

Código

{% render 'kleep-similar-button' %}

Posicionamento típico: abaixo dos seletores de variante ou próximo ao formulário de Adicionar ao Carrinho. Passo 3: Ativar o Modo Correto Como temas vintage não suportam blocos OS 2.0, o widget deve usar um dos seguintes modos:

custom_buttons
popup+custom
button+custom

Adicionar Múltiplos Botões Para criar múltiplos botões, basta colocar o código do trecho em diferentes áreas do template de produto:

Código

{% render 'kleep-similar-button' %}

Cada chamada do trecho cria um botão adicional. Cada botão aparece automaticamente apenas quando a variante selecionada está fora de estoque.

10. Traduções (i18n)

Adicione as seguintes traduções aos seus arquivos de locale do tema. Inglês (en.json)

Código

{
  "kleep": {
    "button": {
      "text": {
        "without_hash": "Find my ideal size",
        "with_hash": "Ideal size"
          }
        },
        "recommended": {
          "text": {
            "btn": "View similar",
            "hint": "Size unavailable",
            "link": "See similar products"
          }
        },
        "search": {
          "text": {
            "inputPlaceholder": "Search...",
            "productsBlockTitle": "Products",
            "clearButton": "Clear"
          }
        },
        "searchPage": {
          "text": {
            "header": "search results",
            "query": "Results for",
            "submit": "Search",
            "input": "Search the store",
            "viewProduct": "View product"
          }
        }
      }
    }

Francês (fr.json)

Código

{
  "kleep": {
    "button": {
      "text": {
        "without_hash": "Trouver ma taille idéale",
        "with_hash": "Taille idéale"
          }
        },
        "recommended": {
          "text": {
            "btn": "Voir similaire",
            "hint": "Taille indisponible",
            "link": "Voir des produits similaires"
          }
        },
        "search": {
          "text": {
            "inputPlaceholder": "Recherche...",
            "productsBlockTitle": "Produits",
            "clearButton": "Effacer"
          }
        },
        "searchPage": {
          "text": {
            "header": "résultats de la recherche",
            "query": "Résultats pour",
            "submit": "Recherche",
            "input": "Rechercher dans la boutique",
            "viewProduct": "Voir le produit"
          }
        }
      }
    }

Italiano (it.json)

Código

{
  "kleep": {
    "button": {
      "text": {
        "without_hash": "Trova la mia taglia ideale",
        "with_hash": "Taglia ideale"
      }
    },
    "recommended": {
      "text": {
        "btn": "Visualizza simili",
        "hint": "Taglia non disponibile",
        "link": "Visualizza prodotti simili"
      }
    },
    "search": {
      "text": {
        "inputPlaceholder": "Cerca...",
        "productsBlockTitle": "Prodotti",
        "clearButton": "Cancella"
      }
    },
    "searchPage": {
      "text": {
        "header": "risultati della ricerca",
        "query": "Risultati per",
        "submit": "Cerca",
        "input": "Cerca nel negozio",
        "viewProduct": "Visualizza prodotto"
      }
    }
  }
}

Alemão (de.json)

Código

{
  "kleep": {
    "button": {
      "text": {
        "without_hash": "Finde meine ideale Größe",
        "with_hash": "Ideale Größe"
      }
    },
    "recommended": {
      "text": {
        "btn": "Ähnliche Ansicht",
        "hint": "Größe nicht verfügbar",
        "link": "Ähnliche Produkte ansehen"
      }
    },
    "search": {
      "text": {
        "inputPlaceholder": "Suchen...",
        "productsBlockTitle": "Produkte",
        "clearButton": "Klar"
      }
    },
    "searchPage": {
      "text": {
        "header": "Suchergebnisse",
        "query": "Ergebnisse für",
        "submit": "Suchen",
        "input": "Durchsuchen Sie den Shop",
        "viewProduct": "Produkt ansehen"
      }
    }
  }
}

Espanhol (es.json)

Código

{
  "kleep": {
    "button": {
      "text": {
        "without_hash": "Encontrar mi talla ideal",
        "with_hash": "Talla ideal"
      }
    },
    "recommended": {
      "text": {
        "btn": "Ver similares",
        "hint": "Talla no disponible",
        "link": "Ver productos similares"
      }
    },
    "search": {
      "text": {
        "inputPlaceholder": "Buscar...",
        "productsBlockTitle": "Productos",
        "clearButton": "Borrar"
      }
    },
    "searchPage": {
      "text": {
        "header": "resultados de búsqueda",
        "query": "Resultados para",
        "submit": "Buscar",
        "input": "Buscar en la tienda",
        "viewProduct": "Ver producto"
      }
    }
  }
}

Japonês (ja.json)

Código

{
  "kleep": {
    "button": {
      "text": {
        "without_hash": "自分に合うサイズを探す",
        "with_hash": "好みのサイズ"
      }
    },
    "recommended": {
      "text": {
        "btn": "類似商品を見る",
        "hint": "サイズがありません",
        "link": "類似商品を見る"
      }
    },
    "search": {
      "text": {
        "inputPlaceholder": "検索...",
        "productsBlockTitle": "商品",
        "clearButton": "クリア"
      }
    },
    "searchPage": {
      "text": {
        "header": "検索結果",
        "query": "検索結果",
        "submit": "検索",
        "input": "ストアを検索",
        "viewProduct": "商品を見る"
      }
    }
  }
}

Coreano (ko.json)

Código

{
  "kleep": {
    "button": {
      "text": {
        "without_hash": "내 이상적인 사이즈 찾기",
        "with_hash": "추천 사이즈"
      }
    },
    "recommended": {
      "text": {
        "btn": "유사한 상품 보기",
        "hint": "사용 불가",
        "link": "유사한 상품 보기"
      }
    },
    "search": {
      "text": {
        "inputPlaceholder": "검색...",
        "productsBlockTitle": "상품",
        "clearButton": "지우기"
      }
    },
    "searchPage": {
      "text": {
        "header": "검색 결과",
        "query": "다음에 대한 결과",
        "submit": "검색",
        "input": "매장 검색",
        "viewProduct": "상품 보기"
      }
    }
  }
}

Português (pt.json)

Código

{
  "kleep": {
    "button": {
      "text": {
        "without_hash": "Encontrar meu tamanho ideal",
        "with_hash": "Tamanho recomendado"
      }
    },
    "recommended": {
      "text": {
        "btn": "Ver similar",
        "hint": "Tamanho indisponível",
        "link": "Ver produtos similares"
      }
    },
    "search": {
      "text": {
        "inputPlaceholder": "Pesquisar...",
        "productsBlockTitle": "Produtos",
        "clearButton": "Limpar"
      }
    },
    "searchPage": {
      "text": {
        "header": "resultados da pesquisa",
        "query": "Resultados para",
        "submit": "Pesquisar",
        "input": "Pesquisar na loja",
        "viewProduct": "Ver produto"
      }
    }
  }
}

11. Referência Técnica

Localização do CTA na PDP A localização é definida por seletores DOM dentro de KleepSDK.getConstants():

targetProductInfoBlockQueries — Array de seletores que apontam para o contêiner principal dos detalhes do produto (título, preço, tamanhos, etc.). O script itera por esses seletores e usa o primeiro encontrado como ponto de inserção para o CTA ou popups.
targetVariantQueries — Onde estão as opções de tamanho/variante. Após encontrar o bloco de informações do produto, o script busca dentro dele elementos de variante (como seletores de tamanho). Cada <label> de variante (ou equivalente) torna-se um alvo para anexar o CTA popup.

Popup vs. Botão (Desktop vs. Mobile) O tipo de dispositivo é detectado usando checkIfMobile(): Esta função verifica a string navigator.userAgent do navegador em relação a uma lista de dispositivos móveis (ex.: iPhone, Android, iPad).

Desktop: O CTA é exibido como popups ao passar o mouse sobre os rótulos de variante
Mobile: O script substitui os popups de hover por um único botão, pois interações de hover não funcionam em telas touch

Configuração de Referência de Produto O Kleep usa referências de produto para corresponder produtos no seu catálogo. Configure como identificá-los: Campo de Referência: Onde encontrar a referência de produto da marca

Campo SKU do Shopify
Metafield (especifique qual)
Tags (com prefixo, ex.: ref:ABC123)

Extração de Produto Master: Como derivar o ID do produto master a partir dos SKUs de variantes

Exemplo: Se os SKUs de variantes são ABC123-S, ABC123-M, ABC123-L, a referência do produto master é ABC123
Regra: Pegar os primeiros 6 caracteres / Dividir por e pegar a primeira parte / Regex personalizado

Configure isso em Painel Kleep → Configurações → Referências de Produto. Notas de Personalização

Outras variantes de posicionamento/layout não são fornecidas além do ajuste de seletores e CSS
Para alterar a aparência (cores, espaçamento, fontes, etc.), cole seu CSS no campo “Input custom CSS styles” nas configurações do Kleep App Embed

12. Checklist de Lançamento

Antes de ir ao ar, verifique o seguinte: Exibição do Botão

Botão visível em pelo menos 3 páginas de produto
Botão funciona no desktop E no mobile
Sem conflitos de CSS (botão não oculto ou desalinhado)
Sem problemas de Cumulative Layout Shift (CLS) — o botão não causa salto na página
Apenas temas vintage: Commit referenciado no controle de versão

Qualidade dos Dados

>98% dos produtos têm um guia de tamanhos mapeado
<1% das variantes têm medidas ausentes
0 SKUs órfãos (produtos sem mapeamento de categoria)

Rastreamento

Todos os 5 eventos disparando corretamente
Jornada completa do usuário rastreada (botão → recomendação → carrinho)
Payloads validados

Desempenho

Erros JS < 1%
Latência da API P95 < 500ms
Monitoramento implementado

Jornada do Usuário

Guia de tamanhos abre corretamente
Recomendações exibidas corretamente
Adicionar ao carrinho funciona pelo guia de tamanhos
Produtos similares exibidos (se habilitado)
Responsivo em todos os dispositivos

✅ Após verificar todos os itens, notifique seu CSM do Kleep para validação final de QA antes do lançamento.

13. Solução de Problemas

O botão não aparece

☑️ Verifique se o Kleep App Embed está ativado (toggle ON)
☑️ Certifique-se de ter salvo as alterações do tema
☑️ Limpe o cache do navegador e recarregue a página
☑️ Verifique se o produto tem variantes de tamanho configuradas

Produtos Similares não aparecem

☑️ Verifique se o modo não está definido como “Desativado” nas configurações
☑️ Os botões aparecem apenas quando uma variante está fora de estoque
☑️ Para modos “personalizado”, verifique se você adicionou um App Block

A busca não está funcionando

☑️ Verifique se “Enable custom search” está ativado no App Embed
☑️ Certifique-se de ter adicionado o bloco Kleep Search ao template de Busca
☑️ Verifique se a busca nativa está oculta

Não consigo encontrar os App Blocks do Kleep Se você não vê blocos Kleep na aba “Apps” ao clicar em “Adicionar bloco”, seu tema provavelmente é um tema vintage. Consulte as Seções 11-12 para instruções de instalação alternativas. Problemas de mapeamento de dados

☑️ Verifique se seus dados de produto contêm os campos esperados (tags, metafields, etc.)
☑️ Verifique os mapeamentos em Painel Kleep → Configurações → Mapeamento de Dados
☑️ Execute novamente o scan de produto para atualizar os valores detectados

Eventos não disparando

☑️ Verifique o console do navegador por erros JavaScript
☑️ Verifique se bloqueadores de anúncios ou extensões de privacidade não estão bloqueando as requisições do Kleep
☑️ Teste no modo incógnito

Contatar Suporte Se você encontrar problemas não listados aqui, entre em contato com a equipe Kleep:

📧 Email: support@kleep.ai

Obrigado por usar o Kleep! 🎉

Nossa equipe está aqui para ajudar com a instalação e otimização do seu guia de tamanhos.---

Cookies e privacidade de dados

O Kleep é totalmente controlado pelo consentimento do visitante: o script só carrega após a coleta do consentimento pela sua CMP, e você deve condicionar o carregamento de acordo. Para a lista completa de rastreadores, os dados processados, as finalidades e bases legais, hospedagem, suboperadores e segurança, consulte Cookies, CMP e Privacidade de Dados.

Bem-vindo

CMS

Mobile

Painel

Dados

Privacidade

Guia de Integração Shopify

Visão Geral do Processo de Integração

Onboarding

Instalação e testes

Pós-integração

1. Funcionalidades

2. Recurso de Produtos Similares

3. Recurso de Busca Kleep

4. Integração de Devoluções (Opcional)

5. Rastreamento de Eventos e Analytics

6. Personalização CSS

7. Múltiplos Ambientes

7.5 Botão CTA e Produtos Similares — Guia de Instalação Completo

8. Temas Vintage - Configuração do Guia de Tamanhos

9. Temas Vintage - Configuração de Produtos Similares

10. Traduções (i18n)

11. Referência Técnica

12. Checklist de Lançamento

13. Solução de Problemas

Obrigado por usar o Kleep! 🎉

Cookies e privacidade de dados

​Visão Geral do Processo de Integração

​Onboarding

​Instalação e testes

​Pós-integração

​1. Funcionalidades

​2. Recurso de Produtos Similares

​3. Recurso de Busca Kleep

​4. Integração de Devoluções (Opcional)

​5. Rastreamento de Eventos e Analytics

​6. Personalização CSS

​7. Múltiplos Ambientes

​7.5 Botão CTA e Produtos Similares — Guia de Instalação Completo

​8. Temas Vintage - Configuração do Guia de Tamanhos

​9. Temas Vintage - Configuração de Produtos Similares

​10. Traduções (i18n)

​11. Referência Técnica

​12. Checklist de Lançamento

​13. Solução de Problemas

​Obrigado por usar o Kleep! 🎉

​Cookies e privacidade de dados

Visão Geral do Processo de Integração

Onboarding

Instalação e testes

Pós-integração

1. Funcionalidades

2. Recurso de Produtos Similares

3. Recurso de Busca Kleep

4. Integração de Devoluções (Opcional)

5. Rastreamento de Eventos e Analytics

6. Personalização CSS

7. Múltiplos Ambientes

7.5 Botão CTA e Produtos Similares — Guia de Instalação Completo

8. Temas Vintage - Configuração do Guia de Tamanhos

9. Temas Vintage - Configuração de Produtos Similares

10. Traduções (i18n)

11. Referência Técnica

12. Checklist de Lançamento

13. Solução de Problemas

Obrigado por usar o Kleep! 🎉

Cookies e privacidade de dados