Shopify: Pulsante CTA e Prodotti Simili

Guida all’Integrazione Shopify V2

Questa sezione mostra come aggiungere Kleep AI Sizing al tuo negozio Shopify.

Video tutorial passo-passo

Segui il nostro tutorial Tango per aggiungere il pulsante Kleep al tuo negozio sui temi Online Store 2.0.

Guida all’Integrazione Shopify V1

1. Dimensionamento

Questa sezione mostra come aggiungere Kleep AI Sizing al tuo codebase Shopify.

Preferisci un tutorial visivo?

Guarda il tutorial Tango passo-passo per installare Kleep su un negozio Shopify V1.

Passaggi

Passaggio 1: Abilita l’App Embed Assicurati che l’app Kleep sia attivata nei tuoi App embeds.

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

Passaggio 2: Renderizza lo snippet del pulsante Incolla il seguente codice dove vuoi che Kleep appaia. Deve far parte del blocco Product info nella cartella snippets.

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

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

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

Passaggio 4: Aggiungi le opzioni dello schema impostazioni Aggiungi le seguenti opzioni al tuo schema Impostazioni alla fine della pagina:

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

Per aggiungere i tuoi stili CSS personalizzati:

Per cambiare l’aspetto (colori, spaziatura, font, ecc.), incolla il tuo CSS nella casella “Input custom CSS styles” nelle impostazioni dell’App Embed Kleep.

Ad esempio:

Passaggio 5: Aggiungi le traduzioni in inglese Aggiungi le traduzioni in inglese ai file locale del tuo tema.

Traduzioni

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

Passaggio 6: Aggiungi le traduzioni nelle altre lingue Aggiungi le altre traduzioni ai file locale del tuo 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"
    }
  }
}

Convalida gli aggiornamenti nell’area Personalizza Tema di Shopify. Configura i visual nelle impostazioni del blocco informazioni prodotto.
Se vuoi aggiungere un pulsante secondario, dovrai creare un nuovo file chiamato kleep-secondary-button.liquid nella tua cartella snippets. Inserisci il seguente contenuto al suo interno:

Codice pulsante secondario

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

Snippet render

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

2. Prodotti Simili

Installa “Prodotti Simili” per i Temi Shopify V1

In questo caso, devi aggiungere uno snippet Liquid manualmente.

Passaggio 1 - Crea uno snippet

Crea: snippets/kleep-similar-button.liquid Inserisci il seguente codice:

Snippet pulsante simile

{% 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 nel template prodotto

Inserisci questa riga dove vuoi che il pulsante appaia:

Snippet render

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

Posizionamento tipico: sotto i selettori di variante o vicino al modulo Aggiungi al Carrello.

Passaggio 3 - Abilita la modalità corretta per i temi V1

Poiché i temi V1 non possono inserire blocchi OS2.0, il widget deve utilizzare una delle seguenti:

custom_buttons
popup+custom
button+custom

Installa “Prodotti Simili” per i Negozi V2 (Online Store 2.0)

I temi Shopify moderni supportano app embed e blocchi personalizzati. Non sono necessarie modifiche al codice.

Passaggio 1 — Abilita l’App Embed Kleep

Vai su Online Store → Themes → Customize.
Apri la sezione App embeds.
Abilita l’App Kleep.
Salva il tema.

Questo attiva lo script principale che gestisce la logica dei Prodotti Simili.

Poi, individua “Mostra prodotti consigliati”

Passaggio 2 — Seleziona la modalità di visualizzazione dei Prodotti Simili

All’interno della configurazione del widget Kleep, scegli come devono apparire i Prodotti Simili nella Pagina Prodotto:

disabled – disattiva completamente la funzionalità
popup – aggiunge automaticamente un popup sopra i selettori di variante/taglia sul desktop, e sostituisce il pulsante predefinito su mobile
button – inserisce automaticamente un pulsante CTA vicino all’area Aggiungi al Carrello quando la variante selezionata è esaurita
custom_buttons – disabilita tutto il posizionamento automatico; il commerciante deve aggiungere manualmente uno o più blocchi “Kleep Similar Button”
popup+custom – mantiene il popup automatico e abilita anche i pulsanti personalizzati aggiunti nel tema
button+custom – mantiene il pulsante CTA automatico e abilita anche i pulsanti personalizzati aggiunti nel tema

Dopodiché, salva semplicemente il tema e apparirà immediatamente nel tuo negozio (pagina Prodotto). Passaggio 3 — Aggiungi Pulsanti Personalizzati (solo per custom_buttons, popup+custom, button+custom) Se la modalità selezionata include pulsanti personalizzati:

Apri Online Store → Customize.
Vai al template della pagina Prodotto.
Nella sezione desiderata, clicca su Aggiungi Blocco.
Seleziona Kleep Similar Button.
Salva il tema.

I pulsanti personalizzati appariranno solo quando la variante selezionata è esaurita.

Aggiungere Più Pulsanti “Prodotti Simili” (Primario e Secondario)

Puoi aggiungere qualsiasi numero di pulsanti Prodotti Simili nella Pagina Prodotto. Funziona sia per i temi OS 2.0 che per i temi V1 / legacy.

Abilita una Modalità che Supporta i Pulsanti Personalizzati

Per consentire più pulsanti, il widget deve essere impostato su uno dei seguenti:

custom_buttons
popup+custom
button+custom

Queste modalità attivano il posizionamento manuale, in modo che i commercianti possano inserire tutti i pulsanti necessari.

Per Online Store 2.0 (Temi Moderni)

I temi OS 2.0 consentono di aggiungere pulsanti visivamente tramite il Theme Editor. Passaggi:

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

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

Per i Temi V1 / Legacy

I temi legacy non supportano i blocchi, ma puoi renderizzare lo snippet più volte. Inserisci questo snippet dove vuoi un pulsante: {% render 'kleep-similar-button' %} Per creare più pulsanti, posiziona semplicemente questo codice in aree diverse del template prodotto. Ogni chiamata allo snippet crea un pulsante aggiuntivo.

Riepilogo

Per aggiungere più pulsanti Prodotti Simili: Abilita qualsiasi modalità con pulsanti personalizzati → aggiungi più blocchi OS 2.0 o più chiamate allo snippet → tutti i pulsanti funzionano automaticamente quando la variante è esaurita.

Posizione CTA nella PDP La posizione è definita dai selettori DOM all’interno di KleepSDK.getConstants(). targetProductInfoBlockQueries – dove si trovano le informazioni sul prodotto. Si tratta di un 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).

Su desktop, il CTA viene visualizzato come popup al passaggio del mouse accanto alle etichette delle varianti.
Su 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.

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.

3. Ricerca

Nota: Non è necessario modificare alcun codice del tema per configurare Kleep Search in Shopify V1. Apri il Theme Editor, attiva il Kleep App Embed, abilita la Ricerca Personalizzata, poi sostituisci il blocco di ricerca predefinito con il blocco Kleep Search. Per cambiare l’aspetto (colori, spaziatura, font, ecc.), incolla il tuo CSS nella casella “Input custom CSS styles” nelle impostazioni dell’App Embed Kleep. Tutte queste cose verranno descritte di seguito Apri il Theme Editor Vai su Online Store > Themes, trova il tema che vuoi modificare e clicca su Customize. Abilita Kleep App Embed Apri la sezione App embeds. Trova l’app Kleep e attivala. Abilita la Ricerca Personalizzata (Opzionale) Nelle impostazioni Kleep, abilita “Abilita ricerca personalizzata”.

Sostituisci la Ricerca Predefinita Dal theme editor, apri il template Ricerca (vai al template della pagina Ricerca).

Rimuovi o nascondi la sezione di ricerca predefinita dal tema.

Aggiungi il blocco Kleep Search (dalla scheda Apps) e posizionalo dove si trovava la ricerca predefinita.

Salva le modifiche al tema. La funzionalità di ricerca è integrata come sezione Liquid nell’app, non come codice Liquid separato. L’attivazione è controllata da:

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

Questo assicura che solo negozi specifici (domini) possano abilitare la funzionalità di ricerca.Layout e Stili

La visualizzazione a griglia vs. lista è attivabile solo tramite l’impostazione products_search_grid_layout nell’app.

Per farlo, vai alla ricerca che hai già aggiunto e sul lato destro vedrai l’opzione per configurarla

Gli stili aggiuntivi (font, colori, spaziatura) vengono implementati da noi nel codice, per ogni negozio, se necessario.
Tutte le funzionalità sono legate a questa sezione Liquid e abilitate tramite kleep_enable_custom_search nell’app, non aggiungendo codice Liquid alle impostazioni del tema.
Per cambiare l’aspetto (colori, spaziatura, font, ecc.), incolla il tuo CSS nella casella “Input custom CSS styles” nelle impostazioni dell’App Embed Kleep.

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.

Benvenuto

CMS

Mobile

Dashboard

Dati

Privacy

Shopify: Pulsante CTA e Prodotti Simili

Guida all’Integrazione Shopify V2

Video tutorial passo-passo

Guida all’Integrazione Shopify V1

1. Dimensionamento

Preferisci un tutorial visivo?

Passaggi

2. Prodotti Simili

Installa “Prodotti Simili” per i Temi Shopify V1

Passaggio 1 - Crea uno snippet

Passaggio 2 - Renderizza lo snippet nel template prodotto

Passaggio 3 - Abilita la modalità corretta per i temi V1

Installa “Prodotti Simili” per i Negozi V2 (Online Store 2.0)

Passaggio 1 — Abilita l’App Embed Kleep

Passaggio 2 — Seleziona la modalità di visualizzazione dei Prodotti Simili

Aggiungere Più Pulsanti “Prodotti Simili” (Primario e Secondario)

Abilita una Modalità che Supporta i Pulsanti Personalizzati

Per Online Store 2.0 (Temi Moderni)

Per i Temi V1 / Legacy

Riepilogo

3. Ricerca

​Guida all’Integrazione Shopify V2

Video tutorial passo-passo

​Guida all’Integrazione Shopify V1

​1. Dimensionamento

Preferisci un tutorial visivo?

​Passaggi

​2. Prodotti Simili

​Installa “Prodotti Simili” per i Temi Shopify V1

​Passaggio 1 - Crea uno snippet

​Passaggio 2 - Renderizza lo snippet nel template prodotto

​Passaggio 3 - Abilita la modalità corretta per i temi V1

​Installa “Prodotti Simili” per i Negozi V2 (Online Store 2.0)

​Passaggio 1 — Abilita l’App Embed Kleep

​Passaggio 2 — Seleziona la modalità di visualizzazione dei Prodotti Simili

​Aggiungere Più Pulsanti “Prodotti Simili” (Primario e Secondario)

​Abilita una Modalità che Supporta i Pulsanti Personalizzati

​Per Online Store 2.0 (Temi Moderni)

​Per i Temi V1 / Legacy

​Riepilogo

​3. Ricerca

​Cookie e privacy dei dati

Guida all’Integrazione Shopify V2

Guida all’Integrazione Shopify V1

1. Dimensionamento

Passaggi

2. Prodotti Simili

Installa “Prodotti Simili” per i Temi Shopify V1

Passaggio 1 - Crea uno snippet

Passaggio 2 - Renderizza lo snippet nel template prodotto

Passaggio 3 - Abilita la modalità corretta per i temi V1

Installa “Prodotti Simili” per i Negozi V2 (Online Store 2.0)

Passaggio 1 — Abilita l’App Embed Kleep

Passaggio 2 — Seleziona la modalità di visualizzazione dei Prodotti Simili

Aggiungere Più Pulsanti “Prodotti Simili” (Primario e Secondario)

Abilita una Modalità che Supporta i Pulsanti Personalizzati

Per Online Store 2.0 (Temi Moderni)

Per i Temi V1 / Legacy

Riepilogo

3. Ricerca

Cookie e privacy dei dati