도움말
로그인

제품 페이지에 Shop Promise 표시

Shopify가 Shop Promise 배송 기간 내에 해당하는 배송 날짜를 예측할 수 있는 경우, 자격을 갖춘 미국 국내 주문의 제품 옆에 Shop Promise 배지가 표시됩니다. 이 배지는 고객에게 해당 주문에 빠르고 안정적인 배송이 제공된다는 것을 알려줍니다.

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. 편집할 테마를 찾아 Horizontal menu 버튼을 탭하여 작업 메뉴를 연 다음 코드 편집을 탭하십시오.

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