도움말
로그인

제품 페이지에 Shop Promise 표시

Shop Promise 배지는 배송 날짜 옆과 제품 페이지에 표시되며, 미국 내에서 5일 이내에 배송될 것으로 예상되는 적격 배송에 대해 표시됩니다. 이 배지는 고객에게 주문에 빠르고 안정적인 배송이 포함되어 있음을 알려줍니다.

Shop Promise를 활성화한 후 테마 편집기를 사용하여 제품 페이지로 이동하여 Shop Promise 배지가 올바르게 표시되는지 확인해야 합니다.

배지가 올바르게 표시되지 않으면 스토어에 빠른 결제 버튼이 활성화되어 있는지 확인하십시오. Shop Promise 배지의 표시를 사용자 지정하는 몇 가지 옵션도 있습니다.

이 페이지의 내용

Shop Promise 모듈 수동 배치

테마 코드를 읽고 편집하는 데 익숙한 경우 변경할 위치를 식별하고 제품 페이지를 업데이트할 수 있습니다.

변경할 위치 식별

Shop Promise 모듈 코드는 제품 페이지의 제품 양식에 포함되어야 하며, {%- form 'product', product -%}와 유사해야 합니다. Shop Promise 모듈은 테마에 따라 다양한 위치에 있을 수 있습니다. 일반적인 위치는 다음과 같습니다.

  • main-product.liquid
  • product-form.liquid
  • product-template.liquid
  • product.liquid

제품 페이지 업데이트

단계:

데스크톱

  1. Shopify 관리자에서 **온라인 스토어** > **테마**로 이동합니다.

  2. 편집하려는 테마를 찾아 가로 메뉴 아이콘을 클릭하여 작업 메뉴를 연 다음 **코드 편집**을 클릭합니다.

  3. 관련 파일을 엽니다.

  4. {%- if block.settings.show_dynamic_checkout -%} 또는 {{ form | payment_button }}이 포함된 줄을 찾습니다.

  5. {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} 바로 아래에 새 줄을 만들고 다음을 해당 줄에 붙여넣습니다.

<div class="delivery-promise__promise-container"></div>
  1. **저장**을 클릭합니다.

결과는 다음과 유사해야 합니다.

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>
모바일

  1. Shopify app에서 Menu 아이콘을 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어 > 모든 테마 관리를 탭합니다.

  3. 편집하려는 테마를 찾아 **…** 버튼을 탭하여 작업 메뉴를 연 다음 **코드 편집**을 탭합니다.

  4. 관련 파일을 엽니다.

  5. {%- if block.settings.show_dynamic_checkout -%} 또는 {{ form | payment_button }}이 포함된 줄을 찾습니다.

  6. {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} 바로 아래에 새 줄을 만들고 다음을 해당 줄에 붙여넣습니다.

<div class="delivery-promise__promise-container"></div>
  1. 저장 또는 ✓를 탭하십시오.

결과는 다음과 유사해야 합니다.

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>

Shop Promise 모듈 테마 수동 재정의

Shop Promise 모듈에는 어두운 테마와 밝은 테마가 있습니다. 이 모듈은 제품 페이지의 배경색과 비교하여 대비율이 가장 높은 테마를 자동으로 사용합니다.

테마 코드를 읽고 편집하는 데 익숙하다면 Shop Promise 모듈을 수동으로 배치하는 데 사용되는 앵커 요소에 데이터 특성을 추가하여 모듈의 선택된 테마를 재정의할 수 있습니다.

변경하기 전에 테마를 복제하고 복제 테마를 편집하여 변경 사항을 쉽게 되돌릴 수 있도록 하십시오.

단계:

데스크톱
  1. 제품 페이지에서 Shop Promise 모듈을 수동으로 배치하는 지침을 따른 다음 테마 편집기를 열어 둡니다.
  2. 새로 생성한 앵커 요소에 **dark** 또는 **light**로 설정된 테마 데이터 특성을 추가합니다.
  3. **저장**을 클릭합니다.

결과는 다음 중 하나와 유사해야 합니다.

<div class="delivery-promise__promise-container" data-theme="dark"></div>

또는

<div class="delivery-promise__promise-container" data-theme="light"></div>
모바일
  1. 제품 페이지에서 Shop Promise 모듈을 수동으로 배치하는 지침을 따른 다음 테마 편집기를 열어 둡니다.
  2. 새로 생성한 앵커 요소에 **dark** 또는 **light**로 설정된 테마 데이터 특성을 추가합니다.
  3. **저장**을 탭합니다.

결과는 다음 중 하나와 유사해야 합니다.

<div class="delivery-promise__promise-container" data-theme="dark"></div>

또는

<div class="delivery-promise__promise-container" data-theme="light"></div>

Promise 모듈에 사용자 지정 HTML 또는 Liquid 추가

테마가 사용자 지정 블록을 지원하는 경우 사용자 지정 Liquid 블록을 사용하여 테마 코드를 편집하지 않고도 제품 페이지에 Shop Promise 모듈을 추가할 수 있습니다.

사용자 지정 Liquid 블록을 사용하여 Promise 모듈을 추가하는 단계:

데스크톱

  1. Shopify 관리자에서 **온라인 스토어** > **테마**로 이동합니다.

  2. 편집하려는 테마를 찾아 **테마 편집**을 클릭합니다.

  3. 상단 메뉴 표시줄의 템플릿 선택기를 사용하여 제품 페이지로 이동합니다.

  4. 사이드바 메뉴에서 **제품 정보** 섹션을 찾습니다.

  5. **블록 추가**를 클릭하고 사용 가능한 블록 목록에서 **사용자 지정 Liquid**를 선택합니다.

  6. 사용자 지정 Liquid 텍스트 필드에 다음 코드를 붙여넣습니다.

<div class="delivery-promise__promise-container"></div>
  1. 블록을 원하는 위치로 끌어다 놓습니다(일반적으로 구매 버튼 블록 아래).
  2. 변경 사항을 적용하려면 **저장**을 클릭합니다.

테마 기본 설정(어두운 테마 또는 밝은 테마)을 지정하려면 대신 다음 중 하나를 사용하십시오.

<div class="delivery-promise__promise-container" data-theme="dark"></div>

또는

<div class="delivery-promise__promise-container" data-theme="light"></div>
모바일

  1. Shopify app에서 Menu 아이콘을 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어 > 모든 테마 관리를 탭합니다.

  3. 활성 테마를 찾아 **테마 편집**을 탭합니다.

  4. 상단의 템플릿 선택기를 사용하여 제품 페이지로 이동합니다.

  5. 제품 정보 섹션을 탭하십시오.

  6. 블록 추가를 탭하고 사용자 지정 Liquid를 선택하십시오.

  7. 사용자 지정 Liquid 텍스트 필드에 다음 코드를 붙여넣습니다.

<div class="delivery-promise__promise-container"></div>
  1. 블록을 원하는 위치로 끌어다 놓습니다(일반적으로 구매 버튼 블록 아래).
  2. 저장을 탭하여 변경 사항을 적용하십시오.

테마 기본 설정(어두운 테마 또는 밝은 테마)을 지정하려면 대신 다음 중 하나를 사용하십시오.

<div class="delivery-promise__promise-container" data-theme="dark"></div>

또는

<div class="delivery-promise__promise-container" data-theme="light"></div>

Shop Promise 배지 지원 언어

Shop Promise 배지를 표시할 수 있는 언어는 다음 표를 참조하세요. 스토어 언어가 지원되지 않는 경우 Shop Promise 배지는 영어로 표시됩니다.

Shop Promise 배지를 표시할 수 있는 언어입니다.
중국어(간체)중국어(번체)크로아티아어체코어
덴마크어네덜란드어영어핀란드어
프랑스어독일어그리스어힌디어
헝가리어인도네시아어이탈리아어일본어
한국어리투아니아어말레이어노르웨이어(보크몰)
폴란드어포르투갈어(브라질)포르투갈어(포르투갈)루마니아어
러시아어슬로바키아어슬로베니아어스페인어
스웨덴어태국어터키어베트남어