> ## 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 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
Após a assinatura do contrato, o seu representante Kleep inicia a faturação via GoCardless: [Configurar débito direto →](https://pay.gocardless.com/BRT000352V7T67Q).
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.
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 →](https://ihu3s9tz3r8.typeform.com/to/fYQw9zJ5)**
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.
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](https://help.shopify.com/en/manual/your-account/staff-accounts/collaborator-accounts) para mais detalhes.
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.
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.
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 →](https://www.figma.com/design/DvsqgNPSjVPVPLjKV2efAY/KLEEP-CTA-POSITIONING-SUGGESTIONS?node-id=0-1\&p=f\&t=92MwlxQkzlfAYyk5-0).
### Instalação e testes
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.
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.
Após a sua aprovação, publicamos o Kleep no seu tema em produção.
### Pós-integração
Criamos credenciais para a sua equipa aceder ao [Dashboard Kleep](https://dashboard.kleep.ai), onde pode monitorizar os KPIs de desempenho do Kleep em tempo real.
Ativamos o [Fit Feedback](/pt/dashboard/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:
1. Adicionar o nosso CTA "Encontrar o meu tamanho" nas suas páginas de produto
2. 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:
1. Vá ao template de **Página de produto** no editor de tema
2. Na secção desejada, clique em **Adicionar bloco**
3. Clique no separador **Aplicações** e selecione **"Kleep Similar Button"**
4. 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**
1. No Dashboard Kleep, vá a **Definições → Devoluções**
2. Selecione o seu fornecedor de devoluções
3. 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](mailto: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:
1. Abra as Ferramentas de Programador do browser (F12)
2. Vá ao separador **Rede**
3. Filtre por "kleep"
4. Interaja com o botão do guia de tamanhos
5. 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**
```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 tiver múltiplos ambientes Shopify (dev, staging, produção), precisa de configurar o Kleep para cada um.
**Configuração para Cada Ambiente**
1. **Loja de produção** — Loja principal, totalmente configurada
2. **Lojas de staging/dev** — Para testes antes de colocar em produção
Para cada ambiente:
1. Instale a aplicação Kleep
2. Ative o App Embed
3. 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](/pt/cms/cta-button)
***
## 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`:
```jsx theme={null}
{% 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:
```jsx theme={null}
```
**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:
```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 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`:
```jsx theme={null}
```
Cole o seguinte código onde pretende 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 Snippet**
Crie um ficheiro `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 Snippet**
Insira esta linha onde pretende que o botão apareça:
```jsx theme={null}
{% 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:
```jsx theme={null}
{% 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`)**
```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
**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 `
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:
1. Vá ao template de **Página de produto** no editor de tema
2. Na secção desejada, clique em **Adicionar bloco**
3. Clique no separador **Aplicações** e selecione **"Kleep Similar Button"**
4. Posicione o bloco onde pretende e guarde
Adicionar Bloco Kleep Similar Button
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**
1. No Dashboard Kleep, vá a **Definições → Devoluções**
2. Selecione o seu fornecedor de devoluções
3. Siga as instruções específicas do fornecedor para ligar a sua conta
Campo CSS Personalizado
**Exemplo de Personalização**