Shopify: Botón CTA y Productos similares

Guía de integración Shopify V2

Esta sección muestra cómo añadir Kleep AI Sizing a tu tienda Shopify.

Tutorial en vídeo paso a paso

Sigue nuestro tutorial de Tango para añadir el botón de Kleep a tu tienda en temas Online Store 2.0.

Guía de integración Shopify V1

1. Sizing

Esta sección muestra cómo añadir Kleep AI Sizing a tu código de Shopify.

¿Prefieres un tutorial visual?

Mira el tutorial paso a paso de Tango para instalar Kleep en una tienda Shopify V1.

Pasos

Paso 1: Activa el App Embed Asegúrate de que la aplicación Kleep está activada en tus App embeds.

Capture d'écran 2025-08-13 à 14.29.30.png

Paso 2: Renderiza el snippet del botón Pega el siguiente código donde quieras que aparezca Kleep. Debe ser parte del bloque Product info dentro de la carpeta snippets.

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

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

Botón de Kleep

<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 opciones al esquema de configuración Añade las siguientes opciones a tu esquema de configuración al final de la página:

Opciones de Shopify

{
  "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": "Font du thème",
      "info": "Si coché, la variable css `--font-body-family` est utilisée"
    },
    {
      "type": "font_picker",
      "id": "font_family",
      "label": "Font Family",
      "default": "helvetica_n4"
    },
    {
      "type": "select",
      "id": "text_style",
      "label": "Style texte",
      "default": "normal",
      "options": [
        {
          "label": "Normal",
          "value": "normal"
        },
        {
          "label": "Italic",
          "value": "italic"
        },
        {
          "label": "Oblique",
          "value": "oblique"
        }
      ]
    },
    {
      "type": "select",
      "id": "text_transform",
      "label": "Texte 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": "Poid texte",
      "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": "Taille police",
      "default": 16
    },
    {
      "type": "checkbox",
      "id": "text_underline",
      "label": "Texte soulignage",
      "default": false
    },
    {
      "type": "range",
      "id": "text_underline_offset",
      "min": 1,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Offset underline",
      "default": 2
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Couleur texte du bouton",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Couleur fond",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Couleur bordures",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "border_width",
      "min": 0,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Épaisseur bordures",
      "default": 0
    },
    {
      "type": "header",
      "content": "CSS Styles",
      "info": "Espacements"
    },
    {
      "type": "checkbox",
      "id": "center",
      "label": "Centrer le bouton",
      "default": false,
      "info": "Cela remplacera le 'Margin horizontal'"
    },
    {
      "type": "range",
      "id": "margin_y",
      "min": 0,
      "max": 80,
      "step": 2,
      "unit": "px",
      "label": "Margin vertical",
      "default": 0
    },
    {
      "type": "range",
      "id": "margin_x",
      "min": 0,
      "max": 80,
      "step": 2,
      "unit": "px",
      "label": "Margin horizontal",
      "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": "Bordures arrondies",
      "default": 0
    }

Para añadir tus propios estilos 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.

Por ejemplo:

Paso 5: Añade traducciones al inglés Añade las traducciones en inglés a los locales de tu tema.

Traducciones

"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"
      }
    }
  }

Paso 6: Añade traducciones a otros idiomas Añade otras traducciones a los locales de tu tema.

fr.json

"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"
      }
    }
  }

it.json

"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"
    }
  }
}

de.json

"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"
    }
  }
}

es.json

"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"
    }
  }
}

ja.json

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

ko.json

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

pt.json

"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"
    }
  }
}

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.
Si quieres añadir un botón secundario, necesitarás crear un nuevo archivo llamado kleep-secondary-button.liquid dentro de tu carpeta snippets. Pon el siguiente contenido dentro:

Código del botón secundario

<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.

Snippet de renderizado

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

2. Productos similares

Instalar “Productos similares” para temas Shopify V1

En este caso, debes añadir un snippet de Liquid manualmente.

Paso 1 — Crea un snippet

Crea: snippets/kleep-similar-button.liquid Inserta el siguiente código:

Snippet del botón similar

{% 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 dentro de la plantilla de producto

Inserta esta línea donde quieras que aparezca el botón:

Snippet de renderizado

{% 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 para temas V1

Dado que los temas V1 no pueden insertar bloques OS2.0, el widget debe usar uno de:

custom_buttons
popup+custom
button+custom

Instalar “Productos similares” para tiendas V2 (Online Store 2.0)

Los temas modernos de Shopify admiten app embeds y bloques personalizados. No se requieren cambios de código.

Paso 1 — Activa el App Embed de Kleep

Ve a Tienda en línea → Temas → Personalizar.
Abre la sección App embeds.
Activa la aplicación Kleep.
Guarda el tema.

Esto activa el script principal que gestiona la lógica de Productos similares.

A continuación, localiza la opción “Mostrar productos recomendados”

Paso 2 — Selecciona el modo de visualización de Productos similares

Dentro de la configuración del widget de Kleep, elige cómo deben aparecer los Productos similares en la Página de producto:

disabled – desactiva completamente la funcionalidad
popup – añade automáticamente un popup sobre los selectores de variante/talla en escritorio y reemplaza el botón predeterminado en móvil
button – inserta automáticamente un botón CTA cerca del área de Añadir al carrito cuando la variante seleccionada está agotada
custom_buttons – desactiva toda colocación automática; el comerciante debe añadir uno o más bloques “Kleep Similar Button” manualmente
popup+custom – mantiene el popup automático y también activa cualquier botón personalizado añadido en el tema
button+custom – mantiene el botón CTA automático y también activa cualquier botón personalizado añadido en el tema

Después, simplemente guarda el tema y aparecerá inmediatamente en tu tienda (página de producto). Paso 3 — Añadir botones personalizados (solo para custom_buttons, popup+custom, button+custom) Si el modo seleccionado incluye botones personalizados:

Abre Tienda en línea → Personalizar.
Ve a la plantilla de Página de producto.
En la sección deseada, haz clic en Añadir bloque.
Selecciona Kleep Similar Button.
Guarda el tema.

Los botones personalizados solo aparecen cuando la variante seleccionada está agotada.

Agregar múltiples botones de “Productos similares” (primario y secundario)

Puedes añadir cualquier número de botones de Productos similares en la Página de producto. Esto funciona tanto para temas OS 2.0 como para temas V1/legacy.

Activa un modo que admita botones personalizados

Para permitir múltiples botones, el widget debe estar configurado en uno de:

custom_buttons
popup+custom
button+custom

Estos modos activan la colocación manual, para que los comerciantes puedan insertar tantos botones como necesiten.

Para Online Store 2.0 (Temas modernos)

Los temas OS 2.0 permiten añadir botones visualmente a través del Editor de temas. Pasos:

Ve a Tienda en línea → Personalizar
Abre la plantilla de Página de producto
Haz clic en Añadir bloque → Kleep Similar Button
Añade el botón donde quieras
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.

Para temas V1 / Legacy

Los temas legacy no admiten bloques, pero puedes renderizar el snippet varias veces. Inserta este snippet donde quieras un botón: {% render 'kleep-similar-button' %} Para crear múltiples botones, simplemente coloca este código en diferentes áreas de la plantilla de producto. Cada llamada al snippet crea un botón adicional.

Resumen

Para añadir múltiples botones de Productos similares: Activa cualquier modo con botones personalizados → añade varios bloques OS 2.0 o múltiples llamadas al snippet → todos los botones funcionan automáticamente cuando la variante está agotada.

Ubicación del CTA en la PDP La ubicación está definida por selectores DOM dentro de KleepSDK.getConstants(). targetProductInfoBlockQueries – dónde está la información del producto. Es un 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 – dónde 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) Detectamos el tipo de dispositivo usando checkIfMobile(): Esta función comprueba la cadena navigator.userAgent del navegador contra una lista de dispositivos móviles (p. ej., iPhone, Android, iPad).

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

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.

3. Búsqueda

Nota: No es necesario cambiar ningún código del tema para configurar Kleep Search en Shopify V1. Abre el Editor de temas, activa el App Embed de Kleep, habilita la Búsqueda personalizada y reemplaza el bloque de búsqueda predeterminado por el bloque Kleep Search. 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. Todo esto se describe a continuación Abrir el Editor de temas Ve a Tienda en línea > Temas, encuentra el tema que quieres editar y haz clic en Personalizar. Activar el App Embed de Kleep Abre la sección App embeds. Encuentra la aplicación Kleep y actívala. Activar la búsqueda personalizada (opcional) En la configuración de Kleep, activa “Activar búsqueda personalizada”.

Reemplazar la búsqueda predeterminada Desde el editor de temas, abre la plantilla de Búsqueda (navega a la plantilla de página de búsqueda).

Elimina u oculta la sección de búsqueda predeterminada del tema.

Añade el bloque Kleep Search (desde la pestaña Aplicaciones) y colócalo donde estaba la búsqueda predeterminada.

Guarda los cambios del tema. La funcionalidad de búsqueda está integrada como una sección Liquid dentro de la aplicación, no como un código Liquid separado. La activación está controlada por:

{% if block.settings.kleep_enable_custom_search  and '[kookai.fr](http://kookai.fr/), [gualap.com](http://gualap.com/), [gualap.fr](http://gualap.fr/), [www.molli.com](http://www.molli.com/), [getkleep.myshopify.com](http://getkleep.myshopify.com/)'  contains domain%}

Esto garantiza que solo tiendas específicas (dominios) puedan activar la funcionalidad de búsqueda.Diseño y estilos

La vista en cuadrícula frente a lista solo se alterna a través del ajuste products_search_grid_layout en la aplicación.

Para ello, ve a la búsqueda que ya has añadido y en el lado derecho verás la opción para configurarla.

Los estilos adicionales (fuentes, colores, espaciado) los implementamos nosotros en el código, por tienda, si es necesario.
Toda la funcionalidad está vinculada a esta sección Liquid y se activa a través de kleep_enable_custom_search en la aplicación, no añadiendo código Liquid a la configuración del tema.
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.

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.

​Guía de integración Shopify V2

Tutorial en vídeo paso a paso

​Guía de integración Shopify V1

​1. Sizing

¿Prefieres un tutorial visual?

​Pasos

​2. Productos similares

​Instalar “Productos similares” para temas Shopify V1

​Paso 1 — Crea un snippet

​Paso 2 — Renderiza el snippet dentro de la plantilla de producto

​Paso 3 — Activa el modo correcto para temas V1

​Instalar “Productos similares” para tiendas V2 (Online Store 2.0)

​Paso 1 — Activa el App Embed de Kleep

​Paso 2 — Selecciona el modo de visualización de Productos similares

​Agregar múltiples botones de “Productos similares” (primario y secundario)

​Activa un modo que admita botones personalizados

​Para Online Store 2.0 (Temas modernos)

​Para temas V1 / Legacy

​Resumen

​3. Búsqueda

​Cookies y privacidad de datos