Guida all'Integrazione Shopify

Questa guida ti accompagna nell’installazione di Kleep nel tuo negozio Shopify. Kleep offre tre funzionalità principali: una guida alle taglie intelligente (Kleep Sizing), raccomandazioni di prodotti simili (Kleep Similar Products) e una ricerca prodotti ottimizzata (Kleep Search).

Panoramica del Processo di Integrazione

Ecco cosa aspettarsi dalla firma del contratto al go-live e oltre. L’integrazione end-to-end richiede tipicamente circa 5–6 settimane.

Onboarding

Contratto firmato e fatturazione configurata

Una volta firmato il contratto, il tuo rappresentante Kleep avvia la fatturazione tramite GoCardless: Configura l’addebito diretto →.

Riunione di kickoff onboarding

Una breve chiamata con il tuo rappresentante Kleep per allinearsi su tempistiche, contatti tecnici e requisiti specifici del negozio prima che inizi l’installazione.

Compila il modulo di onboarding

Dopo il kickoff, ti chiederemo di condividere alcuni dettagli sulla tua azienda, fatturazione, ambienti del negozio e configurazione dei resi per poter preparare l’integrazione.Compila il nostro modulo di onboarding →Richiede circa 5 minuti. Una volta inviato, il nostro team esaminerà le tue risposte e confermerà i passi successivi entro 1 giorno lavorativo.

Condividi il tuo URL Shopify e il codice collaboratore

Inviaci l’indirizzo del tuo negozio (es. your-store.myshopify.com) insieme al tuo codice di richiesta collaboratore in modo che possiamo richiedere l’accesso al tuo negozio.

Più negozi Shopify? Se hai più istanze Shopify (es. regioni o brand diversi), inviaci un codice collaboratore per ogni negozio — abbiamo bisogno di un codice per negozio.

Non sai dove trovare questi? Nel tuo admin Shopify, vai su Impostazioni → Utenti e permessi — il tuo URL myshopify.com è mostrato in alto, e il Codice di richiesta collaboratore è elencato nella sezione Collaboratori. Consulta l’articolo di supporto Shopify sugli account collaboratore per maggiori dettagli.

Accetta la nostra richiesta di collaboratore

Ti invieremo una richiesta di accesso collaboratore dal nostro account Shopify Partner. Approvala da Impostazioni → Utenti e permessi → Collaboratori nel tuo admin Shopify.

Installa l'app Kleep su ogni negozio

Una volta che abbiamo accesso collaboratore, ti invieremo un link di installazione dell’app per ogni negozio. Dovrai installare l’app Kleep separatamente su ogni negozio Shopify dove vuoi abilitare Kleep.

Scegli il posizionamento del CTA

Rivedi le posizioni suggerite per il pulsante “Trova la mia taglia” e scegli quella che si adatta al tuo negozio: Figma posizionamento CTA →.

Installazione e test

Installiamo Kleep su un tema duplicato

Il nostro team duplica il tuo tema Shopify corrente e installa Kleep sul duplicato, in modo che il tuo negozio live rimanga intatto durante i test.

Anteprima e feedback

Ti inviamo un link di anteprima privato per testare l’integrazione end-to-end e condividere eventuali feedback o correzioni necessarie.

Go live

Una volta che dai il via libera, pubblichiamo Kleep sul tuo tema live.

Post-integrazione

Accesso alla dashboard cliente

Forniamo le credenziali al tuo team per accedere alla Dashboard Kleep, dove puoi monitorare i KPI delle prestazioni Kleep in tempo reale.

Fit Feedback abilitato

Abilitiamo il Fit Feedback nella tua dashboard in modo che il tuo team possa affinare le raccomandazioni di taglia di Kleep utilizzando dati di adattamento reali.

1. Funzionalità

Kleep viene integrato nel tuo negozio installando un’app personalizzata creata in precedenza. Consente di:

Aggiungere il nostro CTA “Trova la mia taglia” nelle tue pagine prodotto
Personalizzare la sua UI direttamente nel Theme Editor

La nostra app crea anche flussi automatizzati di Prodotti, Ordini e Dati sui Resi per rimanere aggiornata. Questi dati vengono recuperati su base giornaliera. Al momento dell’installazione, l’app crea un WebPixel utilizzato per tracciare molteplici metriche da cui deriviamo il ROI della soluzione.

2. Funzionalità Prodotti Simili

I Prodotti Simili suggerisce prodotti alternativi quando una taglia è esaurita. Questa funzionalità aumenta le conversioni offrendo alternative pertinenti ai clienti. Modalità di Visualizzazione Disponibili

Modalità	Descrizione
Popup (auto)	Popup automatico al passaggio del mouse sulla taglia (desktop) / pulsante (mobile)
Pulsante (auto)	Pulsante CTA automatico vicino al carrello quando esaurito
Solo pulsanti personalizzati	Posizioni i pulsanti manualmente tramite il theme editor
Popup + personalizzato	Popup automatico + pulsanti personalizzati aggiuntivi
Pulsante + personalizzato	Pulsante automatico + pulsanti personalizzati aggiuntivi

Configurazione Passaggio 1: Scegli la Modalità di Visualizzazione Nelle impostazioni dell’App Embed Kleep, trova l’opzione “Mostra prodotti consigliati” e seleziona la modalità desiderata dal menu a tendina.

Selezione Modalità Prodotti Simili Aggiunta di Pulsanti Personalizzati (per le modalità personalizzate) Se hai scelto una modalità con “personalizzato”, puoi aggiungere pulsanti in posizioni specifiche:

Vai al template della pagina Prodotto nel theme editor
Nella sezione desiderata, clicca su Aggiungi blocco
Clicca sulla scheda Apps e seleziona “Kleep Similar Button”
Posiziona il blocco dove vuoi e salva

Aggiungi Blocco Kleep Similar Button

I pulsanti Prodotti Simili appaiono solo quando una variante è esaurita. È normale se non li vedi su tutti i prodotti.

Aggiunta di Più Pulsanti Puoi aggiungere qualsiasi numero di pulsanti Prodotti Simili nella Pagina Prodotto. Per consentire più pulsanti, il widget deve essere impostato su uno di: custom_buttons, popup+custom, o button+custom. Per i temi OS 2.0:

Vai su Online Store → Customize
Apri il template della pagina Prodotto
Clicca su Aggiungi blocco → Kleep Similar Button
Ripeti se vuoi 2+ pulsanti nella pagina

Ogni pulsante appare automaticamente solo quando la variante selezionata è esaurita.

3. Funzionalità Kleep Search

Kleep Search sostituisce la ricerca nativa di Shopify con una ricerca ottimizzata con filtri per taglia e raccomandazioni personalizzate. Passaggio 1: Abilita la Ricerca Personalizzata Nelle impostazioni dell’App Embed Kleep, abilita l’opzione “Abilita ricerca personalizzata”.

Abilita Ricerca Personalizzata Passaggio 2: Accedi al Template Ricerca Nel theme editor, clicca sul menu a tendina in alto (predefinito “Home page”) e seleziona “Ricerca” dall’elenco dei template.

Seleziona Template Ricerca Passaggio 3: Nascondi la Ricerca Nativa Nella sezione Template, nascondi o rimuovi il blocco nativo “Risultati ricerca” cliccando sull’icona occhio.

Nascondi Ricerca Nativa Passaggio 4: Aggiungi il Blocco Kleep Search Clicca su Aggiungi sezione, poi nella scheda Apps, seleziona “Search” (kleep-dev).

Aggiungi Blocco Kleep Search Passaggio 5: Configura le Opzioni Clicca sul blocco Search che hai aggiunto per accedere alle impostazioni: numero di risultati, visualizzazione a griglia/lista, ritardo di ricerca, ecc.

Opzioni di Configurazione Ricerca

4. Integrazione Resi (Opzionale)

Se utilizzi una piattaforma di gestione dei resi, Kleep può integrare i dati dei resi per migliorare le raccomandazioni di taglia. Provider di Resi Supportati

Global-e
Aftership
Fast Return
Return Go
Altro (contattaci)

Configurazione

Nella Dashboard Kleep, vai su Impostazioni → Resi
Seleziona il tuo provider di resi
Segui le istruzioni specifiche del provider per connettere il tuo account

Se il tuo provider non è elencato, contattaci a support@kleep.ai — possiamo configurare un’integrazione personalizzata tramite SFTP o API.

5. Tracciamento Eventi e Analisi

Kleep traccia automaticamente le interazioni degli utenti per le analisi. Assicurati che il tracciamento funzioni correttamente prima del go-live. Eventi Tracciati

Evento	Descrizione
`kleep_button_click`	L’utente ha cliccato il pulsante guida taglie
`kleep_drawer_open`	Il drawer guida taglie è stato aperto
`kleep_size_recommended`	È stata visualizzata una raccomandazione di taglia
`kleep_add_to_cart`	L’utente ha aggiunto il prodotto al carrello da Kleep
`kleep_similar_click`	L’utente ha cliccato su un prodotto simile

Verifica Per verificare che gli eventi vengano inviati correttamente:

Apri gli Strumenti di Sviluppo del browser (F12)
Vai alla scheda Network
Filtra per “kleep”
Interagisci con il pulsante guida taglie
Dovresti vedere chiamate API per ogni evento

Prima del go-live: Assicurati che vengano attivati almeno 5 eventi e che i payload siano validi. Completa un percorso utente completo (clic sul pulsante → raccomandazione taglia → aggiungi al carrello) per validare l’integrazione.

6. Personalizzazione CSS

Puoi personalizzare l’aspetto degli elementi Kleep (pulsanti, popup, ricerca) aggiungendo CSS personalizzato. Dove Aggiungere il CSS Nelle impostazioni dell’App Embed Kleep, troverai un campo “Input custom CSS styles”. Incolla il tuo CSS personalizzato lì.

Campo CSS Personalizzato Esempio di Personalizzazione

Codice

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

Se hai più ambienti Shopify (dev, staging, produzione), devi configurare Kleep per ciascuno. Configurazione per Ogni Ambiente

Negozio di produzione — Negozio principale, completamente configurato
Negozi Staging/Dev — Per i test prima di passare alla produzione

Per ogni ambiente:

Installa l’app Kleep
Abilita l’App Embed
Contatta il tuo CSM Kleep per collegare l’ambiente al tuo account

Testa sempre le modifiche in staging prima di applicarle alla produzione.

URL Specifici per Ambiente Fornisci al tuo CSM Kleep:

URL di produzione: https://www.yourbrand.com
URL di staging: https://staging.yourbrand.com (se applicabile)
URL di dev: https://dev.yourbrand.com (se applicabile)

7.5 Pulsante CTA e Prodotti Simili — Guida Completa all’Installazione

Per il riferimento tecnico completo sull’installazione del pulsante CTA Kleep e della funzionalità Prodotti Simili (incluso tutto il codice Liquid, lo schema delle impostazioni e la configurazione del pulsante secondario), consulta la guida dedicata qui sotto: Pulsante CTA e Prodotti Simili — Guida Completa all’Installazione

8. Temi Vintage - Configurazione Guida Taglie

I temi vintage (chiamati anche “legacy” o creati prima di Online Store 2.0) non supportano gli App Block. L’installazione richiede modifiche al codice Liquid.

Questa sezione richiede conoscenze di sviluppo Shopify (Liquid).

Prerequisiti

Accesso all’editor di codice del tema (Online Store → Themes → Edit code)
L’App Embed Kleep deve essere abilitata nel tuo admin Shopify (Online Store → Themes → Customize → App embeds → Kleep)

Passaggio 1: Abilita l’App Embed Nel tuo admin Shopify, vai su Online Store → Themes → Customize → App embeds e attiva l’app Kleep. Passaggio 2: Chiama lo Snippet Incolla il seguente codice dove vuoi che Kleep appaia. Deve far parte del blocco Product info nella cartella snippets:

Codice

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

Passaggio 3: Crea lo Snippet del Pulsante Crea un nuovo file chiamato kleep-button.liquid nella tua cartella snippets. Inserisci il seguente contenuto al suo interno:

Codice

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

Passaggio 4: Aggiungi lo Schema Impostazioni Aggiungi le seguenti opzioni al tuo schema Impostazioni alla fine del file di sezione:

Codice

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

Passaggio 5: Convalida Convalida gli aggiornamenti nell’area Personalizza Tema di Shopify. Configura i visual nelle impostazioni del blocco informazioni prodotto. Opzionale: Pulsante Secondario Se vuoi aggiungere un pulsante secondario, crea un nuovo file chiamato kleep-secondary-button.liquid nella tua cartella snippets:

Codice

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

Incolla il seguente codice dove vuoi che Kleep appaia. Deve far parte del blocco Product info nella cartella snippets.

Codice

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

9. Temi Vintage - Configurazione Prodotti Simili

Passaggio 1: Crea lo Snippet Crea il file snippets/kleep-similar-button.liquid con il seguente codice:

Codice

{% 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>

Passaggio 2: Renderizza lo Snippet Inserisci questa riga dove vuoi che il pulsante appaia:

Codice

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

Posizionamento tipico: sotto i selettori di variante o vicino al modulo Aggiungi al Carrello. Passaggio 3: Abilita la Modalità Corretta Poiché i temi vintage non possono inserire blocchi OS 2.0, il widget deve utilizzare una delle seguenti:

custom_buttons
popup+custom
button+custom

Aggiunta di Più Pulsanti Per creare più pulsanti, posiziona semplicemente il codice dello snippet in aree diverse del template prodotto:

Codice

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

Ogni chiamata allo snippet crea un pulsante aggiuntivo. Ogni pulsante appare automaticamente solo quando la variante selezionata è esaurita.

10. Traduzioni (i18n)

Aggiungi le seguenti traduzioni ai tuoi file locale del tema. Inglese (en.json)

Codice

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

Francese (fr.json)

Codice

{
  "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)

Codice

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

Tedesco (de.json)

Codice

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

Spagnolo (es.json)

Codice

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

Giapponese (ja.json)

Codice

{
  "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)

Codice

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

Portoghese (pt.json)

Codice

{
  "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. Riferimento Tecnico

Posizione CTA nella PDP La posizione è definita dai selettori DOM all’interno di KleepSDK.getConstants():

targetProductInfoBlockQueries — Array di selettori che puntano al contenitore principale dei dettagli del prodotto (titolo, prezzo, taglie, ecc.). Lo script scorre questi selettori e utilizza il primo trovato come punto di inserimento per il CTA o i popup.
targetVariantQueries — Dove si trovano le opzioni di taglia/variante. Una volta trovato il blocco informazioni prodotto, lo script cerca al suo interno gli elementi variante (come i selettori di taglia). Ogni <label> di variante (o equivalente) diventa un target per il popup CTA.

Popup vs. Pulsante (Desktop vs. Mobile) Il tipo di dispositivo viene rilevato con checkIfMobile(): Questa funzione controlla la stringa navigator.userAgent del browser rispetto a un elenco di dispositivi mobili (es. iPhone, Android, iPad).

Desktop: Il CTA viene visualizzato come popup al passaggio del mouse accanto alle etichette delle varianti
Mobile: Lo script sostituisce i popup al passaggio del mouse con un singolo pulsante, poiché le interazioni al passaggio del mouse non funzionano sui touchscreen

Configurazione Riferimento Prodotto Kleep utilizza i riferimenti prodotto per abbinare i prodotti nel catalogo. Configura come identificarli: Campo Riferimento: Dove trovare il riferimento prodotto del brand

Campo SKU Shopify
Metafield (specifica quale)
Tag (con prefisso, es. ref:ABC123)

Estrazione Prodotto Master: Come derivare l’ID prodotto master dagli SKU delle varianti

Esempio: Se gli SKU delle varianti sono ABC123-S, ABC123-M, ABC123-L, il riferimento prodotto master è ABC123
Regola: Prendi i primi 6 caratteri / Dividi per e prendi la prima parte / Regex personalizzato

Configura questo in Dashboard Kleep → Impostazioni → Riferimenti Prodotto. Note sulla Personalizzazione

Non sono previste altre varianti di posizionamento/layout oltre alla regolazione dei selettori e CSS
Per cambiare l’aspetto (colori, spaziatura, font, ecc.), incolla il tuo CSS nella casella “Input custom CSS styles” nelle impostazioni dell’App Embed Kleep

12. Checklist Go-Live

Prima di andare in produzione, verifica quanto segue: Visualizzazione Pulsante

Pulsante visibile su almeno 3 pagine prodotto
Pulsante funziona su desktop E mobile
Nessun conflitto CSS (pulsante non nascosto o disallineato)
Nessun problema di Cumulative Layout Shift (CLS) — il pulsante non causa salti di pagina
Solo temi vintage: Commit referenziato nel version control

Qualità dei Dati

>98% dei prodotti ha una guida taglie mappata
<1% delle varianti ha misure mancanti
0 SKU orfani (prodotti senza mappatura di categoria)

Tracciamento

Tutti i 5 eventi vengono inviati correttamente
Percorso utente completo tracciato (pulsante → raccomandazione → carrello)
Payload validati

Prestazioni

Errori JS < 1%
Latenza API P95 < 500ms
Monitoraggio attivo

Percorso Utente

La guida taglie si apre correttamente
Le raccomandazioni vengono visualizzate correttamente
Aggiungi al carrello funziona dalla guida taglie
I prodotti simili vengono visualizzati (se abilitati)
Reattivo su tutti i dispositivi

Una volta verificati tutti gli elementi, notifica il tuo CSM Kleep per la validazione QA finale prima del go-live.

13. Risoluzione dei Problemi

Il pulsante non appare

Verifica che l’App Embed Kleep sia abilitato (attivo)
Assicurati di aver salvato le modifiche al tema
Svuota la cache del browser e ricarica la pagina
Controlla che il prodotto abbia varianti di taglia configurate

I Prodotti Simili non appaiono

Controlla che la modalità non sia impostata su “Disabilitato” nelle impostazioni
I pulsanti appaiono solo quando una variante è esaurita
Per le modalità “personalizzate”, verifica di aver aggiunto un App Block

La Ricerca non funziona

Verifica che “Abilita ricerca personalizzata” sia abilitato nell’App Embed
Assicurati di aver aggiunto il blocco Kleep Search al template Ricerca
Controlla che la ricerca nativa sia nascosta

Non riesco a trovare gli App Block Kleep Se non vedi i blocchi Kleep nella scheda “Apps” quando clicchi su “Aggiungi blocco”, il tuo tema è probabilmente un tema vintage. Fai riferimento alle Sezioni 11-12 per istruzioni di installazione alternative. Problemi di mappatura dati

Controlla che i dati del tuo prodotto contengano i campi attesi (tag, metafield, ecc.)
Verifica le mappature in Dashboard Kleep → Impostazioni → Mappatura Dati
Riesegui la scansione del prodotto per aggiornare i valori rilevati

Gli eventi non vengono inviati

Controlla la console del browser per errori JavaScript
Verifica che nessun ad-blocker o estensione per la privacy blocchi le richieste Kleep
Testa in modalità incognito

Contatta il Supporto Se riscontri problemi non elencati qui, contatta il team Kleep:

Email: support@kleep.ai

Grazie per aver scelto Kleep!

Il nostro team è a tua disposizione per aiutarti con l’installazione e l’ottimizzazione della tua guida taglie.--- Kleep è completamente subordinato al consenso del visitatore: lo script si carica solo dopo che il consenso è stato raccolto tramite la tua CMP, e devi condizionarne il caricamento di conseguenza. Per l’elenco completo dei tracker, i dati trattati, le finalità e le basi giuridiche, hosting, responsabili del trattamento e sicurezza, consulta Cookie, CMP & Privacy dei Dati.

​Panoramica del Processo di Integrazione

​Onboarding

​Installazione e test

​Post-integrazione

​1. Funzionalità

​2. Funzionalità Prodotti Simili

​3. Funzionalità Kleep Search

​4. Integrazione Resi (Opzionale)

​5. Tracciamento Eventi e Analisi

​6. Personalizzazione CSS

​7. Ambienti Multipli

​7.5 Pulsante CTA e Prodotti Simili — Guida Completa all’Installazione

​8. Temi Vintage - Configurazione Guida Taglie

​9. Temi Vintage - Configurazione Prodotti Simili

​10. Traduzioni (i18n)

​11. Riferimento Tecnico

​12. Checklist Go-Live

​13. Risoluzione dei Problemi

​Grazie per aver scelto Kleep!

​Cookie e privacy dei dati

Panoramica del Processo di Integrazione

Onboarding

Installazione e test

Post-integrazione

1. Funzionalità

2. Funzionalità Prodotti Simili

3. Funzionalità Kleep Search

4. Integrazione Resi (Opzionale)

5. Tracciamento Eventi e Analisi

6. Personalizzazione CSS

7. Ambienti Multipli

7.5 Pulsante CTA e Prodotti Simili — Guida Completa all’Installazione

8. Temi Vintage - Configurazione Guida Taglie

9. Temi Vintage - Configurazione Prodotti Simili

10. Traduzioni (i18n)

11. Riferimento Tecnico

12. Checklist Go-Live

13. Risoluzione dei Problemi

Grazie per aver scelto Kleep!

Cookie e privacy dei dati