Shopify-integrointiopas

Tämä opas ohjaa sinut Kleepin asentamisessa Shopify-kauppaasi. Kleep tarjoaa kolme pääominaisuutta: älykkään kokooppaan (Kleep Sizing), samankaltaisten tuotteiden suositukset (Kleep Similar Products) ja optimoidun tuotehaun (Kleep Search).

Integraatioprosessin yleiskatsaus

Tässä on mitä odottaa sopimuksen allekirjoittamisesta käyttöönottoon ja sen jälkeen. Koko integraatio kestää tyypillisesti noin 5–6 viikkoa.

Käyttöönotto

Sopimus allekirjoitettu ja laskutus asetettu

Kun sopimus on allekirjoitettu, Kleep-edustajasi käynnistää laskutuksen GoCardlessin kautta: Aseta suoraveloitus →.

Käyttöönottokäynnistyspalaveri

Lyhyt puhelu Kleep-edustajasi kanssa aikataulun, teknisten yhteyshenkilöiden ja kauppakohtaisten vaatimusten yhdenmukaistamiseksi ennen asennuksen aloittamista.

Täytä käyttöönottolomake

Käynnistyksen jälkeen pyydämme sinua jakamaan muutamia tietoja yrityksestäsi, laskutuksesta, kauppaympäristöistä ja palautusasetuksista, jotta voimme valmistella integraation.Täytä käyttöönottolomakkeemme →Se kestää noin 5 minuuttia. Kun olet lähettänyt sen, tiimimme tarkistaa vastauksesi ja vahvistaa seuraavat vaiheet yhden arkipäivän kuluessa.

Jaa Shopify-URL:si ja yhteistyökumppanikoodi

Lähetä meille kauppasi osoite (esim. your-store.myshopify.com) sekä yhteistyökumppanipyyntökoodisi, jotta voimme pyytää pääsyä kauppaasi.

Useita Shopify-kauppoja? Jos sinulla on useita Shopify-instansseja (esim. eri alueita tai brändejä), lähetä meille yhteistyökumppanikoodi jokaiselle kaupalle — tarvitsemme yhden koodin per kauppa.

Etkö tiedä mistä löydät nämä? Shopify-hallinnossasi siirry Asetukset → Käyttäjät ja käyttöoikeudet — myshopify.com-URL:si näkyy ylhäällä, ja Yhteistyökumppanipyyntökoodi on lueteltu Yhteistyökumppanit-osiossa. Katso Shopifyn ohjeartikkeli yhteistyökumppanien tileistä lisätietoja varten.

Hyväksy yhteistyökumppanipyyntömme

Lähetämme yhteistyökumppanin käyttöoikeuspyynnön Shopify Partner -tililtämme. Hyväksy se kohdasta Asetukset → Käyttäjät ja käyttöoikeudet → Yhteistyökumppanit Shopify-hallinnossasi.

Asenna Kleep-sovellus jokaiseen kauppaan

Kun meillä on yhteistyökumppanin käyttöoikeus, lähetämme sinulle sovelluksen asennuslinkin jokaiselle kaupalle. Sinun on asennettava Kleep-sovellus erikseen jokaiseen Shopify-kauppaan, johon haluat Kleepin käyttöön.

Valitse CTA:n sijoituspaikka

Tarkista ehdottamamme sijainnit “Löydä kokoni” -painikkeelle ja valitse sinulle sopiva: CTA:n sijoittelu Figmassa →.

Asennus ja testaus

Asennamme Kleepin kopioituun teemaan

Tiimimme kopioi nykyisen Shopify-teemasi ja asentaa Kleepin kopioituun versioon, jotta live-kauppasi pysyy koskemattomana testauksen aikana.

Esikatselu ja palaute

Lähetämme sinulle yksityisen esikatselulinkin integraation testaamiseksi alusta loppuun ja mahdollisten palautteiden tai säätöjen jakamiseksi.

Julkaisu

Kun olet hyväksynyt, julkaisemme Kleepin live-teemaasi.

Integraation jälkeen

Asiakkaan koontinäyttöön pääsy

Tarjoamme kirjautumistiedot tiimillesi Kleep Dashboard -pääsyä varten, jossa voit seurata Kleepin suorituskyky-KPI:tä reaaliajassa.

Fit Feedback käytössä

Otamme käyttöön Fit Feedback koontinäytössäsi, jotta tiimisi voi tarkentaa Kleepin kokosuosituksia todellisten sovitusdatojen avulla.

1. Toiminnallisuudet

Kleep integroidaan kauppaasi asentamalla mukautettu sovellus, joka on luotu etukäteen. Sen avulla voit:

Lisätä CTA:n “Löydä kokoni” tuotesivuillesi
Mukauttaa sen käyttöliittymää suoraan teemaeditorissa

Sovelluksemme luo myös automatisoidut tuote-, tilaus- ja palautusdatavirrat pysyäkseen ajan tasalla. Nämä tiedot haetaan päivittäin. Asennuksen yhteydessä sovellus luo WebPixelin, jota käytetään useiden mittareiden seuraamiseen, joista johdamme ratkaisun ROI:n.

2. Samankaltaiset tuotteet -ominaisuus

Samankaltaiset tuotteet ehdottaa vaihtoehtoisia tuotteita, kun koko on loppuunmyyty. Tämä ominaisuus lisää konversioita tarjoamalla asiakkaille relevantteja vaihtoehtoja. Käytettävissä olevat näyttötilat

Tila	Kuvaus
Ponnahdusikkuna (auto)	Automaattinen ponnahdusikkuna koon hoverauksessa (työpöytä) / painike (mobiili)
Painike (auto)	Automaattinen CTA-painike ostoskorin lähellä, kun loppuunmyyty
Vain mukautetut painikkeet	Sijoitat painikkeet manuaalisesti teemaeditorin kautta
Ponnahdusikkuna + mukautettu	Automaattinen ponnahdusikkuna + lisämukautetut painikkeet
Painike + mukautettu	Automaattinen painike + lisämukautetut painikkeet

Konfiguraatio Vaihe 1: Valitse näyttötila Kleep App Embed -asetuksissa löydät “Näytä suositellut tuotteet” -vaihtoehdon ja valitse haluamasi tila pudotusvalikosta.

Samankaltaisten tuotteiden tilan valinta Mukautettujen painikkeiden lisääminen (mukautetuille tiloille) Jos olet valinnut tilan, jossa on “mukautettu”, voit lisätä painikkeita tiettyihin sijainteihin:

Siirry teemaeditorissa Tuotesivu-malliin
Halutussa osiossa napsauta Lisää lohko
Napsauta Sovellukset-välilehteä ja valitse “Kleep Similar Button”
Aseta lohko haluamaasi kohtaan ja tallenna

Lisää Kleep Similar Button -lohko

Samankaltaiset tuotteet -painikkeet näkyvät vain, kun variantti on loppuunmyyty. On normaalia, jos et näe niitä kaikilla tuotteilla.

Useiden painikkeiden lisääminen Voit lisätä minkä tahansa määrän Samankaltaiset tuotteet -painikkeita tuotesivulle. Useiden painikkeiden sallimiseksi widgetin on oltava asetettu johonkin seuraavista: custom_buttons, popup+custom tai button+custom. OS 2.0 -teemoille:

Siirry kohtaan Verkkokauppa → Mukauta
Avaa Tuotesivu-malli
Napsauta Lisää lohko → Kleep Similar Button
Toista, jos haluat 2+ painiketta sivulle

Jokainen painike ilmestyy automaattisesti vain, kun valittu variantti on loppuunmyyty.

3. Kleep Search -ominaisuus

Kleep Search korvaa Shopifyn natiivisen haun optimoidulla haulla, jossa on kokosuodattimet ja henkilökohtaiset suositukset. Vaihe 1: Ota mukautettu haku käyttöön Kleep App Embed -asetuksissa ota käyttöön “Ota mukautettu haku käyttöön” -vaihtoehto.

Ota mukautettu haku käyttöön Vaihe 2: Avaa hakumalli Teemaeditorissa napsauta yläosan pudotusvalikkoa (oletuksena “Etusivu”) ja valitse “Haku” mallien luettelosta.

Valitse hakumalli Vaihe 3: Piilota natiivi haku Malliosassa piilota tai poista natiivi “Hakutulokset”-lohko napsauttamalla silmäkuvaketta.

Piilota natiivi haku Vaihe 4: Lisää Kleep Search -lohko Napsauta Lisää osio, sitten Sovellukset-välilehdessä valitse “Haku” (kleep-dev).

Lisää Kleep Search -lohko Vaihe 5: Konfiguroi asetukset Napsauta lisäämääsi Haku-lohkoa päästäksesi asetuksiin: tulosten määrä, ruudukko/lista-näyttö, hakuviive jne.

Hakukonfigurointiasetukset

4. Palautusten integraatio (valinnainen)

Jos käytät palautustenhallinta-alustaa, Kleep voi integroida palautustiedot kokosuositusten parantamiseksi. Tuetut palautuspalveluntarjoajat

Global-e
Aftership
Fast Return
Return Go
Muu (ota yhteyttä)

Konfiguraatio

Kleep Dashboardissa siirry kohtaan Asetukset → Palautukset
Valitse palautuspalveluntarjoajasi
Seuraa palveluntarjoajakohtaisia ohjeita tilisi yhdistämiseksi

Jos palveluntarjoajasi ei ole luettelossa, ota yhteyttä osoitteessa support@kleep.ai — voimme asettaa mukautetun integraation SFTP:n tai API:n kautta.

5. Tapahtumaseuranta ja analytiikka

Kleep seuraa automaattisesti käyttäjävuorovaikutuksia analytiikkaa varten. Varmista, että seuranta toimii oikein ennen julkaisua. Seuratut tapahtumat

Tapahtuma	Kuvaus
`kleep_button_click`	Käyttäjä napsautti kokoopas-painiketta
`kleep_drawer_open`	Kokoopas-vetolaatikko avattiin
`kleep_size_recommended`	Kokosuositus näytettiin
`kleep_add_to_cart`	Käyttäjä lisäsi tuotteen ostoskoriin Kleepin kautta
`kleep_similar_click`	Käyttäjä napsautti samankaltaista tuotetta

Tarkistus Tarkistaaksesi, että tapahtumat laukeavat oikein:

Avaa selaimen kehittäjätyökalut (F12)
Siirry Verkko-välilehteen
Suodata “kleep”
Vuorovaikuta kokoopas-painikkeen kanssa
Sinun pitäisi nähdä API-kutsuja jokaiselle tapahtumalle

Ennen julkaisua: Varmista, että vähintään 5 tapahtumaa laukaistaan ja hyötykuormat ovat kelvollisia. Suorita yksi täydellinen käyttäjäpolku (painikkeen napsautus → kokosuositus → ostoskoriin lisääminen) integraation validoimiseksi.

6. CSS-mukauttaminen

Voit mukauttaa Kleep-elementtien (painikkeet, ponnahdusikkunat, haku) ulkoasua lisäämällä mukautettua CSS:ää. Mihin lisätä CSS Kleep App Embed -asetuksissa löydät “Syötä mukautetut CSS-tyylit” -kentän. Liitä mukautettu CSS:si sinne.

Mukautettu CSS-kenttä Esimerkki mukautuksesta

Koodi

.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. Useita ympäristöjä

Jos sinulla on useita Shopify-ympäristöjä (kehitys, staging, tuotanto), sinun on konfiguroitava Kleep kullekin. Asennus kullekin ympäristölle

Tuotantokauppa — Pääkauppa, täysin konfiguroitu
Staging/kehityskaupat — Testaukseen ennen tuotantoon siirtämistä

Kullekin ympäristölle:

Asenna Kleep-sovellus
Ota App Embed käyttöön
Ota yhteyttä Kleep-CSM:äsi ympäristön yhdistämiseksi tiliisi

Testaa aina muutokset stagingissa ennen tuotantoon soveltamista.

Ympäristökohtaiset URL:t Anna Kleep-CSM:llesi:

Tuotanto-URL: https://www.yourbrand.com
Staging-URL: https://staging.yourbrand.com (jos sovellettavissa)
Kehitys-URL: https://dev.yourbrand.com (jos sovellettavissa)

7.5 CTA-painike ja samankaltaiset tuotteet — Täydellinen asennusopas

Täydellinen tekninen viite Kleep CTA -painikkeen ja Samankaltaiset tuotteet -ominaisuuden asentamiseen (mukaan lukien kaikki Liquid-koodi, asetuskaavio ja toissijaisen painikkeen asetukset) löytyy alla olevasta erillisestä oppaasta: CTA-painike ja samankaltaiset tuotteet — Täydellinen asennusopas

8. Vintage-teemat - Kokoopas-asetukset

Vintage-teemat (kutsutaan myös “vanhoiksi” tai ennen Online Store 2.0:aa luoduiksi) eivät tue App Blocks -lohkoja. Asennus vaatii Liquid-koodimuutoksia.

Tämä osio vaatii Shopify-kehitystietämystä (Liquid).

Edellytykset

Pääsy teemakoodieditoriin (Verkkokauppa → Teemat → Muokkaa koodia)
Kleep App Embed on oltava käytössä Shopify-hallinnossasi (Verkkokauppa → Teemat → Mukauta → Sovellusupotukset → Kleep)

Vaihe 1: Ota App Embed käyttöön Shopify-hallinnossasi siirry kohtaan Verkkokauppa → Teemat → Mukauta → Sovellusupotukset ja kytke Kleep-sovellus päälle. Vaihe 2: Kutsu katkelma Liitä seuraava koodi sinne, missä haluat Kleepin näkyvän. Sen on oltava osa Product info -lohkoa snippets-kansiossa:

Koodi

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

Vaihe 3: Luo painikekatkelmä Luo uusi tiedosto nimeltä kleep-button.liquid snippets-kansiossasi. Laita seuraava sisältö siihen:

Koodi

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

Vaihe 4: Lisää asetuskaavio Lisää seuraavat asetukset asetuskaavioosi osiotiedoston loppuun:

Koodi

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

Vaihe 5: Validoi Validoi päivitykset Shopify-teeman mukauttamisalueella. Konfiguroi visuaaliset asetukset tuotetietolohkon asetuksissa. Valinnainen: Toissijainen painike Jos haluat lisätä toissijaisen painikkeen, luo uusi tiedosto nimeltä kleep-secondary-button.liquid snippets-kansiossasi:

Koodi

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

Liitä seuraava koodi sinne, missä haluat Kleepin näkyvän. Sen on oltava osa Product info -lohkoa snippets-kansiossa.

Koodi

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

9. Vintage-teemat - Samankaltaiset tuotteet -asetukset

Vaihe 1: Luo katkelma Luo tiedosto snippets/kleep-similar-button.liquid seuraavalla koodilla:

Koodi

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

Vaihe 2: Renderöi katkelma Lisää tämä rivi sinne, missä haluat painikkeen näkyvän:

Koodi

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

Tyypillinen sijoituspaikka: varianttivaihtoehtojen alla tai Lisää ostoskoriin -lomakkeen lähellä. Vaihe 3: Ota oikea tila käyttöön Koska vintage-teemat eivät voi lisätä OS 2.0 -lohkoja, widgetin on käytettävä jotakin seuraavista:

custom_buttons
popup+custom
button+custom

Useiden painikkeiden lisääminen Useiden painikkeiden luomiseksi sijoita katkelmakoodi eri kohtiin tuotesivupohjaa:

Koodi

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

Jokainen katkelmakutsu luo lisäpainikkeen. Jokainen painike ilmestyy automaattisesti vain, kun valittu variantti on loppuunmyyty.

10. Käännökset (i18n)

Lisää seuraavat käännökset teemasi kielitiedostoihin. Englanti (en.json)

Koodi

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

Ranska (fr.json)

Koodi

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

Italia (it.json)

Koodi

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

Saksa (de.json)

Koodi

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

Espanja (es.json)

Koodi

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

Japani (ja.json)

Koodi

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

Korea (ko.json)

Koodi

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

Portugali (pt.json)

Koodi

{
  "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. Tekninen viite

CTA:n sijainti PDP:llä Sijainti määritellään DOM-valitsimilla KleepSDK.getConstants()-funktiossa:

targetProductInfoBlockQueries – Valitsimien taulukko, joka osoittaa tuotetietojen pääsäiliöön (otsikko, hinta, koot jne.). Skripti iteroi näiden valitsimien läpi ja käyttää ensimmäistä löytämäänsä CTA:n tai ponnahdusikkunoiden lisäyspisteenä.
targetVariantQueries – Missä koko-/varianttivaihtoehdot sijaitsevat. Kun tuotetietolohko on löydetty, skripti etsii sen sisältä varianttielementtejä (kuten kokovaihtoehtoja). Jokainen variantti <label> (tai vastaava) tulee ponnahdusikkunan CTA:n kiinnityskohteeksi.

Ponnahdusikkuna vs. Painike (Työpöytä vs. Mobiili) Laitetyyppi havaitaan checkIfMobile()-funktiolla: Tämä funktio tarkistaa selaimen navigator.userAgent-merkkijonon mobiililaitteiden luetteloa vasten (esim. iPhone, Android, iPad).

Työpöytä: CTA näytetään hoveraus-ponnahdusikkunoina varianttitunnisteiden vieressä
Mobiili: Skripti korvaa hoveraus-ponnahdusikkunat yksittäisellä painikkeella, koska hoveraus-vuorovaikutukset eivät toimi kosketusnäytöillä

Tuoteviittauksen konfiguraatio Kleep käyttää tuoteviittauksia tuotteiden yhdistämiseen koko katalogiasi. Konfiguroi niiden tunnistaminen: Viitekenttä: Mistä löytää brändin tuoteviittaus

Shopify SKU -kenttä
Metafield (määrittele mikä)
Tagit (etuliitteellä, esim. ref:ABC123)

Päätuotteen erottaminen: Kuinka johtaa päätuote-ID variantin SKU:ista

Esimerkki: Jos variantin SKU:t ovat ABC123-S, ABC123-M, ABC123-L, päätuoteviittaus on ABC123
Sääntö: Ota ensimmäiset 6 merkkiä / Jaa ja ota ensimmäinen osa / Mukautettu regex

Konfiguroi tämä kohdassa Kleep Dashboard → Asetukset → Tuoteviittaukset. Mukautushuomiot

Muita sijoittelu-/asetteluvaihtoehtoja ei tarjota valitsimien ja CSS:n säätämisen lisäksi
Ulkoasun muuttamiseksi (värit, välistys, fontit jne.) liitä CSS:si “Syötä mukautetut CSS-tyylit” -kenttään Kleep App Embed -asetuksissa

12. Julkaisutarkistuslista

Ennen julkaisua tarkista seuraavat: Painikkeen näyttö

Painike näkyy vähintään 3 tuotesivulla
Painike toimii sekä työpöydällä ETTÄ mobiilissa
Ei CSS-konflikteja (painike ei ole piilotettu tai väärin kohdistettu)
Ei Cumulative Layout Shift (CLS) -ongelmia — painike ei aiheuta sivun hyppäämistä
Vain vintage-teemat: Commit viitattu versionhallinnassa

Datan laatu

>98% tuotteista on kartoitettu kokoopas
<1% varianteista puuttuvat mitat
0 orpo-SKU:ta (tuotteet ilman kategoriamappausta)

Seuranta

Kaikki 5 tapahtumaa laukeavat oikein
Täydellinen käyttäjäpolku seurattu (painike → suositus → ostoskori)
Hyötykuormat validoitu

Suorituskyky

JS-virheitä < 1%
API-viive P95 < 500ms
Monitorointi käytössä

Käyttäjäpolku

Kokoopas avautuu oikein
Suositukset näkyvät oikein
Ostoskoriin lisääminen toimii kokoppaasta
Samankaltaiset tuotteet näkyvät (jos käytössä)
Responsiivinen kaikilla laitteilla

✅ Kun kaikki kohdat on tarkistettu, ilmoita Kleep-CSM:llesi lopullista QA-validointia varten ennen julkaisua.

13. Vianmääritys

Painike ei näy

☑️ Tarkista, että Kleep App Embed on käytössä (kytkin PÄÄLLÄ)
☑️ Varmista, että tallensit teemamuutokset
☑️ Tyhjennä selaimen välimuisti ja lataa sivu uudelleen
☑️ Tarkista, että tuotteella on kokovariantit konfiguroitu

Samankaltaiset tuotteet ei näy

☑️ Tarkista, ettei tila ole asetettu “Poistettu käytöstä” asetuksissa
☑️ Painikkeet näkyvät vain, kun variantti on loppuunmyyty
☑️ “Mukautettu”-tiloissa tarkista, että olet lisännyt App Block -lohkon

Haku ei toimi

☑️ Tarkista, että “Ota mukautettu haku käyttöön” on käytössä App Embedissa
☑️ Varmista, että olet lisännyt Kleep Search -lohkon Haku-malliin
☑️ Tarkista, että natiivi haku on piilotettu

En löydä Kleep App Blocks -lohkoja Jos et näe Kleep-lohkoja “Sovellukset”-välilehdessä napsauttaessasi “Lisää lohko”, teemasi on todennäköisesti vintage-teema. Katso osiot 11–12 vaihtoehtoisia asennusohjeita varten. Datamappausongelmat

☑️ Tarkista, että tuotedata sisältää odotetut kentät (tagit, metafieldejä jne.)
☑️ Tarkista mappaukset kohdassa Kleep Dashboard → Asetukset → Datamappaus
☑️ Suorita uudelleen tuoteskannaus havaittujen arvojen päivittämiseksi

Tapahtumat eivät laukea

☑️ Tarkista selaimen konsoli JavaScript-virheiden varalta
☑️ Tarkista, ettei mainosblokkeri tai tietosuojalaajennus estä Kleep-pyyntöjä
☑️ Testaa incognito-tilassa

Ota yhteyttä tukeen Jos kohtaat ongelmia, joita ei ole lueteltu täällä, ota yhteyttä Kleep-tiimiin:

📧 Sähköposti: support@kleep.ai

Kiitos Kleepin käytöstä! 🎉

Tiimimme on täällä auttamassa sinua kokoppaan asennuksessa ja optimoinnissa.---

Evästeet ja tietosuoja

Kleep on täysin kävijän suostumuksen takana: skripti latautuu vasta sen jälkeen, kun suostumus on kerätty CMP:n kautta, ja sinun on ehdollistettava sen lataaminen vastaavasti. Täydellinen luettelo seuraimista, käsitellyistä tiedoista, tarkoituksista ja oikeusperusteista, isännöinnistä, alikäsittelijöistä ja tietoturvasta löytyy kohdasta Evästeet, CMP ja tietosuoja.

​Integraatioprosessin yleiskatsaus

​Käyttöönotto

​Asennus ja testaus

​Integraation jälkeen

​1. Toiminnallisuudet

​2. Samankaltaiset tuotteet -ominaisuus

​3. Kleep Search -ominaisuus

​4. Palautusten integraatio (valinnainen)

​5. Tapahtumaseuranta ja analytiikka

​6. CSS-mukauttaminen

​7. Useita ympäristöjä

​7.5 CTA-painike ja samankaltaiset tuotteet — Täydellinen asennusopas

​8. Vintage-teemat - Kokoopas-asetukset

​9. Vintage-teemat - Samankaltaiset tuotteet -asetukset

​10. Käännökset (i18n)

​11. Tekninen viite

​12. Julkaisutarkistuslista

​13. Vianmääritys

​Kiitos Kleepin käytöstä! 🎉

​Evästeet ja tietosuoja

Integraatioprosessin yleiskatsaus

Käyttöönotto

Asennus ja testaus

Integraation jälkeen

1. Toiminnallisuudet

2. Samankaltaiset tuotteet -ominaisuus

3. Kleep Search -ominaisuus

4. Palautusten integraatio (valinnainen)

5. Tapahtumaseuranta ja analytiikka

6. CSS-mukauttaminen

7. Useita ympäristöjä

7.5 CTA-painike ja samankaltaiset tuotteet — Täydellinen asennusopas

8. Vintage-teemat - Kokoopas-asetukset

9. Vintage-teemat - Samankaltaiset tuotteet -asetukset

10. Käännökset (i18n)

11. Tekninen viite

12. Julkaisutarkistuslista

13. Vianmääritys

Kiitos Kleepin käytöstä! 🎉

Evästeet ja tietosuoja