Shopify：CTA ボタン＆類似商品

Shopify V2 導入ガイド

このセクションでは、Shopify ストアに Kleep AI Sizing を追加する方法を説明します。

ステップバイステップのビデオウォークスルー

Tango チュートリアルに従って、Online Store 2.0 テーマのショップに Kleep ボタンを追加します。

Shopify V1 導入ガイド

1. サイジング

このセクションでは、Shopify コードベースに Kleep AI Sizing を追加する方法を説明します。

ビジュアルウォークスルーをお好みですか？

Shopify V1 ストアに Kleep をインストールするためのステップバイステップ Tango チュートリアルをご覧ください。

手順

ステップ 1：アプリ埋め込みを有効にする アプリ埋め込みで Kleep アプリが有効になっていることを確認します。

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

ステップ 2：ボタンスニペットをレンダリングする Kleep を表示したい場所に以下のコードを貼り付けます。snippets フォルダ内の Product info ブロックの一部である必要があります。

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

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

Kleep ボタン

<button
  type="button"
  style="display: none;{% if cms.font_family and cms.default_font_family == false %}font-family: '{{ cms.font_family }}' ;{% endif %}font-style: {{ cms.text_style }}; font-size: {{ cms.text_size }}px; font-weight: {{ cms.text_weight }}; text-transform: {{ cms.text_transform }}; color: {{ cms.text_color }}; background-color: {{ cms.bg_color }}; padding: {{ cms.padding_t }}px {{ cms.padding_r }}px {{ cms.padding_b }}px {{ cms.padding_l }}px;{% if cms.center %} margin: {{ cms.margin_y }}px auto;{% else %} margin: {{ cms.margin_y }}px {{ cms.margin_x }}px;{% endif %}; border: {{ cms.border_color }} {{ cms.border_width }}px solid; border-radius: {{ cms.border_radius }}px;"
  class="kleep-button"
  id="kleep-size-button"
  data-product-id="{{ product.id }}"
>
  <span class="kleep-wrapper-content">
    {% if cms.text_underline %}
      <span
        style="position: absolute; width: calc(100% + 2px); height: 1px; bottom: -{{ cms.text_underline_offset }}px; left: 0; background-color: {{ cms.text_color }};"
      ></span>
    {% endif %}

    {% if cms.image_url != blank %}
      <img
        height="{{ cms.image_size }}"
        width="{{ cms.image_size }}"
        src="{{ cms.image_url }}"
        loading="lazy"
        alt="Kleep button image"
      >
    {% endif %}

    <span class="kleep-btn-text">
      <span class="kleep-default">
        {% if cms.custom_button_text_toggle %}
          {{ cms.custom_find_size_text }}
        {% else %}
          {{ 'blocks.button.text.without_hash' | t }}
        {% endif %}
      </span>
      <span style="display: none;" class="kleep-custom">
        {% if cms.custom_button_text_toggle %}
          {{ cms.custom_recommended_size_text }}{% if localization.language.iso_code == "fr" %}&nbsp;{% endif %}<span class="kleep-colon">:</span>
        {% else %}
          {{ 'blocks.button.text.with_hash' | t }}{% if localization.language.iso_code == "fr" %}&nbsp;{% endif %}<span class="kleep-colon">:</span>
        {% endif %}
        <span class="kleep-custom-res"></span>
      </span>
    </span>
  </span>

  <span
    style="display: none; color: {{ cms.text_color }}; border-top-color: {{ cms.text_color }};"
    class="kleep-spinner"
    id="size-spinner"
  ></span>
</button>

ステップ 4：設定スキーマのオプションを追加する ページの末尾にある設定スキーマに以下のオプションを追加します：

Shopify オプション

{
  "type": "header",
  "content": "Button text",
      "info": "If you enable this feature, the button text you enter will be replaced for all languages in your store"
    },
    {
      "type": "checkbox",
      "default": false,
      "id": "custom_button_text_toggle",
      "label": "Enable custom button text"
    },
    {
      "type": "text",
      "id": "custom_find_size_text",
      "label": "Find my best size text",
      "info": "What text will display instead of \"Find my best size\"?"
    },
    {
      "type": "text",
      "id": "custom_recommended_size_text",
      "label": "Recommended size text",
      "info": "What text will display instead of \"Recommended size\"?"
    },
    {
      "type": "header",
      "content": "Image"
    },
    {
      "type": "url",
      "id": "image_url",
      "label": "Url Image"
    },
    {
      "type": "range",
      "id": "image_size",
      "min": 0,
      "max": 80,
      "step": 2,
      "unit": "px",
      "label": "Image size (square)",
      "default": 20
    },
    {
      "type": "header",
      "content": "CSS Styles"
    },
    {
      "type": "checkbox",
      "default": true,
      "id": "default_font_family",
      "label": "Font du thème",
      "info": "Si coché, la variable css `--font-body-family` est utilisée"
    },
    {
      "type": "font_picker",
      "id": "font_family",
      "label": "Font Family",
      "default": "helvetica_n4"
    },
    {
      "type": "select",
      "id": "text_style",
      "label": "Style texte",
      "default": "normal",
      "options": [
        {
          "label": "Normal",
          "value": "normal"
        },
        {
          "label": "Italic",
          "value": "italic"
        },
        {
          "label": "Oblique",
          "value": "oblique"
        }
      ]
    },
    {
      "type": "select",
      "id": "text_transform",
      "label": "Texte transformation",
      "default": "none",
      "options": [
        {
          "label": "Normal",
          "value": "none"
        },
        {
          "label": "Capitalize",
          "value": "capitalize"
        },
        {
          "label": "Uppercase",
          "value": "uppercase"
        },
        {
          "label": "Lowercase",
          "value": "lowercase"
        }
      ]
    },
    {
      "type": "select",
      "id": "text_weight",
      "label": "Poid texte",
      "default": "400",
      "options": [
        {
          "label": "100",
          "value": "100"
        },
        {
          "label": "200",
          "value": "200"
        },
        {
          "label": "300",
          "value": "300"
        },
        {
          "label": "400",
          "value": "400"
        },
        {
          "label": "500",
          "value": "500"
        },
        {
          "label": "600",
          "value": "600"
        },
        {
          "label": "700",
          "value": "700"
        },
        {
          "label": "800",
          "value": "800"
        },
        {
          "label": "900",
          "value": "900"
        }
      ]
    },
    {
      "type": "range",
      "id": "text_size",
      "min": 2,
      "max": 50,
      "step": 2,
      "unit": "px",
      "label": "Taille police",
      "default": 16
    },
    {
      "type": "checkbox",
      "id": "text_underline",
      "label": "Texte soulignage",
      "default": false
    },
    {
      "type": "range",
      "id": "text_underline_offset",
      "min": 1,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Offset underline",
      "default": 2
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Couleur texte du bouton",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Couleur fond",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Couleur bordures",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "border_width",
      "min": 0,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Épaisseur bordures",
      "default": 0
    },
    {
      "type": "header",
      "content": "CSS Styles",
      "info": "Espacements"
    },
    {
      "type": "checkbox",
      "id": "center",
      "label": "Centrer le bouton",
      "default": false,
      "info": "Cela remplacera le 'Margin horizontal'"
    },
    {
      "type": "range",
      "id": "margin_y",
      "min": 0,
      "max": 80,
      "step": 2,
      "unit": "px",
      "label": "Margin vertical",
      "default": 0
    },
    {
      "type": "range",
      "id": "margin_x",
      "min": 0,
      "max": 80,
      "step": 2,
      "unit": "px",
      "label": "Margin horizontal",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_t",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Padding top",
      "default": 12
    },
    {
      "type": "range",
      "id": "padding_r",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Padding right",
      "default": 16
    },
    {
      "type": "range",
      "id": "padding_b",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Padding bottom",
      "default": 12
    },
    {
      "type": "range",
      "id": "padding_l",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Padding left",
      "default": 16
    },
    {
      "type": "range",
      "id": "border_radius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Bordures arrondies",
      "default": 0
    }

独自の CSS スタイルを追加するには：

外観（色、スペーシング、フォントなど）を変更するには、Kleep アプリ埋め込み設定の 「カスタム CSS スタイルを入力」 ボックスに CSS を貼り付けます。

例：

ステップ 5：英語翻訳を追加する テーマのロケールに英語翻訳を追加します。

翻訳

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

ステップ 6：その他の言語翻訳を追加する テーマのロケールに他の翻訳を追加します。

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

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

2. 類似商品

V1 Shopify テーマへの「類似商品」のインストール

この場合、Liquid スニペットを手動で追加する必要があります。

ステップ 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 — V1 テーマの正しいモードを有効にする

V1 テーマは OS2.0 ブロックを挿入できないため、ウィジェットは次のいずれかのモードを使用する必要があります：

custom_buttons
popup+custom
button+custom

V2（Online Store 2.0）ストアへの「類似商品」のインストール

最新の Shopify テーマはアプリ埋め込みとカスタムブロックをサポートしています。コードの変更は不要です。

ステップ 1 — Kleep アプリ埋め込みを有効にする

オンラインストア → テーマ → カスタマイズ に移動します。
アプリ埋め込み セクションを開きます。
Kleep アプリを有効にします。
テーマを保存します。

これにより、類似商品ロジックを管理するコアスクリプトが有効化されます。

次に、**「おすすめ商品を表示」**を見つけます

ステップ 2 — 類似商品の表示モードを選択する

Kleep ウィジェット設定内で、商品ページに類似商品をどのように表示するかを選択します：

disabled – 機能を完全に無効にする
popup – デスクトップではバリアント／サイズセレクターの上に自動的にポップアップを追加し、モバイルではデフォルトボタンを置き換える
button – 選択されたバリアントが在庫切れの場合にカートに追加エリアの近くに CTA ボタンを自動的に挿入する
custom_buttons – すべての自動配置を無効にする；マーチャントが 1 つ以上の「Kleep Similar Button」ブロックを手動で追加する必要がある
popup+custom – 自動ポップアップを保持し、テーマに追加されたカスタムボタンも有効にする
button+custom – 自動 CTA ボタンを保持し、テーマに追加されたカスタムボタンも有効にする

その後、テーマを保存するだけで、すぐにストア（商品ページ）に表示されます。 ステップ 3 — カスタムボタンを追加する（custom_buttons、popup+custom、button+custom の場合のみ） 選択したモードにカスタムボタンが含まれる場合：

オンラインストア → カスタマイズ を開きます。
商品ページテンプレートに移動します。
任意のセクションで ブロックを追加 をクリックします。
Kleep Similar Button を選択します。
テーマを保存します。

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

複数の「類似商品」ボタンの追加（プライマリ＆セカンダリ）

商品ページには任意の数の類似商品ボタンを追加できます。これは OS 2.0 テーマと V1 ／レガシーテーマの両方で機能します。

カスタムボタンをサポートするモードを有効にする

複数のボタンを許可するには、ウィジェットを次のいずれかのモードに設定する必要があります：

custom_buttons
popup+custom
button+custom

これらのモードは手動配置を有効にするため、マーチャントは必要なだけボタンを挿入できます。

Online Store 2.0（最新テーマ）の場合

OS 2.0 テーマでは、テーマエディタでビジュアルにボタンを追加できます。手順：

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

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

V1 ／レガシーテーマの場合

レガシーテーマはブロックをサポートしていませんが、スニペットを複数回レンダリングできます。ボタンを表示したい場所にこのスニペットを挿入します： {% render 'kleep-similar-button' %} 複数のボタンを作成するには、このコードを商品テンプレートの異なる場所に配置するだけです。各スニペット呼び出しで追加のボタンが作成されます。

まとめ

複数の類似商品ボタンを追加するには：カスタムボタンのいずれかのモードを有効にする → 複数の OS 2.0 ブロックまたは複数のスニペット呼び出しを追加する → バリアントが在庫切れの場合にすべてのボタンが自動的に機能します。

PDP 上の CTA 位置 位置は KleepSDK.getConstants(). 内の DOM セレクターによって定義されます。 targetProductInfoBlockQueries — 商品情報の場所。これは商品詳細のメインコンテナ（タイトル、価格、サイズなど）を指すセレクターの配列です。スクリプトはこれらのセレクターを順に検索し、最初に見つかったものを CTA またはポップアップの挿入ポイントとして使用します。 targetVariantQueries — サイズ／バリアントオプションの場所：商品情報ブロックが見つかると、スクリプトはその中でバリアント要素（サイズセレクターなど）を検索します。各バリアントの <label>（または同等のもの）がポップアップ CTA をアタッチするターゲットになります。 ポップアップ vs. ボタン（デスクトップ vs. モバイル） デバイスタイプは checkIfMobile(): を使用して検出されます。この関数はブラウザの navigator.userAgent 文字列をモバイルデバイスのリスト（例：iPhone、Android、iPad）と照合します。

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

カスタマイズ

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

3. 検索

注意： Shopify V1 で Kleep Search を設定するためにテーマコードを変更する必要はありません。 テーマエディタを開き、Kleep アプリ埋め込みをオンにして、カスタム検索を有効にし、デフォルトの検索ブロックを Kleep Search ブロックに置き換えます。外観（色、スペーシング、フォントなど）を変更するには、Kleep アプリ埋め込み設定の 「カスタム CSS スタイルを入力」 ボックスに CSS を貼り付けてください。 以下にすべての詳細を説明します テーマエディタを開く オンラインストア > テーマに移動し、編集したいテーマを見つけて カスタマイズ をクリックします。 Kleep アプリ埋め込みを有効にするアプリ埋め込みセクションを開きます。 Kleep アプリを見つけてオンに切り替えます。カスタム検索を有効にする（オプション） Kleep 設定で「カスタム検索を有効にする」を有効にします。

デフォルト検索を置き換えるテーマエディタから、検索テンプレートを開きます（検索ページテンプレートに移動）。

テーマからデフォルトの検索セクションを削除または非表示にします。

Kleep Search ブロック（アプリタブから）を追加し、デフォルトの検索があった場所に配置します。

テーマの変更を保存します。検索機能は独立した Liquid コードではなく、アプリ内の Liquid セクションとして統合されています。 有効化は以下によって制御されます：

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

これにより、特定のストア（ドメイン）のみが検索機能を有効化できます。レイアウトとスタイル

グリッドとリスト表示の切り替えは、アプリの products_search_grid_layout 設定でのみ行います。

これを行うには、追加済みの検索に移動し、右側にある設定オプションを確認します

追加のスタイル（フォント、色、スペーシング）は、必要に応じてストアごとにコードで実装されます。
すべての機能はこの Liquid セクションに関連付けられており、テーマ設定に Liquid コードを追加するのではなく、アプリの kleep_enable_custom_search で有効化されます。
外観（色、スペーシング、フォントなど）を変更するには、Kleep アプリ埋め込み設定の 「カスタム CSS スタイルを入力」 ボックスに CSS を貼り付けてください。

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

​Shopify V2 導入ガイド

ステップバイステップのビデオウォークスルー

​Shopify V1 導入ガイド

​1. サイジング

ビジュアルウォークスルーをお好みですか？

​手順

​2. 類似商品

​V1 Shopify テーマへの「類似商品」のインストール

​ステップ 1 — スニペットを作成する

​ステップ 2 — 商品テンプレート内でスニペットをレンダリングする

​ステップ 3 — V1 テーマの正しいモードを有効にする

​V2（Online Store 2.0）ストアへの「類似商品」のインストール

​ステップ 1 — Kleep アプリ埋め込みを有効にする

​ステップ 2 — 類似商品の表示モードを選択する

​複数の「類似商品」ボタンの追加（プライマリ＆セカンダリ）

​カスタムボタンをサポートするモードを有効にする

​Online Store 2.0（最新テーマ）の場合

​V1 ／ レガシーテーマの場合

​まとめ

​3. 検索

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