> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kleep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<Steps>
  <Step title="Sopimus allekirjoitettu ja laskutus asetettu">
    Kun sopimus on allekirjoitettu, Kleep-edustajasi käynnistää laskutuksen GoCardlessin kautta: [Aseta suoraveloitus →](https://pay.gocardless.com/BRT000352V7T67Q).
  </Step>

  <Step title="Käyttöönottokäynnistyspalaveri">
    Lyhyt puhelu Kleep-edustajasi kanssa aikataulun, teknisten yhteyshenkilöiden ja kauppakohtaisten vaatimusten yhdenmukaistamiseksi ennen asennuksen aloittamista.
  </Step>

  <Step title="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 →](https://ihu3s9tz3r8.typeform.com/to/fYQw9zJ5)**

    Se kestää noin 5 minuuttia. Kun olet lähettänyt sen, tiimimme tarkistaa vastauksesi ja vahvistaa seuraavat vaiheet yhden arkipäivän kuluessa.
  </Step>

  <Step title="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.

    <Note>
      **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.
    </Note>

    <Tip>
      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ä](https://help.shopify.com/en/manual/your-account/staff-accounts/collaborator-accounts) lisätietoja varten.
    </Tip>
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="Valitse CTA:n sijoituspaikka">
    Tarkista ehdottamamme sijainnit "Löydä kokoni" -painikkeelle ja valitse sinulle sopiva: [CTA:n sijoittelu Figmassa →](https://www.figma.com/design/DvsqgNPSjVPVPLjKV2efAY/KLEEP-CTA-POSITIONING-SUGGESTIONS?node-id=0-1\&p=f\&t=92MwlxQkzlfAYyk5-0).
  </Step>
</Steps>

### Asennus ja testaus

<Steps>
  <Step title="Asennamme Kleepin kopioituun teemaan">
    Tiimimme kopioi nykyisen Shopify-teemasi ja asentaa Kleepin kopioituun versioon, jotta live-kauppasi pysyy koskemattomana testauksen aikana.
  </Step>

  <Step title="Esikatselu ja palaute">
    Lähetämme sinulle yksityisen esikatselulinkin integraation testaamiseksi alusta loppuun ja mahdollisten palautteiden tai säätöjen jakamiseksi.
  </Step>

  <Step title="Julkaisu">
    Kun olet hyväksynyt, julkaisemme Kleepin live-teemaasi.
  </Step>
</Steps>

### Integraation jälkeen

<Steps>
  <Step title="Asiakkaan koontinäyttöön pääsy">
    Tarjoamme kirjautumistiedot tiimillesi [Kleep Dashboard](https://dashboard.kleep.ai) -pääsyä varten, jossa voit seurata Kleepin suorituskyky-KPI:tä reaaliajassa.
  </Step>

  <Step title="Fit Feedback käytössä">
    Otamme käyttöön [Fit Feedback](/fi/dashboard/fit-feedback) koontinäytössäsi, jotta tiimisi voi tarkentaa Kleepin kokosuosituksia todellisten sovitusdatojen avulla.
  </Step>
</Steps>

## 1. Toiminnallisuudet

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

1. Lisätä CTA:n "Löydä kokoni" tuotesivuillesi
2. 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.

<img src="https://mintcdn.com/kleepai/A9OHiEXCm7A82FUt/images/shopify/Screenshot_2025-12-09_at_11.48.24.png?fit=max&auto=format&n=A9OHiEXCm7A82FUt&q=85&s=71a8da20dfbd06b799dbca4a765df6ad" alt="Screenshot_2025-12-09_at_11.48.24.png" width="764" height="688" data-path="images/shopify/Screenshot_2025-12-09_at_11.48.24.png" />

Samankaltaisten tuotteiden tilan valinta

**Mukautettujen painikkeiden lisääminen (mukautetuille tiloille)**

Jos olet valinnut tilan, jossa on "mukautettu", voit lisätä painikkeita tiettyihin sijainteihin:

1. Siirry teemaeditorissa **Tuotesivu**-malliin
2. Halutussa osiossa napsauta **Lisää lohko**
3. Napsauta **Sovellukset**-välilehteä ja valitse **"Kleep Similar Button"**
4. Aseta lohko haluamaasi kohtaan ja tallenna

<img src="https://mintcdn.com/kleepai/A9OHiEXCm7A82FUt/images/shopify/image.png?fit=max&auto=format&n=A9OHiEXCm7A82FUt&q=85&s=702709e1425b0491e6fc7304f4bc159b" alt="image.png" width="1232" height="1370" data-path="images/shopify/image.png" />

Lisää Kleep Similar Button -lohko

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

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

<img src="https://mintcdn.com/kleepai/A9OHiEXCm7A82FUt/images/shopify/Screenshot_2025-07-28_at_17.17.44.png?fit=max&auto=format&n=A9OHiEXCm7A82FUt&q=85&s=fe4dd72d40e2509386943c6e06a7a74b" alt="Screenshot_2025-07-28_at_17.17.44.png" width="670" height="352" data-path="images/shopify/Screenshot_2025-07-28_at_17.17.44.png" />

Ota mukautettu haku käyttöön

**Vaihe 2: Avaa hakumalli**

Teemaeditorissa napsauta yläosan pudotusvalikkoa (oletuksena "Etusivu") ja valitse **"Haku"** mallien luettelosta.

<img src="https://mintcdn.com/kleepai/A9OHiEXCm7A82FUt/images/shopify/Screenshot_2025-07-28_at_17.18.59.png?fit=max&auto=format&n=A9OHiEXCm7A82FUt&q=85&s=76395c46acc49c26150ab7a7d08cb4ec" alt="Screenshot_2025-07-28_at_17.18.59.png" width="866" height="1312" data-path="images/shopify/Screenshot_2025-07-28_at_17.18.59.png" />

Valitse hakumalli

**Vaihe 3: Piilota natiivi haku**

Malliosassa piilota tai poista natiivi **"Hakutulokset"**-lohko napsauttamalla silmäkuvaketta.

<img src="https://mintcdn.com/kleepai/A9OHiEXCm7A82FUt/images/shopify/Screenshot_2025-07-28_at_17.19.32.png?fit=max&auto=format&n=A9OHiEXCm7A82FUt&q=85&s=a4b655a4d77c40f100179263320f0a5f" alt="Screenshot_2025-07-28_at_17.19.32.png" width="712" height="726" data-path="images/shopify/Screenshot_2025-07-28_at_17.19.32.png" />

Piilota natiivi haku

**Vaihe 4: Lisää Kleep Search -lohko**

Napsauta **Lisää osio**, sitten **Sovellukset**-välilehdessä valitse **"Haku"** (kleep-dev).

<img src="https://mintcdn.com/kleepai/A9OHiEXCm7A82FUt/images/shopify/Screenshot_2025-07-28_at_17.19.48.png?fit=max&auto=format&n=A9OHiEXCm7A82FUt&q=85&s=3b174132b77b5679a051bcc58668374d" alt="Screenshot_2025-07-28_at_17.19.48.png" width="1270" height="656" data-path="images/shopify/Screenshot_2025-07-28_at_17.19.48.png" />

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.

<img src="https://mintcdn.com/kleepai/A9OHiEXCm7A82FUt/images/shopify/Screenshot_2025-08-13_at_13.29.19.png?fit=max&auto=format&n=A9OHiEXCm7A82FUt&q=85&s=ba48a7ba9d4dc8f7531fe8ca0224f663" alt="Screenshot_2025-08-13_at_13.29.19.png" width="316" height="654" data-path="images/shopify/Screenshot_2025-08-13_at_13.29.19.png" />

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

1. Kleep Dashboardissa siirry kohtaan **Asetukset → Palautukset**
2. Valitse palautuspalveluntarjoajasi
3. Seuraa palveluntarjoajakohtaisia ohjeita tilisi yhdistämiseksi

<Note>
  Jos palveluntarjoajasi ei ole luettelossa, ota yhteyttä osoitteessa [support@kleep.ai](mailto:support@kleep.ai) — voimme asettaa mukautetun integraation SFTP:n tai API:n kautta.
</Note>

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

1. Avaa selaimen kehittäjätyökalut (F12)
2. Siirry **Verkko**-välilehteen
3. Suodata "kleep"
4. Vuorovaikuta kokoopas-painikkeen kanssa
5. Sinun pitäisi nähdä API-kutsuja jokaiselle tapahtumalle

<Warning>
  **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.
</Warning>

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

<img src="https://mintcdn.com/kleepai/A9OHiEXCm7A82FUt/images/shopify/Screenshot_2025-08-13_at_13.25.30.png?fit=max&auto=format&n=A9OHiEXCm7A82FUt&q=85&s=ccffae57f877aff1babb42797a3f11ad" alt="Screenshot_2025-08-13_at_13.25.30.png" width="310" height="366" data-path="images/shopify/Screenshot_2025-08-13_at_13.25.30.png" />

Mukautettu CSS-kenttä

**Esimerkki mukautuksesta**

<Accordion title="Koodi">
  ```css theme={null}
  .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;
  }
  ```
</Accordion>

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

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

Kullekin ympäristölle:

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

<Tip>
  Testaa aina muutokset stagingissa ennen tuotantoon soveltamista.
</Tip>

**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](/fi/cms/cta-button)

***

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

<Warning>
  Tämä osio vaatii Shopify-kehitystietämystä (Liquid).
</Warning>

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

<Accordion title="Koodi">
  ```jsx theme={null}
  {% render 'kleep-button', cms: section.settings %}
  ```
</Accordion>

**Vaihe 3: Luo painikekatkelmä**

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

<Accordion title="Koodi">
  ```jsx theme={null}
  <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>
  ```
</Accordion>

**Vaihe 4: Lisää asetuskaavio**

Lisää seuraavat asetukset asetuskaavioosi osiotiedoston loppuun:

<Accordion title="Koodi">
  ```json theme={null}
  {
    "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
      }
  ```
</Accordion>

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

<Accordion title="Koodi">
  ```jsx theme={null}
  <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>
  ```
</Accordion>

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

<Accordion title="Koodi">
  ```jsx theme={null}
  {% render 'kleep-secondary-button', cms: section.settings %}
  ```
</Accordion>

***

## 9. Vintage-teemat - Samankaltaiset tuotteet -asetukset

**Vaihe 1: Luo katkelma**

Luo tiedosto `snippets/kleep-similar-button.liquid` seuraavalla koodilla:

<Accordion title="Koodi">
  ```jsx theme={null}
  {% 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>
  ```
</Accordion>

**Vaihe 2: Renderöi katkelma**

Lisää tämä rivi sinne, missä haluat painikkeen näkyvän:

<Accordion title="Koodi">
  ```jsx theme={null}
  {% render 'kleep-similar-button' %}
  ```
</Accordion>

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:

<Accordion title="Koodi">
  ```jsx theme={null}
  {% render 'kleep-similar-button' %}
  ```
</Accordion>

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`)**

<Accordion title="Koodi">
  ```json theme={null}
  {
    "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"
            }
          }
        }
      }
  ```
</Accordion>

**Ranska (`fr.json`)**

<Accordion title="Koodi">
  ```json theme={null}
  {
    "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"
            }
          }
        }
      }
  ```
</Accordion>

**Italia (`it.json`)**

<Accordion title="Koodi">
  ```json theme={null}
  {
    "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"
        }
      }
    }
  }
  ```
</Accordion>

**Saksa (`de.json`)**

<Accordion title="Koodi">
  ```json theme={null}
  {
    "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"
        }
      }
    }
  }
  ```
</Accordion>

**Espanja (`es.json`)**

<Accordion title="Koodi">
  ```json theme={null}
  {
    "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"
        }
      }
    }
  }
  ```
</Accordion>

**Japani (`ja.json`)**

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

**Korea (`ko.json`)**

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

**Portugali (`pt.json`)**

<Accordion title="Koodi">
  ```json theme={null}
  {
    "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"
        }
      }
    }
  }
  ```
</Accordion>

***

## 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ö**

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

**Datan laatu**

* [ ] &#x20;\>98% tuotteista on kartoitettu kokoopas
* [ ] &#x20;\<1% varianteista puuttuvat mitat
* [ ] &#x20;0 orpo-SKU:ta (tuotteet ilman kategoriamappausta)

**Seuranta**

* [ ] &#x20;Kaikki 5 tapahtumaa laukeavat oikein
* [ ] &#x20;Täydellinen käyttäjäpolku seurattu (painike → suositus → ostoskori)
* [ ] &#x20;Hyötykuormat validoitu

**Suorituskyky**

* [ ] &#x20;JS-virheitä \< 1%
* [ ] &#x20;API-viive P95 \< 500ms
* [ ] &#x20;Monitorointi käytössä

**Käyttäjäpolku**

* [ ] &#x20;Kokoopas avautuu oikein
* [ ] &#x20;Suositukset näkyvät oikein
* [ ] &#x20;Ostoskoriin lisääminen toimii kokoppaasta
* [ ] &#x20;Samankaltaiset tuotteet näkyvät (jos käytössä)
* [ ] &#x20;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](mailto: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](/fi/cookie-consent).