> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kleep.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# 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
Após a assinatura do contrato, seu representante Kleep inicia o faturamento via GoCardless: [Configurar débito direto →](https://pay.gocardless.com/BRT000352V7T67Q).
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.
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 →](https://ihu3s9tz3r8.typeform.com/to/fYQw9zJ5)**
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.
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](https://help.shopify.com/en/manual/your-account/staff-accounts/collaborator-accounts) para mais detalhes.
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.
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.
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 →](https://www.figma.com/design/DvsqgNPSjVPVPLjKV2efAY/KLEEP-CTA-POSITIONING-SUGGESTIONS?node-id=0-1\&p=f\&t=92MwlxQkzlfAYyk5-0).
### Instalação e testes
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.
Enviamos um link de prévia privado para você testar a integração de ponta a ponta e compartilhar feedback ou ajustes necessários.
Após sua aprovação, publicamos o Kleep no seu tema ao vivo.
### Pós-integração
Provisionamos credenciais para sua equipe acessar o [Painel Kleep](https://dashboard.kleep.ai), onde você pode monitorar KPIs de desempenho do Kleep em tempo real.
Ativamos o [Fit Feedback](/pt-BR/dashboard/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:
1. Adicionar nosso CTA "Encontrar meu tamanho" nas suas páginas de produto
2. 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:
1. Vá para o template de **Página do produto** no editor de temas
2. Na seção desejada, clique em **Adicionar bloco**
3. Clique na aba **Apps** e selecione **"Kleep Similar Button"**
4. 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**
1. No Painel Kleep, vá em **Configurações → Devoluções**
2. Selecione seu provedor de devoluções
3. 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](mailto: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:
1. Abra as Ferramentas de Desenvolvedor do seu navegador (F12)
2. Vá para a aba **Network**
3. Filtre por "kleep"
4. Interaja com o botão do guia de tamanhos
5. 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**
```css theme={null}
.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**
1. **Loja de produção** — Loja principal, totalmente configurada
2. **Lojas de homologação/dev** — Para testes antes de enviar para produção
Para cada ambiente:
1. Instale o aplicativo Kleep
2. Ative o App Embed
3. 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](/pt-BR/cms/cta-button)
***
## 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`:
```jsx theme={null}
{% 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:
```jsx theme={null}
```
**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:
```json theme={null}
{
"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`:
```jsx theme={null}
```
Cole o código a seguir onde deseja que o Kleep apareça. Deve fazer parte do bloco `Product info` dentro da pasta `snippets`.
```jsx theme={null}
{% 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:
```jsx theme={null}
{% 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 %}
```
**Passo 2: Renderizar o Trecho**
Insira esta linha onde deseja que o botão apareça:
```jsx theme={null}
{% 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:
```jsx theme={null}
{% 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`)**
```json theme={null}
{
"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`)**
```json theme={null}
{
"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`)**
```json theme={null}
{
"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`)**
```json theme={null}
{
"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`)**
```json theme={null}
{
"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`)**
```json theme={null}
{
"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`)**
```json theme={null}
{
"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`)**
```json theme={null}
{
"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 `
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:
1. Vá para o template de **Página do produto** no editor de temas
2. Na seção desejada, clique em **Adicionar bloco**
3. Clique na aba **Apps** e selecione **"Kleep Similar Button"**
4. Posicione o bloco onde desejar e salve
Adicionar Bloco Kleep Similar Button
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**
1. No Painel Kleep, vá em **Configurações → Devoluções**
2. Selecione seu provedor de devoluções
3. Siga as instruções específicas do provedor para conectar sua conta
Campo de CSS Personalizado
**Exemplo de Personalização**