Guia de Integração Shopify

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

Visão Geral do Processo de Integração

Eis o que esperar desde a assinatura do contrato até à entrada em produção e além. A integração de ponta a ponta demora tipicamente cerca de 5 a 6 semanas.

Onboarding

Contrato assinado e faturação configurada

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

Reunião de kickoff de onboarding

Uma chamada breve com o seu representante Kleep para alinhar o calendário, os contactos técnicos e quaisquer requisitos específicos da loja antes de a instalação começar.

Preencher o formulário de onboarding

Após o kickoff, pediremos que partilhe alguns detalhes sobre a sua empresa, faturação, ambientes de loja e configuração de devoluções para que possamos preparar a integração.Preencher o nosso formulário de onboarding →Demora cerca de 5 minutos. Após a submissão, a nossa equipa irá rever as suas respostas e confirmar os próximos passos dentro de 1 dia útil.

Partilhar o URL Shopify e o código de colaborador

Envie-nos o endereço da sua loja (por exemplo, your-store.myshopify.com) juntamente com o seu código de pedido de colaborador para que possamos solicitar acesso à sua loja.

Várias lojas Shopify? Se tiver várias instâncias Shopify (por exemplo, regiões ou marcas diferentes), envie-nos um código de colaborador para cada loja — precisamos de um código por loja.

Não sabe onde encontrá-los? No seu administrador Shopify, vá a Definições → Utilizadores e permissões — o URL myshopify.com é mostrado no topo e o Código de pedido de colaborador está listado na secção Colaboradores. Consulte o artigo de ajuda do Shopify sobre contas de colaborador para mais detalhes.

Aceitar o nosso pedido de colaborador

Enviaremos um pedido de acesso de colaborador a partir da nossa conta de Partner Shopify. Aprove-o em Definições → Utilizadores e permissões → Colaboradores no seu administrador Shopify.

Instalar a aplicação Kleep em cada loja

Assim que tivermos acesso de colaborador, enviaremos um link de instalação da aplicação para cada loja. Terá de instalar a aplicação Kleep separadamente em cada loja Shopify onde pretende que o Kleep esteja ativo.

Escolher a posição do CTA

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

Instalação e testes

Instalamos o Kleep num tema duplicado

A nossa equipa duplica o seu tema Shopify atual e instala o Kleep no duplicado, para que a sua loja em produção não seja afetada enquanto testa.

Pré-visualização e feedback

Enviamos-lhe um link de pré-visualização privado para testar a integração de ponta a ponta e partilhar qualquer feedback ou ajustes necessários.

Entrada em produção

Após a sua aprovação, publicamos o Kleep no seu tema em produção.

Pós-integração

Acesso ao dashboard do cliente

Criamos credenciais para a sua equipa aceder ao Dashboard Kleep, onde pode monitorizar os KPIs de desempenho do Kleep em tempo real.

Fit Feedback ativado

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

1. Funcionalidades

O Kleep é integrado na sua loja através da instalação de uma aplicação personalizada criada previamente. Permite:

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

A nossa aplicação também cria fluxos automatizados de Produtos, Encomendas e Dados de Devoluções para se manter atualizada. Estes dados são recuperados diariamente. Após a instalação, a aplicação cria um WebPixel que é utilizado para rastrear múltiplas métricas a partir das quais derivamos o ROI da solução.

2. Funcionalidade Produtos Similares

Produtos Similares sugere produtos alternativos quando um tamanho está esgotado. Esta funcionalidade aumenta as conversões ao oferecer alternativas relevantes aos clientes. Modos de Visualização Disponíveis

Modo	Descrição
Popup (automático)	Popup automático ao passar o rato sobre o tamanho (ambiente de trabalho) / botão (móvel)
Botão (automático)	Botão CTA automático perto do carrinho quando esgotado
Apenas botões personalizados	Coloca os botões manualmente através do editor de tema
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 Visualização Nas definições do Kleep App Embed, encontre a opção “Show recommended products” e selecione o modo desejado no menu pendente.

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

Vá ao template de Página de produto no editor de tema
Na secção desejada, clique em Adicionar bloco
Clique no separador Aplicações e selecione “Kleep Similar Button”
Posicione o bloco onde pretende e guarde

Adicionar Bloco Kleep Similar Button

Os botões de Produtos Similares só aparecem quando uma variante está esgotada. É normal não os ver em todos os produtos.

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

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

Todos os botões aparecem automaticamente apenas quando a variante selecionada está esgotada.

3. Funcionalidade Kleep Search

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

Ativar Pesquisa Personalizada Passo 2: Aceder ao Template de Pesquisa No editor de tema, clique no menu pendente no topo (predefinido como “Página inicial”) e selecione “Search” na lista de templates.

Selecionar Template de Pesquisa Passo 3: Ocultar a Pesquisa Nativa Na secção Template, oculte ou remova o bloco nativo “Resultados de pesquisa” clicando no ícone de olho.

Ocultar Pesquisa Nativa Passo 4: Adicionar o Bloco Kleep Search Clique em Adicionar secção, e no separador Aplicações, selecione “Search” (kleep-dev).

Adicionar Bloco Kleep Search Passo 5: Configurar Opções Clique no bloco Search que adicionou para aceder às definições: número de resultados, visualização em grelha/lista, atraso na pesquisa, etc.

Opções de Configuração da Pesquisa

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

Se utiliza uma plataforma de gestão de devoluções, o Kleep pode integrar dados de devoluções para melhorar as recomendações de tamanho. Fornecedores de Devoluções Suportados

Global-e
Aftership
Fast Return
Return Go
Outro (contacte-nos)

Configuração

No Dashboard Kleep, vá a Definições → Devoluções
Selecione o seu fornecedor de devoluções
Siga as instruções específicas do fornecedor para ligar a sua conta

Se o seu fornecedor não estiver listado, contacte-nos em support@kleep.ai — podemos configurar uma integração personalizada via SFTP ou API.

5. Tracking de Eventos e Análise

O Kleep rastreia automaticamente as interações dos utilizadores para análise. Certifique-se de que o tracking funciona corretamente antes da entrada em produção. Eventos Rastreados

Evento	Descrição
`kleep_button_click`	Utilizador 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 apresentada
`kleep_add_to_cart`	Utilizador adicionou produto ao carrinho a partir do Kleep
`kleep_similar_click`	Utilizador clicou num produto similar

Verificação Para verificar que os eventos estão a ser disparados corretamente:

Abra as Ferramentas de Programador do browser (F12)
Vá ao separador Rede
Filtre por “kleep”
Interaja com o botão do guia de tamanhos
Deverá ver chamadas de API para cada evento

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

6. Personalização CSS

Pode personalizar o aspeto dos elementos Kleep (botões, popups, pesquisa) adicionando CSS personalizado. Onde Adicionar CSS Nas definições do Kleep App Embed, encontrará um campo “Input custom CSS styles”. Cole o seu CSS personalizado aí.

Campo 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 tiver múltiplos ambientes Shopify (dev, staging, produção), precisa de configurar o Kleep para cada um. Configuração para Cada Ambiente

Loja de produção — Loja principal, totalmente configurada
Lojas de staging/dev — Para testes antes de colocar em produção

Para cada ambiente:

Instale a aplicação Kleep
Ative o App Embed
Contacte o seu CSM Kleep para ligar o ambiente à sua conta

Teste sempre as alterações em staging antes de as aplicar em produção.

URLs por Ambiente Forneça ao seu CSM Kleep:

URL de produção: https://www.yourbrand.com
URL de staging: 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 Completo de Instalação

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

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

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

Esta secção requer conhecimentos 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 ativo no seu administrador Shopify (Loja Online → Temas → Personalizar → App embeds → Kleep)

Passo 1: Ativar o App Embed No seu administrador Shopify, vá a Loja Online → Temas → Personalizar → App embeds e ative a aplicação Kleep. Passo 2: Chamar o Snippet Cole o seguinte código onde pretende 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 Snippet do Botão Crie um novo ficheiro com o nome kleep-button.liquid dentro da pasta snippets. Insira 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 Definições Adicione as seguintes opções ao seu esquema de Definições no final do ficheiro de secçã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 do Tema Shopify. Configure os visuais nas definições do bloco de informações do produto. Opcional: Botão Secundário Se pretender adicionar um botão secundário, crie um novo ficheiro com o nome 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 seguinte código onde pretende 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 Snippet Crie um ficheiro 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 Snippet Insira esta linha onde pretende que o botão apareça:

Código

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

Posição típica: abaixo dos seletores de variante ou perto do formulário Adicionar ao Carrinho. Passo 3: Ativar o Modo Correto Como os temas vintage não podem inserir 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 snippet em diferentes áreas do template de produto:

Código

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

Cada chamada ao snippet cria um botão adicional. Todos os botões aparecem automaticamente apenas quando a variante selecionada está esgotada.

10. Traduções (i18n)

Adicione as seguintes traduções aos ficheiros de locale do seu 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

Posição do CTA no PDP A posição é definida por seletores DOM dentro de KleepSDK.getConstants():

targetProductInfoBlockQueries — Array de seletores que apontam para o contentor principal dos detalhes do produto (título, preço, tamanhos, etc.). O script itera por estes seletores e usa o primeiro que encontra como ponto de inserção do CTA ou dos popups.
targetVariantQueries — Onde estão as opções de tamanho/variante. Após o bloco de informações do produto ser encontrado, o script pesquisa no seu interior por elementos de variante (como seletores de tamanho). Cada <label> de variante (ou equivalente) torna-se um alvo para fixar o popup CTA.

Popup vs. Botão (Ambiente de Trabalho vs. Móvel) O tipo de dispositivo é detetado usando checkIfMobile(): Esta função verifica a string navigator.userAgent do browser contra uma lista de dispositivos móveis (por exemplo, iPhone, Android, iPad).

Ambiente de trabalho: O CTA é apresentado como popups ao passar o rato perto das etiquetas de variante
Móvel: O script substitui os popups de hover por um único botão, uma vez que as interações de hover não funcionam em ecrãs tácteis

Configuração de Referência de Produto O Kleep utiliza referências de produto para fazer corresponder produtos em todo o 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, por exemplo, ref:ABC123)

Extração do Produto Principal: Como derivar o ID do produto principal a partir dos SKUs das variantes

Exemplo: Se os SKUs das variantes são ABC123-S, ABC123-M, ABC123-L, a referência do produto principal é ABC123
Regra: Usar os primeiros 6 caracteres / Dividir por separador e usar a primeira parte / Regex personalizado

Configure isto em Dashboard Kleep → Definições → Referências de Produto. Notas de Personalização

Outras variantes de posicionamento/layout não estão disponíveis além do ajuste dos seletores e CSS
Para alterar o aspeto (cores, espaçamento, tipos de letra, etc.), cole o seu CSS no campo “Input custom CSS styles” nas definições do Kleep App Embed

12. Checklist de Entrada em Produção

Antes de entrar em produção, verifique o seguinte: Apresentação do Botão

Botão visível em pelo menos 3 páginas de produto
Botão funciona em ambiente de trabalho E móvel
Sem conflitos CSS (botão não oculto nem desalinhado)
Sem problemas de Cumulative Layout Shift (CLS) — o botão não provoca salto na página
Apenas temas vintage: Commit referenciado no controlo de versões

Qualidade de Dados

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

Tracking

Os 5 eventos a disparar corretamente
Jornada de utilizador completa rastreada (botão → recomendação → carrinho)
Payloads validados

Desempenho

Erros JS < 1%
Latência API P95 < 500ms
Monitorização implementada

Jornada do Utilizador

Guia de tamanhos abre corretamente
Recomendações apresentadas corretamente
Adicionar ao carrinho funciona a partir do guia de tamanhos
Produtos similares apresentados (se ativado)
Responsivo em todos os dispositivos

✅ Após todos os itens verificados, notifique o seu CSM Kleep para validação QA final antes da entrada em produção.

13. Resolução de Problemas

O botão não aparece

☑️ Verifique se o Kleep App Embed está ativo (toggle ON)
☑️ Certifique-se de que guardou as alterações no tema
☑️ Limpe a cache do browser 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 definições
☑️ Os botões só aparecem quando uma variante está esgotada
☑️ Para modos “personalizado”, verifique se adicionou um App Block

A pesquisa não funciona

☑️ Verifique se “Enable custom search” está ativo no App Embed
☑️ Certifique-se de que adicionou o bloco Kleep Search ao template de Pesquisa
☑️ Verifique se a pesquisa nativa está oculta

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

☑️ Verifique se os dados do produto contêm os campos esperados (tags, metafields, etc.)
☑️ Verifique os mapeamentos em Dashboard Kleep → Definições → Mapeamento de Dados
☑️ Execute novamente a pesquisa de produto para atualizar os valores detetados

Eventos não a disparar

☑️ Verifique a consola do browser para erros JavaScript
☑️ Verifique se não há bloqueadores de anúncios ou extensões de privacidade a bloquear pedidos Kleep
☑️ Teste em modo privado

Contactar o Suporte Se encontrar problemas não listados aqui, contacte a equipa Kleep:

📧 E-mail: support@kleep.ai

Obrigado por usar o Kleep! 🎉

A nossa equipa está aqui para ajudá-lo com a instalação e otimização do seu guia de tamanhos.---

Cookies e privacidade de dados

O Kleep está totalmente condicionado ao consentimento do visitante: o script só carrega após a recolha do consentimento através do seu CMP, e deve condicionar o seu carregamento em conformidade. Para a lista completa de trackers, os dados processados, as finalidades e bases legais, alojamento, subprocessadores e segurança, consulte Cookies, CMP e Privacidade de Dados.

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

​Onboarding

​Instalação e testes

​Pós-integração

​1. Funcionalidades

​2. Funcionalidade Produtos Similares

​3. Funcionalidade Kleep Search

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

​5. Tracking de Eventos e Análise

​6. Personalização CSS

​7. Múltiplos Ambientes

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

​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 Entrada em Produção

​13. Resoluçã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. Funcionalidade Produtos Similares

3. Funcionalidade Kleep Search

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

5. Tracking de Eventos e Análise

6. Personalização CSS

7. Múltiplos Ambientes

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

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 Entrada em Produção

13. Resolução de Problemas

Obrigado por usar o Kleep! 🎉

Cookies e privacidade de dados