Guía de integración de Shopify

Esta guía te explica cómo instalar Kleep en tu tienda Shopify. Kleep ofrece tres funcionalidades principales: una guía de tallas inteligente (Kleep Sizing), recomendaciones de productos similares (Kleep Similar Products) y una búsqueda de productos optimizada (Kleep Search).

Descripción general del proceso de integración

Esto es lo que puedes esperar desde la firma del contrato hasta la salida en vivo y más allá. La integración completa suele durar aproximadamente 5–6 semanas.

Incorporación

Contrato firmado y facturación configurada

Una vez firmado el contrato, tu representante de Kleep inicia la facturación a través de GoCardless: Configurar débito directo →.

Reunión de inicio de incorporación

Una breve llamada con tu representante de Kleep para alinear el calendario, los contactos técnicos y cualquier requisito específico de la tienda antes de comenzar la instalación.

Completa el formulario de incorporación

Tras la reunión de inicio, te pediremos que compartas algunos detalles sobre tu empresa, facturación, entornos de tienda y configuración de devoluciones para preparar la integración.Completa nuestro formulario de incorporación →Tarda unos 5 minutos. Una vez enviado, nuestro equipo revisará tus respuestas y confirmará los próximos pasos en un plazo de 1 día hábil.

Comparte tu URL de Shopify y el código de colaborador

Envíanos la dirección de tu tienda (p. ej., your-store.myshopify.com) junto con tu código de solicitud de colaborador para que podamos solicitar acceso a tu tienda.

¿Varias tiendas Shopify? Si tienes varias instancias de Shopify (p. ej., diferentes regiones o marcas), envíanos un código de colaborador para cada tienda — necesitamos un código por tienda.

¿No sabes dónde encontrarlos? En tu administrador de Shopify, ve a Configuración → Usuarios y permisos — tu URL de myshopify.com aparece en la parte superior y el Código de solicitud de colaborador está en la sección Colaboradores. Consulta el artículo de ayuda de Shopify sobre cuentas de colaborador para más detalles.

Acepta nuestra solicitud de colaborador

Te enviaremos una solicitud de acceso de colaborador desde nuestra cuenta de Shopify Partner. Apruébala desde Configuración → Usuarios y permisos → Colaboradores en tu administrador de Shopify.

Instala la aplicación Kleep en cada tienda

Una vez que tengamos acceso de colaborador, te enviaremos un enlace de instalación de la aplicación para cada tienda. Deberás instalar la aplicación Kleep por separado en cada tienda Shopify donde quieras activar Kleep.

Elige la ubicación del CTA

Revisa las posiciones sugeridas para el botón “Encontrar mi talla” y elige la que mejor se adapte a tu tienda: CTA positioning Figma →.

Instalación y pruebas

Instalamos Kleep en un tema duplicado

Nuestro equipo duplica tu tema actual de Shopify e instala Kleep en el duplicado, para que tu tienda en vivo no se vea afectada mientras realizas las pruebas.

Vista previa y comentarios

Te enviamos un enlace de vista previa privado para probar la integración de extremo a extremo y compartir cualquier comentario o ajuste necesario.

Salida en vivo

Una vez que des tu aprobación, publicamos Kleep en tu tema en vivo.

Post-integración

Acceso al panel de cliente

Aprovisionamos credenciales para que tu equipo acceda al Panel de Kleep, donde puedes monitorear los KPIs de rendimiento de Kleep en tiempo real.

Fit Feedback activado

Activamos Fit Feedback en tu panel para que tu equipo pueda refinar las recomendaciones de tallas de Kleep usando datos de ajuste reales.

1. Funcionalidades

Kleep se integra en tu tienda instalando una aplicación personalizada creada previamente. Permite:

Añadir nuestro CTA “Encontrar mi talla” en tus páginas de producto
Personalizar su interfaz directamente en el Editor de temas

Nuestra aplicación también crea flujos automatizados de datos de Productos, Pedidos y Devoluciones para mantenerse actualizada. Estos datos se recuperan diariamente. Tras la instalación, la aplicación crea un WebPixel que se utiliza para rastrear múltiples métricas a partir de las cuales calculamos el ROI de la solución.

2. Funcionalidad de Productos similares

Productos similares sugiere productos alternativos cuando una talla está agotada. Esta funcionalidad aumenta las conversiones ofreciendo alternativas relevantes a los clientes. Modos de visualización disponibles

Modo	Descripción
Popup (automático)	Popup automático al pasar el ratón sobre la talla (escritorio) / botón (móvil)
Botón (automático)	Botón CTA automático cerca del carrito cuando hay agotamiento de stock
Solo botones personalizados	Tú colocas los botones manualmente a través del editor de temas
Popup + personalizado	Popup automático + botones personalizados adicionales
Botón + personalizado	Botón automático + botones personalizados adicionales

Configuración Paso 1: Elige el modo de visualización En la configuración del App Embed de Kleep, encuentra la opción “Mostrar productos recomendados” y selecciona el modo deseado en el menú desplegable.

Selección del modo de Productos similares Agregar botones personalizados (para modos personalizados) Si has elegido un modo con “personalizado”, puedes añadir botones en ubicaciones específicas:

Ve a la plantilla de Página de producto en el editor de temas
En la sección deseada, haz clic en Añadir bloque
Haz clic en la pestaña Aplicaciones y selecciona “Kleep Similar Button”
Coloca el bloque donde quieras y guarda

Añadir bloque de botón similar de Kleep

Los botones de Productos similares solo aparecen cuando una variante está agotada. Es normal no verlos en todos los productos.

Agregar múltiples botones Puedes añadir cualquier número de botones de Productos similares en la Página de producto. Para permitir múltiples botones, el widget debe estar configurado en uno de: custom_buttons, popup+custom o button+custom. Para temas OS 2.0:

Ve a Tienda en línea → Personalizar
Abre la plantilla de Página de producto
Haz clic en Añadir bloque → Kleep Similar Button
Repite si quieres 2 o más botones en la página

Cada botón aparece automáticamente solo cuando la variante seleccionada está agotada.

3. Funcionalidad Kleep Search

Kleep Search reemplaza la búsqueda nativa de Shopify con una búsqueda optimizada que incluye filtros de talla y recomendaciones personalizadas. Paso 1: Activa la búsqueda personalizada En la configuración del App Embed de Kleep, activa la opción “Activar búsqueda personalizada”.

Activar búsqueda personalizada Paso 2: Accede a la plantilla de búsqueda En el editor de temas, haz clic en el menú desplegable de la parte superior (por defecto muestra “Página de inicio”) y selecciona “Búsqueda” de la lista de plantillas.

Seleccionar plantilla de búsqueda Paso 3: Oculta la búsqueda nativa En la sección de la plantilla, oculta o elimina el bloque nativo de “Resultados de búsqueda” haciendo clic en el icono de ojo.

Ocultar búsqueda nativa Paso 4: Añade el bloque Kleep Search Haz clic en Añadir sección, luego en la pestaña Aplicaciones, selecciona “Search” (kleep-dev).

Añadir bloque Kleep Search Paso 5: Configura las opciones Haz clic en el bloque de búsqueda que añadiste para acceder a la configuración: número de resultados, visualización en cuadrícula/lista, retraso de búsqueda, etc.

Opciones de configuración de búsqueda

4. Integración de devoluciones (opcional)

Si utilizas una plataforma de gestión de devoluciones, Kleep puede integrar los datos de devoluciones para mejorar las recomendaciones de tallas. Proveedores de devoluciones compatibles

Global-e
Aftership
Fast Return
Return Go
Otros (contáctanos)

Configuración

En el Panel de Kleep, ve a Configuración → Devoluciones
Selecciona tu proveedor de devoluciones
Sigue las instrucciones específicas del proveedor para conectar tu cuenta

Si tu proveedor no aparece en la lista, contáctanos en support@kleep.ai — podemos configurar una integración personalizada a través de SFTP o API.

5. Seguimiento de eventos y analítica

Kleep rastrea automáticamente las interacciones de los usuarios para analítica. Asegúrate de que el seguimiento funciona correctamente antes de la salida en vivo. Eventos rastreados

Evento	Descripción
`kleep_button_click`	El usuario hizo clic en el botón de la guía de tallas
`kleep_drawer_open`	El cajón de la guía de tallas se abrió
`kleep_size_recommended`	Se mostró una recomendación de talla
`kleep_add_to_cart`	El usuario añadió el producto al carrito desde Kleep
`kleep_similar_click`	El usuario hizo clic en un producto similar

Verificación Para verificar que los eventos se disparan correctamente:

Abre las Herramientas de desarrollador de tu navegador (F12)
Ve a la pestaña Red
Filtra por “kleep”
Interactúa con el botón de la guía de tallas
Deberías ver llamadas a la API para cada evento

Antes de la salida en vivo: Asegúrate de que se disparan al menos 5 eventos y que los payloads son válidos. Completa un recorrido de usuario completo (clic en el botón → recomendación de talla → añadir al carrito) para validar la integración.

6. Personalización CSS

Puedes personalizar la apariencia de los elementos de Kleep (botones, popups, búsqueda) añadiendo CSS personalizado. Dónde añadir CSS En la configuración del App Embed de Kleep, encontrarás un campo “Introducir estilos CSS personalizados”. Pega tu CSS personalizado allí.

Campo de CSS personalizado Ejemplo de personalización

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últiples entornos

Si tienes múltiples entornos de Shopify (dev, staging, producción), necesitas configurar Kleep para cada uno. Configuración de cada entorno

Tienda de producción — Tienda principal, completamente configurada
Tiendas de staging/dev — Para pruebas antes de publicar en producción

Para cada entorno:

Instala la aplicación Kleep
Activa el App Embed
Contacta a tu CSM de Kleep para vincular el entorno a tu cuenta

Siempre prueba los cambios en staging antes de aplicarlos en producción.

URLs específicas de entorno Proporciona a tu CSM de Kleep:

URL de producción: https://www.yourbrand.com
URL de staging: https://staging.yourbrand.com (si aplica)
URL de dev: https://dev.yourbrand.com (si aplica)

7.5 Botón CTA y Productos similares — Guía de instalación completa

Para la referencia técnica completa sobre la instalación del botón CTA de Kleep y la funcionalidad de Productos similares (incluyendo todo el código Liquid, el esquema de configuración y la configuración del botón secundario), consulta la guía dedicada a continuación: Botón CTA y Productos similares — Guía de instalación completa

8. Temas vintage — Configuración de la guía de tallas

Los temas vintage (también llamados “legacy” o creados antes de Online Store 2.0) no admiten App Blocks. La instalación requiere modificaciones en el código Liquid.

Esta sección requiere conocimientos de desarrollo en Shopify (Liquid).

Requisitos previos

Acceso al editor de código del tema (Tienda en línea → Temas → Editar código)
El App Embed de Kleep debe estar activado en tu administrador de Shopify (Tienda en línea → Temas → Personalizar → App embeds → Kleep)

Paso 1: Activa el App Embed En tu administrador de Shopify, ve a Tienda en línea → Temas → Personalizar → App embeds y activa la aplicación Kleep. Paso 2: Llama al snippet Pega el siguiente código donde quieras que aparezca Kleep. Debe ser parte del bloque Product info dentro de la carpeta snippets:

Código

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

Paso 3: Crea el snippet del botón Crea un nuevo archivo llamado kleep-button.liquid dentro de tu carpeta snippets. Pon el siguiente contenido dentro:

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>

Paso 4: Añade el esquema de configuración Añade las siguientes opciones a tu esquema de configuración al final del archivo de sección:

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
    }

Paso 5: Valida Valida las actualizaciones en el área de Personalización del tema de Shopify. Configura los elementos visuales en la configuración del bloque de información del producto. Opcional: Botón secundario Si deseas añadir un botón secundario, crea un nuevo archivo llamado kleep-secondary-button.liquid dentro de tu carpeta 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>

Pega el siguiente código donde quieras que aparezca Kleep. Debe ser parte del bloque Product info dentro de la carpeta snippets.

Código

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

9. Temas vintage — Configuración de Productos similares

Paso 1: Crea el snippet Crea un archivo snippets/kleep-similar-button.liquid con el siguiente 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>

Paso 2: Renderiza el snippet Inserta esta línea donde quieras que aparezca el botón:

Código

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

Colocación típica: bajo los selectores de variante o cerca del formulario de Añadir al carrito. Paso 3: Activa el modo correcto Dado que los temas vintage no pueden insertar bloques OS 2.0, el widget debe usar uno de:

custom_buttons
popup+custom
button+custom

Agregar múltiples botones Para crear múltiples botones, simplemente coloca el código del snippet en diferentes áreas de la plantilla de producto:

Código

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

Cada llamada al snippet crea un botón adicional. Cada botón aparece automáticamente solo cuando la variante seleccionada está agotada.

10. Traducciones (i18n)

Añade las siguientes traducciones a los archivos de localización de tu 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án (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"
      }
    }
  }
}

Español (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. Referencia técnica

Ubicación del CTA en la PDP La ubicación está definida por selectores DOM dentro de KleepSDK.getConstants():

targetProductInfoBlockQueries – Array de selectores que apuntan al contenedor principal de los detalles del producto (título, precio, tallas, etc.). El script itera por estos selectores y usa el primero que encuentra como punto de inserción para el CTA o los popups.
targetVariantQueries – Donde están las opciones de talla/variante. Una vez que se encuentra el bloque de información del producto, el script busca dentro de él los elementos de variante (como los selectores de talla). Cada <label> de variante (o equivalente) se convierte en un objetivo para adjuntar el popup CTA.

Popup vs. Botón (Escritorio vs. Móvil) El tipo de dispositivo se detecta usando checkIfMobile(): Esta función comprueba la cadena navigator.userAgent del navegador contra una lista de dispositivos móviles (p. ej., iPhone, Android, iPad).

Escritorio: El CTA se muestra como popups al pasar el ratón junto a las etiquetas de variante
Móvil: El script reemplaza los popups hover por un único botón, ya que las interacciones hover no funcionan en pantallas táctiles

Configuración de referencia de producto Kleep usa referencias de producto para hacer coincidir productos en tu catálogo. Configura cómo identificarlos: Campo de referencia: Dónde encontrar la referencia de producto de la marca

Campo SKU de Shopify
Metafield (especifica cuál)
Etiquetas (con prefijo, p. ej., ref:ABC123)

Extracción del producto maestro: Cómo derivar el ID del producto maestro de los SKUs de variante

Ejemplo: Si los SKUs de variante son ABC123-S, ABC123-M, ABC123-L, la referencia del producto maestro es ABC123
Regla: Tomar los primeros 6 caracteres / Dividir por separador y tomar la primera parte / Regex personalizada

Configura esto en Panel de Kleep → Configuración → Referencias de producto. Notas de personalización

No se ofrecen otras variantes de colocación/diseño más allá de ajustar los selectores y el CSS
Para cambiar la apariencia (colores, espaciado, fuentes, etc.), pega tu CSS en el campo “Introducir estilos CSS personalizados” en la configuración del App Embed de Kleep

12. Lista de verificación antes de la salida en vivo

Antes de salir en vivo, verifica lo siguiente: Visualización del botón

Botón visible en al menos 3 páginas de producto
El botón funciona en escritorio Y móvil
Sin conflictos CSS (el botón no está oculto ni desalineado)
Sin problemas de Cumulative Layout Shift (CLS) — el botón no provoca saltos en la página
Solo temas vintage: Commit referenciado en control de versiones

Calidad de los datos

>98% de los productos tienen una guía de tallas asignada
<1% de las variantes tienen medidas faltantes
0 SKUs huérfanos (productos sin asignación de categoría)

Seguimiento

Los 5 eventos se disparan correctamente
Recorrido de usuario completo rastreado (botón → recomendación → carrito)
Payloads validados

Rendimiento

Errores JS < 1%
Latencia de API P95 < 500ms
Monitorización en funcionamiento

Recorrido del usuario

La guía de tallas se abre correctamente
Las recomendaciones se muestran correctamente
Añadir al carrito funciona desde la guía de tallas
Los productos similares se muestran (si está activado)
Responsivo en todos los dispositivos

Una vez marcados todos los elementos, notifica a tu CSM de Kleep para la validación final de QA antes de la salida en vivo.

13. Resolución de problemas

El botón no aparece

Verifica que el App Embed de Kleep esté activado (interruptor en ON)
Asegúrate de haber guardado los cambios del tema
Borra la caché del navegador y recarga la página
Comprueba que el producto tiene variantes de talla configuradas

Productos similares no aparece

Comprueba que el modo no está en “Desactivado” en la configuración
Los botones solo aparecen cuando una variante está agotada
Para los modos “personalizado”, verifica que has añadido un App Block

La búsqueda no funciona

Verifica que “Activar búsqueda personalizada” está habilitado en el App Embed
Asegúrate de haber añadido el bloque Kleep Search a la plantilla de búsqueda
Comprueba que la búsqueda nativa está oculta

No encuentro los bloques de la aplicación Kleep Si no ves los bloques de Kleep en la pestaña “Aplicaciones” al hacer clic en “Añadir bloque”, es probable que tu tema sea un tema vintage. Consulta las Secciones 11-12 para instrucciones de instalación alternativas. Problemas de mapeo de datos

Comprueba que los datos de tu producto contienen los campos esperados (etiquetas, metafields, etc.)
Verifica los mapeos en Panel de Kleep → Configuración → Mapeo de datos
Vuelve a ejecutar el escaneo de productos para actualizar los valores detectados

Los eventos no se disparan

Comprueba la consola del navegador en busca de errores de JavaScript
Verifica que ningún bloqueador de anuncios o extensión de privacidad está bloqueando las solicitudes de Kleep
Prueba en modo incógnito

Contactar con soporte Si encuentras problemas que no aparecen aquí, contacta al equipo de Kleep:

Correo electrónico: support@kleep.ai

¡Gracias por usar Kleep!

Nuestro equipo está aquí para ayudarte con la instalación y la optimización de tu guía de tallas.---

Cookies y privacidad de datos

Kleep está completamente condicionado por el consentimiento del visitante: el script solo se carga después de que se recopile el consentimiento a través de tu CMP, y debes condicionar su carga en consecuencia. Para la lista completa de rastreadores, los datos tratados, las finalidades y bases legales, el alojamiento, los subencargados y la seguridad, consulta Cookies, CMP y privacidad de datos.

​Descripción general del proceso de integración

​Incorporación

​Instalación y pruebas

​Post-integración

​1. Funcionalidades

​2. Funcionalidad de Productos similares

​3. Funcionalidad Kleep Search

​4. Integración de devoluciones (opcional)

​5. Seguimiento de eventos y analítica

​6. Personalización CSS

​7. Múltiples entornos

​7.5 Botón CTA y Productos similares — Guía de instalación completa

​8. Temas vintage — Configuración de la guía de tallas

​9. Temas vintage — Configuración de Productos similares

​10. Traducciones (i18n)

​11. Referencia técnica

​12. Lista de verificación antes de la salida en vivo

​13. Resolución de problemas

​¡Gracias por usar Kleep!

​Cookies y privacidad de datos

Descripción general del proceso de integración

Incorporación

Instalación y pruebas

Post-integración

1. Funcionalidades

2. Funcionalidad de Productos similares

3. Funcionalidad Kleep Search

4. Integración de devoluciones (opcional)

5. Seguimiento de eventos y analítica

6. Personalización CSS

7. Múltiples entornos

7.5 Botón CTA y Productos similares — Guía de instalación completa

8. Temas vintage — Configuración de la guía de tallas

9. Temas vintage — Configuración de Productos similares

10. Traducciones (i18n)

11. Referencia técnica

12. Lista de verificación antes de la salida en vivo

13. Resolución de problemas

¡Gracias por usar Kleep!

Cookies y privacidad de datos