온라인 스토어에 Planet 배지 추가하기
주문이 탄소 중립적임을 고객에게 홍보하려는 경우 온라인 스토어에 Planet 배지를 추가할 수 있습니다. 이 문서에서는 배지를 추가하고 모양을 사용자 지정하는 프로세스를 안내합니다.
이 페이지의 정보
Planet 배지 추가 시 고려 사항
온라인 스토어에 Planet 배지를 추가하기 전에 다음 고려 사항을 검토하십시오.
- Planet이 설치되어 있어야 합니다.
- Planet 가입 플랜에 대한 활성 가입이 필요합니다.
- 빈티지 테마를 사용하는 경우 Planet 배지를 사용자 지정할 수 없습니다.
사용 가능한 언어
Planet 배지에는 자체 번역을 적용할 수 없습니다. 하지만 Shopify 관리자를 변경할 수 있는 사용 가능한 언어 목록이 있습니다. Planet 앱 배지를 번역하려면 여러 언어로 판매하는 것과 호환되는 테마를 사용해야 합니다. 고객이 원하는 언어를 선택할 수 있도록 기본 테마 언어를 변경하고 다른 언어를 추가할 수 있습니다.
Online Store 2.0 테마에 Planet 배지 추가하기
Online Store 2.0 테마를 사용하는 경우 테마 편집기를 사용해 온라인 스토어의 모든 페이지에 Planet 배지를 직접 추가할 수 있습니다.
단계:
Shopify Admin에서 설정 > 앱 및 판매 채널을 클릭합니다.
앱 및 판매 채널 페이지에서 Online store을(를) 클릭합니다.
판매 채널 열기 버튼을 클릭합니다.
테마를 클릭합니다.
현재 테마 섹션에서 사용자 지정을 클릭합니다.
홈페이지, 카트 등 Planet 배지를 추가할 페이지를 선택합니다.
-
기존 섹션이나 새 섹션에 배지를 추가합니다.
- 기존 섹션에 배지를 추가하려면 블록 추가를 클릭한 다음 Planet을 선택합니다.
- 새 섹션에 배지를 추가하려면 섹션 추가를 클릭한 다음 Planet을 선택합니다.
저장을 클릭합니다.
Planet 배지 디자인 사용자 지정하기
온라인 스토어 2.0 테마를 사용하는 경우 테마 편집기에서 Planet 배지의 모양을 사용자 지정할 수도 있습니다. 사용자 지정할 수 있는 특성은 다음과 같습니다.
- 배경색 및 테두리
- Planet 로고, 추가 정보 섹션, 통계 섹션 및 자금을 지원한 혁신 섹션 표시
- 배지 크기, 여백, 모서리 둥글게 만들기 치수
다음 표를 검토하여 사용자 지정할 수 있는 다양한 Planet 배지 특성에 대해 자세히 알아보세요.
| 특성 | 설명 | 사용자 지정 옵션 |
|---|---|---|
| Planet 로고 | Planet 로고는 오른쪽 아래에 어두운 잎이 떨어져 있는 연한 녹색 원으로 표시됩니다. 배지 크기에 따라 배지의 왼쪽이나 왼쪽 위 모서리에 로고가 표시됩니다. | Planet 로고 확인란을 선택하거나 선택 취소할 수 있습니다. |
| 추가 정보 링크 | Impact 페이지가 설정되어 있는 경우 추가 정보 링크를 표시하여 고객을 Impact 페이지로 연결할 수 있습니다. 배지 크기에 따라 배지의 오른쪽이나 오른쪽 위 모서리에 추가 정보 클릭 유도 문구(CTA)가 추가 정보 링크로 표시됩니다. Impact 페이지가 설정되어 있지 않은 경우 Powered by Shopify Planet 텍스트가 표시됩니다. | "추가 정보" 섹션 표시 확인란을 선택하거나 선택 취소할 수 있습니다. |
| 제거된 탄소 배출량 표시 | 제거된 탄소 배출량 표시는 Planet으로 지원한 프로젝트를 통해 공기 중에서 제거된 탄소 배출량을 kg으로 표시합니다. 또한 제거된 탄소 배출량 표시는 일반 가솔린 차량으로 주행한 마일 거리를 비교하여 표시하므로 고객이 탄소 중립 배송 영향력을 관련시키고 정량화할 수 있습니다. | 제거된 탄소 배출량 표시 확인란을 선택하거나 선택 취소할 수 있습니다. |
| 자금을 지원한 혁신 표시 | 각 구독 플랜은 다양한 회사와 혁신적인 솔루션에 자금을 지원하는 데 도움이 됩니다. 구독 플랜에 따라 자금을 지원한 혁신 섹션에는 지원 중인 탄소 배출을 제거하는 프로젝트 유형의 예가 표시됩니다. | 제거된 탄소 배출량 표시 확인란을 선택하거나 선택 취소할 수 있습니다. |
단계:
Shopify Admin에서 설정 > 앱 및 판매 채널을 클릭합니다.
앱 및 판매 채널 페이지에서 Online store을(를) 클릭합니다.
판매 채널 열기 버튼을 클릭합니다.
테마를 클릭합니다.
현재 테마 섹션에서 사용자 지정을 클릭합니다.
홈페이지나 카트 등 Planet 배지를 추가한 페이지를 선택합니다.
드롭다운 메뉴의 앱 섹션에서 Planet 앱 블록을 선택합니다.
Planet 배지 맞춤 설정을 적용합니다.
저장을 클릭합니다.
빈티지 또는 사용자 지정 테마에 Planet 배지 추가하기
빈티지 테마나 사용자 지정 테마를 사용하는 경우 Planet 배지를 추가하려면 테마 코드를 수동으로 편집해야 합니다.
단계:
Shopify Admin에서 설정 > 앱 및 판매 채널을 클릭합니다.
앱 및 판매 채널 페이지에서 Planet을(를) 클릭합니다.
앱 열기 를 클릭합니다.
Planet 배지 표시 섹션에서 배지 추가를 클릭합니다.
다음 코드 조각을 복사합니다.
<!-- Start of Shopify Planet code snippet --> <link href="https://cdn.shopify.com/shopifycloud/shopify-planet/bundles/latest/snippet.css" rel="stylesheet" type="text/css" media="all"> {%- assign CURRENT_DATE = "now" | date: "%Y-%m-%dT%H:%MZ" -%} {%- assign ACTIVE_UNTIL = shop.metafields.shopify-planet.active-until | date: "%Y-%m-%dT%H:%MZ" -%} <script src="https://cdn.shopify.com/shopifycloud/shopify-planet/bundles/latest/snippet.js" async></script> {% if CURRENT_DATE < ACTIVE_UNTIL or request.design_mode %} {% if block.settings.badgeMode != "buyer_contribution" %} <div class="shopify-planet-banner"> <img src="https://cdn.shopify.com/extensions/77a33867-106a-4608-bb7c-98fa40ed256a/0.25.0/assets/logo.png" alt="Carbon-neutral shipping with Shopify Planet" width="34" height="30" loading="lazy"> <div class="shopify-planet-banner-title-container"> <div class="shopify-planet-banner-title">All deliveries are carbon neutral</div> {% if shop.metafields.shopify-planet.impact-comms-linked %} <div class="shopify-planet-banner-subtitle-link"><a href="/pages/climate-commitment" target="_blank">More info</a></div> {% else %} <div class="shopify-planet-banner-subtitle">Powered by Shopify Planet</div> {% endif %} </div> </div> {% endif %} {% endif %} <!-- End of Shopify Planet code snippet -->-
배지를 추가하려면 다음 파일 중 하나로 이동하십시오.
- 카트 페이지에 배지를 추가하려면 templates/cart.liquid 파일로 이동합니다.
- 제품 페이지에 배지를 추가하려면 templates/product.liquid 파일로 이동합니다.
배지를 표시할 위치에 코드 조각을 붙여넣은 후 저장을 클릭합니다.
미리 보기를 클릭하면 온라인 스토어에 배지가 어떻게 표시되는지 미리 볼 수 있습니다.