Shopify 導入ガイド

このガイドでは、Kleep を Shopify ストアにインストールする手順を説明します。Kleep は主に 3 つの機能を提供します：インテリジェントなサイズガイド（Kleep Sizing）、類似商品のレコメンド（Kleep Similar Products）、最適化された商品検索（Kleep Search）。

導入プロセスの概要

契約署名から本番公開まで、およびその後の流れをご説明します。エンドツーエンドの導入は通常、5〜6 週間かかります。

オンボーディング

契約締結＆請求設定

契約が締結されると、Kleep 担当者が GoCardless を通じて請求手続きを開始します：口座振替を設定する →

オンボーディングキックオフミーティング

Kleep 担当者との短いミーティングで、タイムライン・技術担当者・ストア固有の要件についてすり合わせを行います（インストール開始前）。

オンボーディングフォームへの記入

キックオフ後、会社情報・請求先・ストア環境・返品設定に関する詳細をご共有いただくようお願いします。オンボーディングフォームを記入する →所要時間は約 5 分です。送信後、弊社チームが回答内容を確認し、1 営業日以内に次のステップをご案内します。

Shopify URL とコラボレーターコードを共有する

ストアアドレス（例：your-store.myshopify.com）とコラボレーターリクエストコードをお送りください。

複数の Shopify ストアをお持ちの場合、複数の Shopify インスタンス（例：異なる地域やブランド）がある場合は、各ショップのコラボレーターコードをお送りください。ストアごとに 1 つのコードが必要です。

場所がわからない場合は、Shopify 管理画面で 設定 → ユーザーと権限 を開いてください。上部に myshopify.com の URL が表示され、コラボレーター セクションの下にコラボレーターリクエストコードがあります。詳細は Shopify のヘルプ記事「コラボレーターアカウント」をご参照ください。

コラボレーターリクエストを承認する

弊社の Shopify パートナーアカウントからコラボレーターアクセスリクエストを送信します。Shopify 管理画面の 設定 → ユーザーと権限 → コラボレーター から承認してください。

各ショップに Kleep アプリをインストールする

コラボレーターアクセスが付与されたら、各ストアのアプリインストールリンクをお送りします。Kleep を有効にしたいすべての Shopify ストアに個別にインストールする必要があります。

CTA の配置を選択する

「自分のサイズを見つける」ボタンの推奨配置を確認し、ストアフロントに合ったものを選んでください：CTA 配置 Figma →

インストール＆テスト

複製テーマへの Kleep インストール

弊社チームが現在の Shopify テーマを複製し、複製されたテーマに Kleep をインストールします。テスト中はライブストアに影響を与えません。

プレビュー＆フィードバック

エンドツーエンドで統合をテストするためのプライベートプレビューリンクをお送りします。フィードバックや修正が必要な点をお知らせください。

本番公開

承認後、ライブテーマに Kleep を公開します。

導入後

クライアントダッシュボードへのアクセス

Kleep ダッシュボードへのアクセス認証情報をチームに提供します。ここでリアルタイムに Kleep のパフォーマンス KPI を監視できます。

フィットフィードバックの有効化

フィットフィードバックをダッシュボードで有効化します。チームはリアルワールドのフィッティングデータを使って Kleep のサイズレコメンドを改善できます。

1. 機能

Kleep は、事前に作成されたカスタムアプリをインストールすることでストアに統合されます。以下が可能になります：

商品ページに「自分のサイズを見つける」CTA を追加
テーマエディタで UI を直接カスタマイズ

アプリは、商品・注文・返品データの自動フローも作成し、常に最新の状態を維持します。データは毎日取得されます。インストール時、アプリは WebPixel を作成し、ソリューションの ROI を算出するための各種指標を追跡します。

2. 類似商品機能

類似商品は、サイズが在庫切れの場合に代替商品を提案します。この機能は、関連する代替品を顧客に提供することでコンバージョンを向上させます。 利用可能な表示モード

モード	説明
ポップアップ（自動）	サイズホバー時の自動ポップアップ（デスクトップ）／ボタン（モバイル）
ボタン（自動）	在庫切れ時にカート付近に自動的に CTA ボタンを表示
カスタムボタンのみ	テーマエディタで手動でボタンを配置
ポップアップ＋カスタム	自動ポップアップ＋追加のカスタムボタン
ボタン＋カスタム	自動ボタン＋追加のカスタムボタン

設定 ステップ 1：表示モードの選択 Kleep アプリ埋め込み設定で、**「おすすめ商品を表示」**オプションを見つけ、ドロップダウンメニューから希望のモードを選択します。

類似商品モード選択 カスタムボタンの追加（カスタムモードの場合） 「カスタム」を含むモードを選択した場合、特定の場所にボタンを追加できます：

テーマエディタで商品ページテンプレートを開く
任意のセクションで ブロックを追加 をクリック
アプリ タブをクリックして 「Kleep Similar Button」 を選択
ブロックを好きな位置に配置して保存

Kleep Similar Button ブロックの追加

類似商品ボタンは、バリアントが在庫切れの場合にのみ表示されます。すべての商品に表示されなくても正常です。

複数ボタンの追加 商品ページには任意の数の類似商品ボタンを追加できます。複数ボタンを許可するには、ウィジェットを次のいずれかのモードに設定する必要があります：custom_buttons、popup+custom、button+custom。 OS 2.0 テーマの場合：

オンラインストア → カスタマイズ に移動
商品ページテンプレートを開く
ブロックを追加 → Kleep Similar Button をクリック
2 つ以上のボタンを追加したい場合は繰り返す

各ボタンは、選択されたバリアントが在庫切れの場合にのみ自動的に表示されます。

3. Kleep Search 機能

Kleep Search は Shopify のネイティブ検索をサイズフィルターとパーソナライズされたレコメンドを備えた最適化検索に置き換えます。 ステップ 1：カスタム検索を有効にする Kleep アプリ埋め込み設定で、**「カスタム検索を有効にする」**オプションを有効にします。

カスタム検索を有効にする ステップ 2：検索テンプレートへのアクセス テーマエディタで上部のドロップダウンメニュー（デフォルトで「ホームページ」）をクリックし、テンプレートリストから 「検索」 を選択します。

検索テンプレートを選択 ステップ 3：ネイティブ検索を非表示にする テンプレートセクションで、目のアイコンをクリックしてネイティブの 「検索結果」 ブロックを非表示または削除します。

ネイティブ検索を非表示にする ステップ 4：Kleep Search ブロックを追加する セクションを追加 をクリックし、アプリ タブで 「Search」（kleep-dev）を選択します。

Kleep Search ブロックを追加 ステップ 5：オプションの設定 追加した Search ブロックをクリックして設定にアクセスします：結果数、グリッド／リスト表示、検索遅延など。

検索設定オプション

4. 返品統合（オプション）

返品管理プラットフォームをご利用の場合、Kleep は返品データを統合してサイズレコメンドを改善できます。 対応返品プロバイダー

Global-e
Aftership
Fast Return
Return Go
その他（お問い合わせください）

設定

Kleep ダッシュボードで 設定 → 返品 に移動
返品プロバイダーを選択
プロバイダー固有の手順に従ってアカウントを連携

お使いのプロバイダーがリストにない場合は、support@kleep.ai までご連絡ください。SFTP または API を通じたカスタム統合を設定できます。

5. イベントトラッキング＆アナリティクス

Kleep はアナリティクスのためにユーザーインタラクションを自動的に追跡します。本番公開前にトラッキングが正しく機能していることを確認してください。 追跡されるイベント

イベント	説明
`kleep_button_click`	ユーザーがサイズガイドボタンをクリックした
`kleep_drawer_open`	サイズガイドのドロワーが開かれた
`kleep_size_recommended`	サイズレコメンドが表示された
`kleep_add_to_cart`	ユーザーが Kleep からカートに商品を追加した
`kleep_similar_click`	ユーザーが類似商品をクリックした

確認方法 イベントが正しく発火していることを確認するには：

ブラウザの開発者ツール（F12）を開く
ネットワーク タブに移動
「kleep」でフィルタリング
サイズガイドボタンを操作
各イベントの API コールが表示されるはずです

本番公開前： 少なくとも 5 つのイベントが発火し、ペイロードが有効であることを確認してください。統合の検証のために、1 つの完全なユーザージャーニー（ボタンクリック → サイズレコメンド → カートに追加）を完了してください。

6. CSS カスタマイズ

Kleep 要素（ボタン、ポップアップ、検索）の外観をカスタム CSS で変更できます。 CSS の追加場所 Kleep アプリ埋め込み設定に 「カスタム CSS スタイルを入力」 フィールドがあります。そこにカスタム CSS を貼り付けてください。

カスタム CSS フィールド カスタマイズ例

コード

.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. 複数環境

複数の Shopify 環境（開発・ステージング・本番）がある場合、それぞれに Kleep を設定する必要があります。 各環境の設定

本番ストア — メインストア、完全に設定済み
ステージング／開発ストア — 本番環境に反映する前のテスト用

各環境で：

Kleep アプリをインストール
アプリ埋め込みを有効にする
Kleep CSM に連絡して環境をアカウントにリンク

常にステージングで変更をテストしてから本番に適用してください。

環境固有の URL Kleep CSM に以下を提供してください：

本番 URL：https://www.yourbrand.com
ステージング URL：https://staging.yourbrand.com（該当する場合）
開発 URL：https://dev.yourbrand.com（該当する場合）

7.5 CTA ボタン＆類似商品 — 完全インストールガイド

Kleep CTA ボタンと類似商品機能のインストールに関する完全なテクニカルリファレンス（すべての Liquid コード、設定スキーマ、セカンダリボタンの設定を含む）については、以下の専用ガイドをご参照ください： CTA ボタン＆類似商品 — 完全インストールガイド

8. ビンテージテーマ — サイズガイドのセットアップ

ビンテージテーマ（「レガシー」とも呼ばれる、Online Store 2.0 以前に作成されたもの）はアプリブロックをサポートしていません。インストールには Liquid コードの修正が必要です。

このセクションには Shopify 開発知識（Liquid）が必要です。

前提条件

テーマコードエディタへのアクセス（オンラインストア → テーマ → コードを編集）
Shopify 管理画面で Kleep アプリ埋め込みが有効になっていること（オンラインストア → テーマ → カスタマイズ → アプリ埋め込み → Kleep）

ステップ 1：アプリ埋め込みを有効にする Shopify 管理画面で オンラインストア → テーマ → カスタマイズ → アプリ埋め込み に移動し、Kleep アプリをオンに切り替えます。 ステップ 2：スニペットを呼び出す Kleep を表示したい場所に以下のコードを貼り付けます。snippets フォルダ内の Product info ブロックの一部である必要があります：

コード

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

ステップ 3：ボタンスニペットを作成する snippets フォルダ内に kleep-button.liquid という名前の新しいファイルを作成し、以下の内容を記述します：

コード

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

ステップ 4：設定スキーマを追加する セクションファイルの末尾にある設定スキーマに以下のオプションを追加します：

コード

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

ステップ 5：確認 Shopify テーマのカスタマイズエリアで更新を確認します。商品情報ブロックの設定内でビジュアルを設定します。 オプション：セカンダリボタン セカンダリボタンを追加したい場合、snippets フォルダ内に kleep-secondary-button.liquid という名前の新しいファイルを作成します：

コード

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

Kleep を表示したい場所に以下のコードを貼り付けます。snippets フォルダ内の Product info ブロックの一部である必要があります。

コード

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

9. ビンテージテーマ — 類似商品のセットアップ

ステップ 1：スニペットを作成する 以下のコードを含む snippets/kleep-similar-button.liquid ファイルを作成します：

コード

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

ステップ 2：スニペットをレンダリングする ボタンを表示したい場所に次の行を挿入します：

コード

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

標準的な配置場所：バリアントセレクターの下またはカートに追加フォームの近く。 ステップ 3：正しいモードを有効にする ビンテージテーマは OS 2.0 ブロックを挿入できないため、ウィジェットは次のいずれかのモードを使用する必要があります：

custom_buttons
popup+custom
button+custom

複数ボタンの追加 複数のボタンを作成するには、商品テンプレートの異なる場所にスニペットコードを配置するだけです：

コード

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

各スニペット呼び出しで追加のボタンが作成されます。各ボタンは、選択されたバリアントが在庫切れの場合にのみ自動的に表示されます。

10. 翻訳（i18n）

テーマのロケールファイルに以下の翻訳を追加します。 英語（en.json）

コード

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

フランス語（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"
      }
    }
  }
}

11. テクニカルリファレンス

PDP 上の CTA 位置 位置は KleepSDK.getConstants() 内の DOM セレクターによって定義されます：

targetProductInfoBlockQueries — 商品詳細のメインコンテナ（タイトル、価格、サイズなど）を指すセレクターの配列。スクリプトはこれらのセレクターを順に検索し、最初に見つかったものを CTA またはポップアップの挿入ポイントとして使用します。
targetVariantQueries — サイズ／バリアントオプションの場所。商品情報ブロックが見つかると、スクリプトはその中でバリアント要素（サイズセレクターなど）を検索します。各バリアントの <label>（または同等のもの）がポップアップ CTA をアタッチするターゲットになります。

ポップアップ vs. ボタン（デスクトップ vs. モバイル） デバイスタイプは checkIfMobile() を使用して検出されます：この関数はブラウザの navigator.userAgent 文字列をモバイルデバイスのリスト（例：iPhone、Android、iPad）と照合します。

デスクトップ：CTA はバリアントラベルの横にホバーポップアップとして表示されます
モバイル：タッチスクリーンではホバー操作が使用できないため、スクリプトはホバーポップアップを単一ボタンに置き換えます

商品リファレンス設定 Kleep はカタログ全体で商品を照合するために商品リファレンスを使用します。識別方法を設定してください： リファレンスフィールド： ブランドの商品リファレンスの場所

Shopify SKU フィールド
メタフィールド（どれかを指定）
タグ（プレフィックス付き、例：ref:ABC123）

マスター商品の抽出： バリアント SKU からマスター商品 ID を導出する方法

例：バリアント SKU が ABC123-S、ABC123-M、ABC123-L の場合、マスター商品リファレンスは ABC123
ルール：先頭 6 文字を取得 / で分割して最初の部分を取得 / カスタム正規表現

Kleep ダッシュボード → 設定 → 商品リファレンス で設定します。 カスタマイズに関する注意事項

セレクターと CSS の調整以外の配置／レイアウトのバリエーションは提供されていません
外観（色、スペーシング、フォントなど）を変更するには、Kleep アプリ埋め込み設定の 「カスタム CSS スタイルを入力」 ボックスに CSS を貼り付けてください

12. 本番公開チェックリスト

公開前に以下を確認してください： ボタン表示

少なくとも 3 つの商品ページでボタンが表示されている
デスクトップとモバイルの両方でボタンが機能する
CSS の競合がない（ボタンが非表示または位置ずれしていない）
累積レイアウトシフト（CLS）の問題がない — ボタンでページがジャンプしない
ビンテージテーマのみ： コミットがバージョン管理に記録されている

データ品質

商品の 98% 以上にサイズガイドがマッピングされている
バリアントの 1% 未満に採寸情報が欠落している
孤立 SKU がない（カテゴリマッピングのない商品）

トラッキング

5 つのイベントすべてが正しく発火している
完全なユーザージャーニーが追跡されている（ボタン → レコメンド → カート）
ペイロードが検証されている

パフォーマンス

JS エラーが 1% 未満
API レイテンシ P95 が 500ms 未満
モニタリングが設定されている

ユーザージャーニー

サイズガイドが正しく開く
レコメンドが正しく表示される
サイズガイドからカートに追加が機能する
類似商品が表示される（有効な場合）
すべてのデバイスでレスポンシブに機能する

✅ すべての項目を確認したら、本番公開前の最終 QA バリデーションのために Kleep CSM に通知してください。

13. トラブルシューティング

ボタンが表示されない

☑️ Kleep アプリ埋め込みが有効になっていることを確認（ON に切り替え）
☑️ テーマの変更が保存されていることを確認
☑️ ブラウザのキャッシュをクリアしてページを再読み込み
☑️ 商品にサイズバリアントが設定されていることを確認

類似商品が表示されない

☑️ 設定でモードが「無効」に設定されていないことを確認
☑️ バリアントが在庫切れの場合にのみボタンが表示されます
☑️ 「カスタム」モードの場合、アプリブロックが追加されていることを確認

検索が機能しない

☑️ アプリ埋め込みで「カスタム検索を有効にする」が有効になっていることを確認
☑️ 検索テンプレートに Kleep Search ブロックが追加されていることを確認
☑️ ネイティブ検索が非表示になっていることを確認

Kleep アプリブロックが見つからない 「ブロックを追加」をクリックしたときに「アプリ」タブに Kleep ブロックが表示されない場合、テーマはビンテージテーマの可能性があります。代替インストール手順については、セクション 11〜12 を参照してください。 データマッピングの問題

☑️ 商品データに期待されるフィールド（タグ、メタフィールドなど）が含まれていることを確認
☑️ Kleep ダッシュボード → 設定 → データマッピング でマッピングを確認
☑️ 商品スキャンを再実行して検出された値を更新

イベントが発火しない

☑️ ブラウザのコンソールで JavaScript エラーを確認
☑️ 広告ブロッカーやプライバシー拡張機能が Kleep のリクエストをブロックしていないことを確認
☑️ シークレットモードでテスト

サポートへの連絡 ここに記載されていない問題が発生した場合は、Kleep チームにお問い合わせください：

📧 メール： support@kleep.ai

Kleep をご利用いただきありがとうございます！ 🎉

弊社チームはサイズガイドのインストールと最適化をサポートいたします。--- Kleep は訪問者の同意によって完全にゲートされています。スクリプトは CMP を通じて同意が収集された後にのみ読み込まれ、その読み込みを適切に条件付ける必要があります。トラッカーの完全なリスト、処理されるデータ、目的と法的根拠、ホスティング、サブプロセッサー、セキュリティについては、Cookie、CMP とデータプライバシーをご参照ください。

ようこそ

CMS

モバイル

ダッシュボード

データ

プライバシー

Shopify 導入ガイド

導入プロセスの概要

オンボーディング

インストール＆テスト

導入後

1. 機能

2. 類似商品機能

3. Kleep Search 機能

4. 返品統合（オプション）

5. イベントトラッキング＆アナリティクス

6. CSS カスタマイズ

7. 複数環境

7.5 CTA ボタン＆類似商品 — 完全インストールガイド

8. ビンテージテーマ — サイズガイドのセットアップ

9. ビンテージテーマ — 類似商品のセットアップ

10. 翻訳（i18n）

11. テクニカルリファレンス

12. 本番公開チェックリスト

13. トラブルシューティング

Kleep をご利用いただきありがとうございます！ 🎉

​導入プロセスの概要

​オンボーディング

​インストール＆テスト

​導入後

​1. 機能

​2. 類似商品機能

​3. Kleep Search 機能

​4. 返品統合（オプション）

​5. イベントトラッキング＆アナリティクス

​6. CSS カスタマイズ

​7. 複数環境

​7.5 CTA ボタン＆類似商品 — 完全インストールガイド

​8. ビンテージテーマ — サイズガイドのセットアップ

​9. ビンテージテーマ — 類似商品のセットアップ

​10. 翻訳（i18n）

​11. テクニカルリファレンス

​12. 本番公開チェックリスト

​13. トラブルシューティング

​Kleep をご利用いただきありがとうございます！ 🎉

​Cookie とデータプライバシー

導入プロセスの概要

オンボーディング

インストール＆テスト

導入後

1. 機能

2. 類似商品機能

3. Kleep Search 機能

4. 返品統合（オプション）

5. イベントトラッキング＆アナリティクス

6. CSS カスタマイズ

7. 複数環境

7.5 CTA ボタン＆類似商品 — 完全インストールガイド

8. ビンテージテーマ — サイズガイドのセットアップ

9. ビンテージテーマ — 類似商品のセットアップ

10. 翻訳（i18n）

11. テクニカルリファレンス

12. 本番公開チェックリスト

13. トラブルシューティング

Kleep をご利用いただきありがとうございます！ 🎉

Cookie とデータプライバシー