로그인

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

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>
iPhone
  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>
Android
  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>
iPhone
  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>
Android
  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>

Promise 모듈을 위해 사용자 지정 HTML 또는 Liquid 코드 추가

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

Custom Liquid 블록을 사용하여 Promise 모듈을 추가하는 방법

데스크톱
  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
  2. 편집하려는 테마를 찾아 사용자 지정을 클릭하세요.
  3. 상단 메뉴 바의 템플릿 선택기를 사용하여 제품 페이지로 이동하세요.
  4. 사이드바 메뉴에서 제품 정보 섹션을 찾으세요.
  5. 블록 추가를 클릭하고 사용 가능한 블록 목록에서 Custom 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>
iPhone
  1. Shopify 앱에서 오버플로 메뉴를 탭합니다 다음 온라인 스토어를 탭합니다.
  2. 테마 관리를 탭합니다.
  3. 활성화된 테마를 찾아 사용자 지정을 탭하세요.
  4. 상단의 템플릿 선택기를 사용하여 제품 페이지로 이동하세요.
  5. 제품 정보 섹션을 탭하세요.
  6. 블록 추가를 탭하고 Custom 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>
Android
  1. Shopify 앱에서 오버플로 메뉴를 탭합니다 다음 온라인 스토어를 탭합니다.
  2. 테마 관리를 탭합니다.
  3. 활성화된 테마를 찾아 사용자 지정을 탭하세요.
  4. 상단의 템플릿 선택기를 사용하여 제품 페이지로 이동하세요.
  5. 제품 정보 섹션을 탭하세요.
  6. 블록 추가를 탭하고 Custom 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>
적절한 답변을 찾을 수 없습니까? 언제든지 도와드리겠습니다.