제품 페이지에 Shop Promise 표시하기

이 페이지는 Apr 26, 2024에 인쇄되었습니다. 최신 버전은 https://help.shopify.com/ko/manual/shipping/shop-promise/product-page에서 확인하십시오.

Shop Promise 배지는 미국 내에서 5일 이내에 배송될 것으로 예측되어 자격을 갖춘 배송의 배송 날짜 옆과 제품 페이지에 표시됩니다. 이 배지를 보고 고객은 자신의 주문이 빠르고 신뢰할 수 있게 배송된다는 것을 알 수 있습니다.

Shopify 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 Admin에서 온라인 스토어 > 테마로 이동합니다.
  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 앱에서 … 버튼을 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  5. 관련 파일을 엽니다.
  6. {%- if block.settings.show_dynamic_checkout -%} 또는 {{ form | payment_button }} 코드가 포함된 라인을 찾습니다.
  7. {%- 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 앱에서 … 버튼을 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  5. 관련 파일을 엽니다.
  6. {%- if block.settings.show_dynamic_checkout -%} 또는 {{ form | payment_button }} 코드가 포함된 라인을 찾습니다.
  7. {%- 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. 다크 또는 라이트로 설정된 새로 생성된 앵커 요소에 테마 데이터 특성을 추가합니다.
  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. 다크 또는 라이트로 설정된 새로 생성된 앵커 요소에 테마 데이터 특성을 추가합니다.
  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. 다크 또는 라이트로 설정된 새로 생성된 앵커 요소에 테마 데이터 특성을 추가합니다.
  3. 저장을 탭합니다.

결과는 다음 중 하나와 같이 보여야 합니다.

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

또는

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

Shopify와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험