Shopify: CTA 버튼 및 유사 상품

Shopify V2 통합 가이드

이 섹션에서는 Shopify 스토어에 Kleep AI 사이즈 추천을 추가하는 방법을 설명합니다.

단계별 동영상 가이드

Tango 튜토리얼을 따라 Online Store 2.0 테마에서 Kleep 버튼을 쇼핑몰에 추가하세요.

Shopify V1 통합 가이드

1. 사이즈 추천

이 섹션에서는 Shopify 코드베이스에 Kleep AI 사이즈 추천을 추가하는 방법을 설명합니다.

시각적 가이드를 선호하시나요?

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 앱 임베드 설정의 “Input custom CSS styles” 상자에 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 – 모든 자동 배치를 비활성화합니다; 판매자가 하나 이상의 “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 앱 임베드 설정의 “Input custom CSS styles” 상자에 CSS를 붙여넣으세요.

3. 검색

참고: Shopify V1에서 Kleep 검색을 설정하기 위해 테마 코드를 변경할 필요가 없습니다. 테마 편집기를 열고 Kleep 앱 임베드를 켜고 커스텀 검색을 활성화한 다음 기본 검색 블록을 Kleep 검색 블록으로 교체하세요. 외관(색상, 간격, 폰트 등)을 변경하려면 Kleep 앱 임베드 설정의 “Input custom CSS styles” 상자에 CSS를 붙여넣으세요. 이 모든 내용은 아래에 설명되어 있습니다 테마 편집기 열기 온라인 스토어 > 테마로 이동하여 편집하려는 테마를 찾고 커스터마이즈를 클릭하세요. Kleep 앱 임베드 활성화 앱 임베드 섹션을 여세요. Kleep 앱을 찾아 켜세요. 커스텀 검색 활성화 (선택 사항) Kleep 설정에서 “커스텀 검색 활성화”를 활성화하세요.

기본 검색 교체 테마 편집기에서 검색 템플릿을 여세요(검색 페이지 템플릿으로 이동).

테마에서 기본 검색 섹션을 제거하거나 숨기세요.

Kleep 검색 블록을 추가하고(앱 탭에서) 기본 검색이 있던 위치에 배치하세요.

테마 변경사항을 저장하세요. 검색 기능은 별도의 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%}

이를 통해 특정 스토어(도메인)만 검색 기능을 활성화할 수 있습니다. 레이아웃 및 스타일

그리드 vs. 목록 보기는 앱의 products_search_grid_layout 설정을 통해서만 전환됩니다.

이를 위해 이미 추가한 검색으로 이동하면 오른쪽에 구성 옵션이 표시됩니다

추가 스타일(폰트, 색상, 간격)은 필요한 경우 스토어별로 코드에서 구현됩니다.
모든 기능은 이 Liquid 섹션에 연결되어 있으며 테마 설정에 Liquid 코드를 추가하는 것이 아닌 앱의 kleep_enable_custom_search를 통해 활성화됩니다.
외관(색상, 간격, 폰트 등)을 변경하려면 Kleep 앱 임베드 설정의 “Input custom CSS styles” 상자에 CSS를 붙여넣으세요.

쿠키 및 데이터 개인정보 보호

Kleep은 방문자 동의에 의해 완전히 제어됩니다: 스크립트는 CMP를 통해 동의가 수집된 후에만 로드되며, 이에 따라 로딩 조건을 설정해야 합니다. 추적기의 전체 목록, 처리되는 데이터, 목적 및 법적 근거, 호스팅, 하위 처리자 및 보안에 대한 내용은 쿠키, 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. 검색

​쿠키 및 데이터 개인정보 보호