Shopify: CTA-painike ja samankaltaiset tuotteet

Shopify V2 -integrointiopas

Tässä osiossa näytetään, kuinka lisätä Kleep AI Sizing Shopify-kauppaasi.

Vaihe vaiheelta videoläpikäynti

Seuraa Tango-opastamme lisätäksesi Kleep-painikkeen kauppaasi Online Store 2.0 -teemoilla.

Shopify V1 -integrointiopas

1. Koon määrittäminen

Tässä osiossa näytetään, kuinka lisätä Kleep AI Sizing Shopify-koodikantaasi.

Haluatko visuaalisen läpikäynnin?

Katso vaihe vaiheelta Tango-opas Kleepin asentamiseen Shopify V1 -kauppaan.

Vaiheet

Vaihe 1: Ota App Embed käyttöön Varmista, että Kleep-sovellus on aktivoitu sovellusupotuksissa.

Capture d’écran 2025-08-13 à 14.29.30.png

Vaihe 2: Renderöi painikekatkelmä Liitä seuraava koodi sinne, missä haluat Kleepin näkyvän. Sen on oltava osa Product info -lohkoa snippets-kansiossa.

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

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

Kleep-painike

<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ää asetuskaaviovaihtoehdot Lisää seuraavat vaihtoehdot asetuskaavioosi sivun loppuun:

Shopify-asetukset

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

Lisätäksesi omia CSS-tyylejä:

Muuttaaksesi ulkoasua (värit, välistys, fontit jne.) liitä CSS:si “Input custom CSS styles” -kenttään Kleep App Embed -asetuksissa.

Esimerkiksi:

Vaihe 5: Lisää englanninkieliset käännökset Lisää englanninkieliset käännökset teemasi kieliasetuksiin.

Käännökset

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

Vaihe 6: Lisää muut kielikäännökset Lisää muut käännökset teemasi kieliasetuksiin.

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

Validoi päivitykset Shopify-teeman mukauttamisalueella. Konfiguroi visuaaliset asetukset tuotetietolohkon asetuksissa.
Jos haluat lisätä toissijaisen painikkeen, sinun on luotava uusi tiedosto nimeltä kleep-secondary-button.liquid snippets-kansiossasi. Laita seuraava sisältö siihen:

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

Render-katkelma

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

2. Samankaltaiset tuotteet

Asenna “Samankaltaiset tuotteet” V1 Shopify -teemoihin

Tässä tapauksessa sinun on lisättävä Liquid-katkelma manuaalisesti.

Vaihe 1 - Luo katkelma

Luo: snippets/kleep-similar-button.liquid Lisää seuraava koodi:

Samankaltaisten tuotteiden painikekodi

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

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

Render-katkelma

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

Tyypillinen sijoituspaikka: varianttivaihtoehtojen alla tai Lisää ostoskoriin -lomakkeen lähellä.

Vaihe 3 - Ota oikea tila käyttöön V1-teemoille

Koska V1-teemat eivät voi lisätä OS2.0-lohkoja, widgetin on käytettävä jotakin seuraavista:

custom_buttons
popup+custom
button+custom

Asenna “Samankaltaiset tuotteet” V2 (Online Store 2.0) -kaupoille

Nykyaikaiset Shopify-teemat tukevat sovellusupotuksia ja mukautettuja lohkoja. Koodimuutoksia ei tarvita.

Vaihe 1 — Ota Kleep App Embed käyttöön

Siirry kohtaan Verkkokauppa → Teemat → Mukauta.
Avaa Sovellusupotukset-osio.
Ota Kleep-sovellus käyttöön.
Tallenna teema.

Tämä aktivoi ydiskriptin, joka hallinnoi Samankaltaiset tuotteet -logiikkaa.

Seuraavaksi etsi ”Näytä suositellut tuotteet”

Vaihe 2 — Valitse Samankaltaiset tuotteet -näyttötila

Kleep-widgetin konfiguraatiossa valitse, miten Samankaltaiset tuotteet näkyvät tuotesivulla:

disabled – poistaa ominaisuuden kokonaan käytöstä
popup – lisää automaattisesti ponnahdusikkunan variantti-/kokovaihtoehtojen yläpuolelle työpöydällä ja korvaa oletusnappulan mobiilissa
button – lisää automaattisesti CTA-painikkeen Lisää ostoskoriin -alueen lähelle, kun valittu variantti on loppuunmyyty
custom_buttons – poistaa kaiken automaattisen sijoittelun; kauppiaan on lisättävä yksi tai useampi “Kleep Similar Button” -lohko manuaalisesti
popup+custom – pitää automaattisen ponnahdusikkunan ja ottaa myös käyttöön teemaan lisätyt mukautetut painikkeet
button+custom – pitää automaattisen CTA-painikkeen ja ottaa myös käyttöön teemaan lisätyt mukautetut painikkeet

Sen jälkeen tallenna vain teema, ja se ilmestyy välittömästi kauppaasi (tuotesivu). Vaihe 3 — Lisää mukautetut painikkeet (vain custom_buttons, popup+custom, button+custom) Jos valittu tila sisältää mukautettuja painikkeita:

Avaa Verkkokauppa → Mukauta.
Siirry Tuotesivu-malliin.
Halutussa osiossa napsauta Lisää lohko.
Valitse Kleep Similar Button.
Tallenna teema.

Mukautetut painikkeet näkyvät vain, kun valittu variantti on loppuunmyyty.

Useiden “Samankaltaiset tuotteet” -painikkeiden lisääminen (ensisijainen ja toissijainen)

Voit lisätä minkä tahansa määrän Samankaltaiset tuotteet -painikkeita tuotesivulle. Tämä toimii sekä OS 2.0 -teemoissa että V1/vanhoissa teemoissa.

Ota käyttöön tila, joka tukee mukautettuja painikkeita

Useiden painikkeiden sallimiseksi widgetin on oltava asetettu johonkin seuraavista:

custom_buttons
popup+custom
button+custom

Nämä tilat aktivoivat manuaalisen sijoittelun, joten kauppias voi lisätä niin monta painiketta kuin tarvitaan.

Online Store 2.0 -kaupoille (nykyaikaiset teemat)

OS 2.0 -teemat mahdollistavat painikkeiden lisäämisen visuaalisesti teemaeditorin kautta. Vaiheet:

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

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

V1/vanhoille teemoille

Vanhat teemat eivät tue lohkoja, mutta voit renderöidä katkelman useita kertoja. Lisää tämä katkelma sinne, missä haluat painikkeen: {% render 'kleep-similar-button' %} Useiden painikkeiden luomiseksi sijoita tämä koodi tuotesivupohjan eri alueille. Jokainen katkelmakutsu luo lisäpainikkeen.

Yhteenveto

Useiden Samankaltaiset tuotteet -painikkeiden lisäämiseksi: Ota käyttöön jokin mukautettuja painikkeita tukeva tila → lisää useita OS 2.0 -lohkoja tai useita katkelmakutsuja → kaikki painikkeet toimivat automaattisesti, kun variantti on loppuunmyyty.

CTA:n sijainti PDP:llä Sijainti määritellään DOM-valitsimilla KleepSDK.getConstants()-funktiossa. targetProductInfoBlockQueries – missä tuotetiedot sijaitsevat. Tämä on 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).

Jos kyseessä on työpöytä, CTA näytetään hoveraus-ponnahdusikkunoina varianttitunnisteiden vieressä.
Jos kyseessä on mobiili, skripti korvaa hoveraus-ponnahdusikkunat yksittäisellä painikkeella, koska hoveraus-vuorovaikutukset eivät toimi kosketusnäytöillä.

Mukauttaminen

Muita sijoittelu-/asetteluvaihtoehtoja ei tarjota valitsimien ja CSS:n säätämisen lisäksi.
Muuttaaksesi ulkoasua (värit, välistys, fontit jne.) liitä CSS:si “Input custom CSS styles” -kenttään Kleep App Embed -asetuksissa.

3. Haku

Huomio: Sinun ei tarvitse muuttaa teemakoodia Kleep Searchin asettamiseksi Shopify V1:ssä. Avaa Teemaeditori, ota käyttöön Kleep App Embed, ota käyttöön Mukautettu haku, sitten korvaa oletusnappulan hakublokki Kleep Search -blokilla. Muuttaaksesi ulkoasua (värit, välistys, fontit jne.) liitä CSS:si ”Input custom CSS styles” -kenttään Kleep App Embed -asetuksissa. Kaikki nämä asiat on kuvattu alla Avaa teemaeditori Siirry kohtaan Verkkokauppa > Teemat, etsi teema, jota haluat muokata, ja napsauta Mukauta. Ota Kleep App Embed käyttöön Avaa Sovellusupotukset-osio. Etsi Kleep-sovellus ja kytke se päälle. Ota mukautettu haku käyttöön (valinnainen) Ota Kleep-asetuksissa käyttöön “Enable custom search”.

Korvaa oletusnappulan haku Avaa teemaeditorista Haku-malli (siirry Hakusivun malliin).

Poista tai piilota oletusnappulan hakuosio teemasta.

Lisää Kleep Search -blokki (Sovellukset-välilehdestä) ja sijoita se sinne, missä oletusnappulan haku oli.

Tallenna teemamuutokset. Hakuominaisuus on integroitu Liquid-osiona sovelluksessa, ei erillisenä Liquid-koodina. Aktivointi ohjataan:

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

Tämä varmistaa, että vain tietyt kaupat (toimialueet) voivat ottaa hakuominaisuuden käyttöön.Asettelu ja tyylit

Ruudukko- vs. lista-näkymä vaihdetaan vain sovelluksen products_search_grid_layout -asetuksella.

Tee tämä siirtymällä jo lisättyyn hakuun ja oikealla puolella näet konfigurointiasetuksen

Lisätyylit (fontit, värit, välistys) toteutetaan meiltä koodissa, kauppakohtaisesti, tarvittaessa.
Kaikki toiminnallisuus on sidottu tähän Liquid-osioon ja otetaan käyttöön kleep_enable_custom_search-asetuksella sovelluksessa, ei lisäämällä Liquid-koodia teeman asetuksiin.
Muuttaaksesi ulkoasua (värit, välistys, fontit jne.) liitä CSS:si “Input custom CSS styles” -kenttään Kleep App Embed -asetuksissa.

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.

Tervetuloa

CMS

Mobiili

Hallintapaneeli

Tiedot

Tietosuoja

Shopify: CTA-painike ja samankaltaiset tuotteet

Shopify V2 -integrointiopas

Vaihe vaiheelta videoläpikäynti

Shopify V1 -integrointiopas

1. Koon määrittäminen

Haluatko visuaalisen läpikäynnin?

Vaiheet

2. Samankaltaiset tuotteet

Asenna “Samankaltaiset tuotteet” V1 Shopify -teemoihin

Vaihe 1 - Luo katkelma

Vaihe 2 - Renderöi katkelma tuotepohjaan

Vaihe 3 - Ota oikea tila käyttöön V1-teemoille

Asenna “Samankaltaiset tuotteet” V2 (Online Store 2.0) -kaupoille

Vaihe 1 — Ota Kleep App Embed käyttöön

Vaihe 2 — Valitse Samankaltaiset tuotteet -näyttötila

Useiden “Samankaltaiset tuotteet” -painikkeiden lisääminen (ensisijainen ja toissijainen)

Ota käyttöön tila, joka tukee mukautettuja painikkeita

Online Store 2.0 -kaupoille (nykyaikaiset teemat)

V1/vanhoille teemoille

Yhteenveto

3. Haku

Evästeet ja tietosuoja

​Shopify V2 -integrointiopas

Vaihe vaiheelta videoläpikäynti

​Shopify V1 -integrointiopas

​1. Koon määrittäminen

Haluatko visuaalisen läpikäynnin?

​Vaiheet

​2. Samankaltaiset tuotteet

​Asenna “Samankaltaiset tuotteet” V1 Shopify -teemoihin

​Vaihe 1 - Luo katkelma

​Vaihe 2 - Renderöi katkelma tuotepohjaan

​Vaihe 3 - Ota oikea tila käyttöön V1-teemoille

​Asenna “Samankaltaiset tuotteet” V2 (Online Store 2.0) -kaupoille

​Vaihe 1 — Ota Kleep App Embed käyttöön

​Vaihe 2 — Valitse Samankaltaiset tuotteet -näyttötila

​Useiden “Samankaltaiset tuotteet” -painikkeiden lisääminen (ensisijainen ja toissijainen)

​Ota käyttöön tila, joka tukee mukautettuja painikkeita

​Online Store 2.0 -kaupoille (nykyaikaiset teemat)

​V1/vanhoille teemoille

​Yhteenveto

​3. Haku

​Evästeet ja tietosuoja

Shopify V2 -integrointiopas

Shopify V1 -integrointiopas

1. Koon määrittäminen

Vaiheet

2. Samankaltaiset tuotteet

Asenna “Samankaltaiset tuotteet” V1 Shopify -teemoihin

Vaihe 1 - Luo katkelma

Vaihe 2 - Renderöi katkelma tuotepohjaan

Vaihe 3 - Ota oikea tila käyttöön V1-teemoille

Asenna “Samankaltaiset tuotteet” V2 (Online Store 2.0) -kaupoille

Vaihe 1 — Ota Kleep App Embed käyttöön

Vaihe 2 — Valitse Samankaltaiset tuotteet -näyttötila

Useiden “Samankaltaiset tuotteet” -painikkeiden lisääminen (ensisijainen ja toissijainen)

Ota käyttöön tila, joka tukee mukautettuja painikkeita

Online Store 2.0 -kaupoille (nykyaikaiset teemat)

V1/vanhoille teemoille

Yhteenveto

3. Haku

Evästeet ja tietosuoja