> ## Documentation Index > Fetch the complete documentation index at: https://docs.kleep.ai/llms.txt > Use this file to discover all available pages before exploring further. # Shopify: 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` 블록의 일부여야 합니다. ```jsx theme={null} {% render 'kleep-button', cms: section.settings %} ``` **3단계: 버튼 스니펫 파일 생성** `snippets` 폴더 내에 `kleep-button.liquid`라는 새 파일을 생성하세요. 다음 내용을 파일에 추가하세요: ```jsx theme={null} ``` **4단계: 설정 스키마 옵션 추가** 페이지 끝의 설정 스키마에 다음 옵션을 추가하세요: ```jsx theme={null} { "type": "header", "content": "Button text", "info": "If you enable this feature, the button text you enter will be replaced for all languages in your store" }, { "type": "checkbox", "default": false, "id": "custom_button_text_toggle", "label": "Enable custom button text" }, { "type": "text", "id": "custom_find_size_text", "label": "Find my best size text", "info": "What text will display instead of \"Find my best size\"?" }, { "type": "text", "id": "custom_recommended_size_text", "label": "Recommended size text", "info": "What text will display instead of \"Recommended size\"?" }, { "type": "header", "content": "Image" }, { "type": "url", "id": "image_url", "label": "Url Image" }, { "type": "range", "id": "image_size", "min": 0, "max": 80, "step": 2, "unit": "px", "label": "Image size (square)", "default": 20 }, { "type": "header", "content": "CSS Styles" }, { "type": "checkbox", "default": true, "id": "default_font_family", "label": "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를 붙여넣으세요. 예시: Screenshot 2025-08-13 at 13.25.30.png **5단계: 영어 번역 추가** 테마 로케일에 영어 번역을 추가하세요. ```jsx theme={null} "kleep": { "button": { "text": { "without_hash": "Find my ideal size", "with_hash": "Ideal size" } }, "recommended": { "text": { "btn": "View similar", "hint": "Size unavailable", "link": "See similar products" } }, "search": { "text": { "inputPlaceholder": "Search...", "productsBlockTitle": "Products", "clearButton": "Clear" } }, "searchPage": { "text": { "header": "search results", "query": "Results for", "submit": "Search", "input": "Search the store", "viewProduct": "View product" } } } ``` **6단계: 다른 언어 번역 추가** 테마 로케일에 다른 번역을 추가하세요. ```jsx theme={null} "kleep": { "button": { "text": { "without_hash": "Trouver ma taille idéale", "with_hash": "Taille idéale" } }, "recommended": { "text": { "btn": "Voir similaire", "hint": "Taille indisponible", "link": "Voir des produits similaires" } }, "search": { "text": { "inputPlaceholder": "Recherche...", "productsBlockTitle": "Produits", "clearButton": "Effacer" } }, "searchPage": { "text": { "header": "résultats de la recherche", "query": "Résultats pour", "submit": "Recherche", "input": "Rechercher dans la boutique", "viewProduct": "Voir le produit" } } } ``` ```jsx theme={null} "kleep": { "button": { "text": { "without_hash": "Trova la mia taglia ideale", "with_hash": "Taglia ideale" } }, "recommended": { "text": { "btn": "Visualizza simili", "hint": "Taglia non disponibile", "link": "Visualizza prodotti simili" } }, "search": { "text": { "inputPlaceholder": "Cerca...", "productsBlockTitle": "Prodotti", "clearButton": "Cancella" } }, "searchPage": { "text": { "header": "risultati della ricerca", "query": "Risultati per", "submit": "Cerca", "input": "Cerca nel negozio", "viewProduct": "Visualizza prodotto" } } } ``` ```jsx theme={null} "kleep": { "button": { "text": { "without_hash": "Finde meine ideale Größe", "with_hash": "Ideale Größe" } }, "recommended": { "text": { "btn": "Ähnliche Ansicht", "hint": "Größe nicht verfügbar", "link": "Ähnliche Produkte ansehen" } }, "search": { "text": { "inputPlaceholder": "Suchen...", "productsBlockTitle": "Produkte", "clearButton": "Klar" } }, "searchPage": { "text": { "header": "Suchergebnisse", "query": "Ergebnisse für", "submit": "Suchen", "input": "Durchsuchen Sie den Shop", "viewProduct": "Produkt ansehen" } } } ``` ```jsx theme={null} "kleep": { "button": { "text": { "without_hash": "Encontrar mi talla ideal", "with_hash": "Talla ideal" } }, "recommended": { "text": { "btn": "Ver similares", "hint": "Talla no disponible", "link": "Ver productos similares" } }, "search": { "text": { "inputPlaceholder": "Buscar...", "productsBlockTitle": "Productos", "clearButton": "Borrar" } }, "searchPage": { "text": { "header": "resultados de búsqueda", "query": "Resultados para", "submit": "Buscar", "input": "Buscar en la tienda", "viewProduct": "Ver producto" } } } ``` ```jsx theme={null} "kleep": { "button": { "text": { "without_hash": "自分に合うサイズを探す", "with_hash": "好みのサイズ" } }, "recommended": { "text": { "btn": "類似商品を見る", "hint": "サイズがありません", "link": "類似商品を見る" } }, "search": { "text": { "inputPlaceholder": "検索...", "productsBlockTitle": "商品", "clearButton": "クリア" } }, "searchPage": { "text": { "header": "検索結果", "query": "検索結果", "submit": "検索", "input": "ストアを検索", "viewProduct": "商品を見る" } } } ``` ```jsx theme={null} "kleep": { "button": { "text": { "without_hash": "내 이상적인 사이즈 찾기", "with_hash": "추천 사이즈" } }, "recommended": { "text": { "btn": "유사한 상품 보기", "hint": "사용 불가", "link": "유사한 상품 보기" } }, "search": { "text": { "inputPlaceholder": "검색...", "productsBlockTitle": "상품", "clearButton": "지우기" } }, "searchPage": { "text": { "header": "검색 결과", "query": "다음에 대한 결과", "submit": "검색", "input": "매장 검색", "viewProduct": "상품 보기" } } } ``` ```jsx theme={null} "kleep": { "button": { "text": { "without_hash": "Encontrar meu tamanho ideal", "with_hash": "Tamanho recomendado" } }, "recommended": { "text": { "btn": "Ver similar", "hint": "Tamanho indisponível", "link": "Ver produtos similares" } }, "search": { "text": { "inputPlaceholder": "Pesquisar...", "productsBlockTitle": "Produtos", "clearButton": "Limpar" } }, "searchPage": { "text": { "header": "resultados da pesquisa", "query": "Resultados para", "submit": "Pesquisar", "input": "Pesquisar na loja", "viewProduct": "Ver produto" } } } ``` 1. Shopify 테마 커스터마이즈 영역에서 업데이트를 확인하세요. 상품 정보 블록 설정에서 시각적 요소를 구성하세요. 2. 보조 버튼을 추가하려면 `snippets` 폴더 내에 `kleep-secondary-button.liquid`라는 새 파일을 생성해야 합니다. 다음 내용을 파일에 추가하세요: ```
``` Kleep이 표시되길 원하는 곳에 다음 코드를 붙여넣으세요. `snippets` 폴더 내 `Product info` 블록의 일부여야 합니다. ```jsx theme={null} {% render 'kleep-secondary-button', cms: section.settings %} ``` ## 2. 유사 상품 *** ### V1 Shopify 테마를 위한 "유사 상품" 설치 이 경우, Liquid 스니펫을 수동으로 추가해야 합니다. ### 1단계 - 스니펫 생성 생성: `snippets/kleep-similar-button.liquid` 다음 코드를 삽입하세요: ```jsx theme={null} {% assign cms = block.settings %} {% assign domain = shop.domain %} {% assign translated_similar = '' %} {% assign translated_similar_missing = true %} {%- assign domain_key = domain | prepend: 'www.' | append: '.recommended' -%} {% assign raw_domain_similar = domain_key | t %} {% unless raw_domain_similar contains 'Translation missing' or raw_domain_similar contains domain %} {% assign translated_similar = raw_domain_similar %} {% assign translated_similar_missing = false %} {% endunless %} {%- if translated_similar_missing -%} {% assign raw_global_similar = 'kleep.recommended.text.btn' | t %} {% unless raw_global_similar contains 'Translation missing' %} {% assign translated_similar = raw_global_similar %} {% assign translated_similar_missing = false %} {% endunless %} {%- endif %} ``` ### 2단계 - 상품 템플릿 내 스니펫 렌더링 버튼이 표시되길 원하는 위치에 이 줄을 삽입하세요: ```jsx theme={null} {% render 'kleep-similar-button' %} ``` 일반적인 배치: 변형 선택기 아래 또는 장바구니에 추가 폼 근처. ### 3단계 - V1 테마를 위한 올바른 모드 활성화 V1 테마는 OS2.0 블록을 삽입할 수 없으므로 위젯은 다음 중 하나를 사용해야 합니다: * `custom_buttons` * `popup+custom` * `button+custom` ### **V2(Online Store 2.0) 스토어를 위한 "유사 상품" 설치** 최신 Shopify 테마는 앱 임베드와 커스텀 블록을 지원합니다. 코드 변경이 필요하지 않습니다. ### 1단계 — Kleep 앱 임베드 활성화 1. **온라인 스토어 → 테마 → 커스터마이즈**로 이동하세요. 2. **앱 임베드** 섹션을 여세요. 3. **Kleep 앱**을 활성화하세요. 4. 테마를 저장하세요. 이렇게 하면 유사 상품 로직을 관리하는 핵심 스크립트가 활성화됩니다. Screenshot 2025-12-09 at 11.55.25.png 다음으로, \*\*"추천 상품 표시"\*\*를 찾으세요 ### 2단계 — 유사 상품 표시 모드 선택 Kleep 위젯 구성 내에서 상품 페이지에 유사 상품이 표시되는 방식을 선택하세요: * disabled – 기능을 완전히 끕니다 * popup – 데스크톱에서 변형/사이즈 선택기 위에 팝업을 자동으로 추가하고, 모바일에서는 기본 버튼을 대체합니다 * button – 선택된 변형이 품절일 때 장바구니에 추가 영역 근처에 CTA 버튼을 자동으로 삽입합니다 * custom\_buttons – 모든 자동 배치를 비활성화합니다; 판매자가 하나 이상의 "Kleep Similar Button" 블록을 수동으로 추가해야 합니다 * popup+custom – 자동 팝업을 유지하고 테마에 추가된 모든 커스텀 버튼도 활성화합니다 * button+custom – 자동 CTA 버튼을 유지하고 테마에 추가된 모든 커스텀 버튼도 활성화합니다 Screenshot 2025-12-09 at 11.48.24.png 그 후 테마를 저장하면 스토어(상품 페이지)에 즉시 나타납니다. **3단계 — 커스텀 버튼 추가 (custom\_buttons, popup+custom, button+custom 모드에만 해당)** 선택된 모드에 커스텀 버튼이 포함된 경우: 1. **온라인 스토어 → 커스터마이즈**를 여세요. 2. **상품 페이지** 템플릿으로 이동하세요. 3. 원하는 섹션에서 **블록 추가**를 클릭하세요. 4. **Kleep Similar Button**을 선택하세요. 5. 테마를 저장하세요. 커스텀 버튼은 선택된 변형이 품절일 때만 표시됩니다. image.png ## 여러 "유사 상품" 버튼 추가 (기본 및 보조) 상품 페이지에 유사 상품 버튼을 원하는 수만큼 추가할 수 있습니다. 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` – 사이즈/변형 옵션이 있는 위치: 상품 정보 블록이 발견되면 스크립트는 그 안에서 변형 요소(사이즈 선택기 등)를 검색합니다. 각 변형 \