WORK ABOUT LAB CONTACT
contact@yellow-finger.com
02.2205.4128

10 Ways to Customize Checkout with Checkout Extensibility

체크아웃 확장성을 통해 체크아웃을 사용자 지정하는 10가지 방법이 있습니다

10 Ways to Customize Checkout with Checkout Extensibility
Learn about 10 different ways you can customize Shopify checkout with checkout UI extensions and Shopify Functions.
체크아웃 UI 확장 기능과 쇼핑 기능을 사용하여 쇼핑을 맞춤화할 수 있는 10가지 방법에 대해 알아보세요.
요약 :)
Shopify에서는 고객 전환과 관련하여 결제가 얼마나 중요한지 잘 알고 있습니다. 결과적으로 우리는 Shopify 결제가 놀라울 정도로 빠르고 사용하기 쉬울 수 있도록 끊임없이 노력했습니다.

그러나 주문을 정확하고 판매자의 정책 및 규정을 준수하면서 체크아웃이 브랜드가 쇼핑객을 유인하는 데 필요한 고유한 경험, 프로모션 및 기능을 제공할 수 있는 유연성을 갖는 것도 중요합니다. 마케팅 측면에서 이는 전환율을 높이고 평생 고객 및 평균 주문 가치를 극대화하는 체크아웃을 설계하는 것을 의미합니다. 규정 준수와 관련하여 브랜드는 정확한 구매자 기대치를 설정하고 주문이 브랜드의 비즈니스 규칙 및 관련 규정을 따르도록 할 수 있습니다. 체크 아웃 확장성이 필요한 곳입니다.

결제 확장성을 통해 Shopify Plus의 모든 브랜드에 대한 맞춤형 결제를 구축하는 데 필요한 도구, 기능 및 배포 모델을 얻을 수 있습니다. 이 기사에서는 체크아웃 사용자 지정을 구축하는 데 사용할 수 있는 특정 기술과 이러한 기술을 강화할 수 있는 몇 가지 주요 사용 사례에 대해 자세히 설명합니다.
더보기→

출처.
Warren Pamukoff. (2023.02.21). Shopify. 10 Ways to Customize Checkout with Checkout Extensibility. 2023.02.23. https://www.shopify.com/partners/blog/customize-checkout
Shopify에서는 고객 전환과 관련하여 결제가 얼마나 중요한지 잘 알고 있습니다. 결과적으로 우리는 Shopify 결제가 놀라울 정도로 빠르고 사용하기 쉬울 수 있도록 끊임없이 노력했습니다. 그러나 주문을 정확하고 판매자의 정책 및 규정을 준수하면서 체크아웃이 브랜드가 쇼핑객을 유인하는 데 필요한 고유한 경험, 프로모션 및 기능을 제공할 수 있는 유연성을 갖는 것도 중요합니다. 마케팅 측면에서 이는 전환율을 높이고 평생 고객 및 평균 주문 가치를 극대화하는 체크아웃을 설계하는 것을 의미합니다. 규정 준수와 관련하여 브랜드는 정확한 구매자 기대치를 설정하고 주문이 브랜드의 비즈니스 규칙 및 관련 규정을 따르도록 할 수 있습니다. 체크 아웃 확장성이 필요한 곳입니다. 결제 확장성을 통해 Shopify Plus의 모든 브랜드에 대한 맞춤형 결제를 구축하는 데 필요한 도구, 기능 및 배포 모델을 얻을 수 있습니다. 이 기사에서는 체크아웃 사용자 지정을 구축하는 데 사용할 수 있는 특정 기술과 이러한 기술을 강화할 수 있는 몇 가지 주요 사용 사례에 대해 자세히 설명합니다. 결제 확장성은 개발자가 결제를 사용자 지정할 수 있는 강력한 기능 모음입니다. 여기에는 다음이 포함됩니다. 결제 UI 확장 웹 픽셀 확장 Shopify 기능 체크아웃 브랜딩 API Shopify Winter '23 Edition 에서 우리는 개발자와 판매자 모두에게 큰 이점을 제공하는 새로운 체크아웃 UI 확장 기능과 노출 영역을 발표했습니다 . 개발자 측에서는 이제 결제 앱을 Shopify 앱 스토어 의 Shopify Plus 판매자에게 직접 판매할 수 있으므로 쉽게 설치하고 구성할 수 있도록 광범위하게 배포할 수 있습니다. 앱 기반 결제 확장 프로그램은 업그레이드가 안전하고 전환율이 높으며 Shop Pay와 통합되어 있습니다. 사내 개발자와 대행사는 또한 특정 판매자를 위한 맞춤형 앱을 개발하기 위해 모든 동일한 플랫폼 기능에 액세스할 수 있습니다. Shopify Plus 관리자는 앱을 설치하고 새 체크아웃 편집기 에서 직접 구성할 수 있습니다 . 관리자의 경우 이 앱 기반 모델은 코드를 건드릴 필요 없이 체크아웃을 빠르게 사용자 지정할 수 있음을 의미합니다. 결제 확장으로 더 나은 결제 환경을 구축하는 10가지 방법 이제 결제 확장성이 의미하는 바를 대략적으로 이해했으므로 고유한 결제 경험을 구축하는 데 어떻게 도움이 되는지 살펴보겠습니다. 1. 맞춤 배너 메시지로 기대치를 설정합니다. 신규 고객 획득 비용이 증가 함에 따라 브랜드는 특히 체크아웃 과정에서 고객의 신뢰를 얻고 유지하는 것이 중요합니다. 이러한 신뢰는 구매자에게 명확한 기대치를 설정하고 구매를 완료하기 전에 모든 관련 정보를 제공하는 데 도움이 됩니다. 맞춤 배너 메시지를 사용하면 결제 페이지에 바로 구매자를 위한 중요한 정보를 포함할 수 있으므로 구매자가 구매 프로세스를 진행할 때 놀라지 않습니다. 체크아웃 시 브랜드가 표시하는 맞춤 배너 메시지의 일반적인 예는 다음과 같습니다. 반품 및 교환 불가 상품 공유 잠재적인 배송 지연 강조 표시 휴일 처리 시간과 같은 특별한 상황에 대해 구매자에게 알립니다. 산업별 신뢰 배지, 평가 또는 인용문 표시 결제 UI 확장을 활용하면 Checkout::Dynamic::Render결제 내 확장 지점 에서 렌더링되는 여러 버전의 맞춤 배너를 빠르게 구축할 수 있습니다 . 무엇보다도 배너가 표시되도록 체크아웃에서 특정 위치를 선택하거나 체크아웃 편집기를 사용하여 이러한 배너를 표시할 위치와 방법을 판매자가 결정할 수 있는 선택권을 제공할 수 있습니다. 카트에 두 쌍의 화려한 신발이 있는 맞춤형 체크아웃 모형 및 최종 판매 조건에 대한 맞춤형 배너 표시 서로 다른 두 가지 체크아웃 예시, 둘 다 구매자가 배송 지침과 같은 정보를 기록할 수 있는 특수 필드를 보여줍니다. 맞춤형 배너 제작을 시작하려면 아래 링크에서 개발자 설명서를 방문하십시오. 2. 사용자 지정 필드를 활용하여 추가 정보 수집 경우에 따라 주문이 제대로 처리되도록 하거나 고객 경험을 개인화하거나 비즈니스 규정 준수 규칙을 충족하기 위해 결제 시 고객으로부터 추가 정보를 수집해야 합니다. 이러한 기대치를 충족하기 위해 많은 브랜드에서 맞춤형 입력을 활용하여 구매자로부터 중요한 정보를 수집합니다. 예를 들어 다음을 수집할 수 있습니다. 부저 코드와 같은 아파트 또는 사무실 건물에 대한 배달 지침 비대면 배송 요청 배송과 관련된 특별 관리 지침 지속 가능한 포장에 대한 요청 배달 지침은 사용자 지정 필드로 수행할 수 있는 유일한 작업이 아닙니다. 또한 구매자를 위한 고객 경험을 더 잘 조정할 수 있도록 추가 정보를 캡처할 수 있습니다. 몇 가지 예는 다음과 같습니다. 주문 받는 사람에게 개인적인 감동을 더할 수 있는 선물 메시지 제공 마케팅을 개인화하기 위해 구매자의 선호도에 대한 자발적인 정보 수집 멤버십 또는 ID 번호 추가 Checkout UI 확장을 사용하여 확장 지점에서 렌더링되는 이러한 특수 필드를 추가할 수 있습니다 Checkout::ShippingMethods::RenderAfter. 서로 다른 두 가지 결제 예시의 목업 이미지가 나란히 표시되어 있으며 둘 다 상단에 배송 방법 필드가 표시되어 있습니다. 왼쪽의 체크아웃에는 배송 지침을 제공하는 필드가 있고 오른쪽의 체크아웃에는 구매가 선물인 경우 고객이 받는 사람에게 메시지를 추가할 수 있습니다. 서로 다른 두 가지 체크아웃 예시, 둘 다 구매자가 배송 지침과 같은 정보를 기록할 수 있는 특수 필드를 보여줍니다. 맞춤형 배송 지침 작성을 시작하려면 아래 링크를 방문하십시오. 3. 제품 상향 판매 제안을 사용하여 평균 주문 가치를 높입니다. 체크아웃 내에서 상향 판매 제안을 추가하는 기능은 아마도 Shopify Plus 판매자에게 가장 인기 있는 체크아웃 사용자 정의일 것입니다. 전 세계의 브랜드는 이러한 체크아웃 상향 판매 메시지를 활용하여 평균 주문 가치를 높이고 아래 예시의 우주 테마 신발 및 양말과 같은 컬렉션의 관련 항목을 교차 판매하는 데 도움을 줍니다. Shopify Winter '23 Edition 에서는 Storefront API에 액세스 하여 상향 판매 논리를 강화할 수 있도록 하여 결제 상향 판매를 더욱 강력하게 만들었습니다 . 이 기능을 사용하면 카트에 있는 항목의 기존 제품 또는 컬렉션 태그를 기반으로 고객에게 가장 관련성이 높은 항목을 제안할 수 있습니다. 결제 UI 확장을 사용하여 확장 지점 에서 렌더링되는 사전 구매 제품 제안을 빌드할 수 있습니다 Checkout::Dynamic::Render. 고객의 신발 두 켤레 구매와 함께 사용할 양말 제품 제안이 포함된 체크아웃 모형 원래 구매와 관련된 제품을 표시하는 '좋아요' 섹션이 있는 결제 환경의 예입니다. 아래 링크에서 제품 제안 작성을 시작하려면 설명서를 참조하십시오. 4. 기부 배너 및 상향 판매로 중요한 원인 강조 그 어느 때보다 더 많은 상거래 옵션을 통해 소비자는 점점 더 자신이 열정을 갖고 있는 환경, 사회 및 거버넌스 원인(ESG라고 함)을 지원하는 브랜드에서 구매하기를 원합니다. 이러한 우려를 정량화하는 데 도움이 되도록 ESG 요소는 모든 소비자 구매 결정의 거의 절반 에 영향을 미칠 것입니다 . 결과적으로 브랜드가 고객에게 지원하는 원인을 알리는 것이 중요합니다. 판매자가 고객이 그 원인에 기부할 수 있는 방법을 제공할 수 있다면 더 좋습니다. 여기에서 체크아웃 확장성이 작용합니다. 사용자 지정 배너 및 상향 판매 제안과 같은 체크아웃 UI 구성 요소를 사용하여 확장 지점에 표시되는 기부 옵션을 구축할 수 있습니다 Checkout::Dynamic::Render. 이러한 기부 옵션에는 구매자가 특정 자선 단체를 지원하거나 구매 금액 중 특정 목적을 위한 금액을 알리는 방법이 포함될 수 있습니다. 체크아웃 흐름에 직접 기부 옵션을 포함함으로써 고객은 브랜드가 믿는 원인을 빠르게 이해하고 쉽게 지원을 추가할 수 있습니다. 고객이 자선 단체에 기부할 수 있는 맞춤 배너가 있는 체크아웃 모형 구매자가 구매에 기부금을 추가할 수 있는 맞춤 배너가 있는 체크아웃의 예입니다. 아래 링크에서 기부 배너 만들기를 시작하세요. 5. 구매를 확인하여 올바른 고객에게 판매 결제의 궁극적인 목표는 고객을 전환하는 것이지만 구매를 완료하기 전에 특정 자격을 충족해야 하는 경우가 많습니다. 주류 또는 대마초 제품과 같이 연령 확인이 필요한 품목을 판매할 때 고객이 규정을 준수하는지 확인하는 것이 특히 중요합니다. 장바구니 및 결제 유효성 검사 Shopify 기능을 사용하면 주문이 판매자가 결정한 특정 규칙 세트를 준수하는 경우에만 고객이 구매를 완료할 수 있도록 할 수 있습니다. UI 확장을 사용하여 필드 유효성 검사를 수행할 수도 있습니다 . 카트 및 체크아웃 유효성 검사의 가장 일반적인 사용 사례는 다음과 같습니다. 고객의 연령 확인 체크아웃 데이터가 외부 시스템과 제대로 동기화되도록 글자 수 제한 적용 고객이 체크아웃하기 전에 사용자 정의 필드를 작성하도록 요구 사서함이 아닌 배송 주소로 항목을 배송할 수 있는지 확인 라이터 및 리튬 배터리와 같이 함께 구매해서는 안 되는 품목이 카트에 포함되어 있지 않은지 확인 결제가 최소 주문 또는 최대 주문을 준수하는지 확인 장바구니에 있는 일부 항목을 구매할 수 있는 법적 연령이 아님을 고객에게 경고하는 체크아웃 유효성 검사 규칙 모형 제품을 구매하기 전에 고객이 적절한 연령인지 확인하는 유효성 검사 규칙의 예입니다. 아래 링크에서 개발자 문서를 방문하여 첫 번째 유효성 검사 규칙을 작성하십시오. 6. 구매자에게 인센티브를 제공하기 위해 맞춤 할인을 만듭니다. 고유한 할인 프로모션을 제공하는 것은 브랜드가 고객을 유치하고, 판매를 촉진하고, 카트 크기를 늘리고, 경쟁에서 우위를 점할 수 있는 핵심 방법입니다. Shopify 기능을 활용하여 결제 시 자동으로 표시되는 맞춤형 제품 , 주문 및 배송 할인을 구축할 수 있습니다 . 추가 보너스로 사용자 지정 할인 규칙은 Shopify 관리자에서 직접 구성되며 Shopify의 자동 할인 과 함께 Shopify 분석 판매 보고에서 볼 수 있습니다 . 브랜드가 오랫동안 관심을 가져 온 몇 가지 일반적인 할인 아이디어에는 구매한 품목 수에 따른 대량 할인 또는 특정 달러 임계값에 도달했을 때 구매 시 사은품 증정이 포함됩니다. 고객이 구매하는 품목이 많을수록 추가 할인을 보여주는 맞춤형 체크아웃 모형 제품 페이지의 맞춤형 볼륨 할인이며 결제 시 반영됩니다. 아래 링크에서 맞춤형 할인 혜택을 구축하는 방법을 알아보세요. 7. 결제 및 배송 사용자 정의로 결제 및 배송 방법 표시 계산대에서 높은 비율의 버려진 장바구니를 보는 것보다 브랜드에 더 나쁜 것은 없습니다. 장바구니 포기를 줄이는 데 도움이 되는 전술이 많이 있지만 가장 성공적인 전략 중 하나는 전환율이 가장 높은 결제 옵션을 고객에게 강조 표시하도록 체크아웃 환경을 사용자 지정하는 것입니다. Shopify 기능을 통해 브랜드는 특정 기준 세트를 충족하는 고유한 배송 옵션을 표시하여 대상 고객에게 어필할 수 있습니다. 예를 들어 브랜드는 주문 처리 센터에서 특정 거리(ZIP 또는 우편 번호로 결정됨) 내에 거주하는 구매자에게 친환경 자전거 배송 옵션으로 현지 고객을 유인할 수 있습니다. 결제 사용자 지정과 관련하여 다양한 요인에 따라 구매자에게 사용자 지정 결제 옵션을 숨기고 재정렬하고 표시할 수 있습니다. 가장 인기 있는 결제 맞춤화 중 하나는 총 주문 금액이 특정 임계값 미만인 경우 고객에게 "대금 상환" 옵션을 표시하는 것입니다. 고객에게 두 가지 배송 옵션과 두 가지 결제 옵션을 제공하는 맞춤형 결제 모형 카트 값이 사전 설정된 임계값을 초과하면 사라지는 '배송 시 현금' 옵션의 예입니다. 아래 링크를 통해 결제 또는 배송 사용자 정의 구축을 시작하십시오. 8. 충성도 보상 프로그램으로 가장 가치 있는 고객에게 보상 고객 확보 비용이 급증함에 따라 브랜드가 고객 유지에 집중하는 것이 그 어느 때보다 중요해졌습니다. 충성 고객이 일반 고객보다 22배 더 가치가 있다는 사실을 고려할 때 특히 그렇습니다 . 브랜드 충성도를 높이는 가장 좋은 방법 중 하나는 가장 충성도가 높은 반복 고객에게 특별 할인을 제공하는 것입니다. 고맙게도 체크아웃 UI 확장을 위한 새로운 세션 토큰 및 할인 코드 API 덕분에 체크아웃에 충성도 사용자 정의를 추가하는 것이 그 어느 때보다 쉬워졌습니다. 새로운 세션 토큰 API를 통해 Shopify는 앱 서버에서 확인할 수 있는 서명된 토큰을 제공합니다. 이 토큰은 결제 시 Shopify 할인 코드를 적용하는 것과 결합될 때 보안 로열티 포인트 상환을 보장하기 위해 앱에서 사용할 수 있습니다. 구매자의 신원과 내역이 확인되면 브랜드는 우수 고객에게 VIP 할인을 제공할 수 있습니다. 맞춤 결제: 결제 시 고객에게 제공되는 20% 충성도 할인 모형 충성 고객에게 제공되는 20% 할인의 예. 이 업데이트를 통해 브랜드는 구매자에게 체크아웃 시 할인 코드에 대한 충성도 포인트를 교환할 수 있는 옵션을 제공할 수 있습니다. 고객이 할인을 위해 로열티 포인트를 교환할 수 있도록 하는 체크아웃 사용자 정의 목업 구매자에게 충성도 포인트를 할인으로 사용할 수 있는 옵션을 보여주는 체크아웃의 예입니다. 아래 링크에서 충성도 사용자 정의 구축을 시작하려면 설명서를 참조하십시오. 9. 고유한 브랜드 및 쇼핑 경험 구축 2021년 전 세계적으로 팬데믹 제한이 완화되면서 물리적 소매가 사상 처음으로 전자상거래보다 빠르게 성장했습니다 . 이러한 추세에 더해 Z세대 쇼핑객의 절반은 매장 내 경험을 선호합니다. 이러한 변화에 대처하기 위해 브랜드는 재미있고 독특한 온라인 쇼핑 경험을 제공해야 합니다. 사용 가능한 체크아웃 확장성 기능 제품군을 활용하면 다음과 같은 방법으로 온라인 쇼핑을 즐겁게 할 수 있습니다. 메타필드를 사용하여 충성도가 가장 높은 고객에게 프로모션을 식별하고 표시 Storefront API를 활용하여 관련 결과를 가져오고 무료 선물 제안을 개인화합니다. 여러 체크아웃 UI 구성 요소를 사용하여 아래에 표시된 퀴즈 질문과 같이 브랜드 고유의 독특한 경험을 구성하십시오. 고객이 객관식 질문에 올바르게 답하면 고객에게 무료 양말 한 켤레를 제공하도록 게임화된 맞춤형 체크아웃 모형 퀴즈 질문을 사용한 고유한 체크아웃 경험의 예입니다. 구매자가 올바르게 선택하면 양말 한 켤레를 무료로 받을 수 있습니다. 문서를 방문하여 고유한 쇼핑 경험 구축을 시작하십시오. 10. 스타일을 반영하는 단일 모양과 느낌을 상속합니다. 강조할 마지막 기능은 브랜드가 Branding API 를 사용하여 체크아웃 모양에 대한 고급 사용자 정의를 만들 수 있다는 것입니다 . 이 API를 사용하면 체크아웃의 색상 및 글꼴 변경에서 파비콘 추가 또는 버튼의 모서리 반경 조정에 이르기까지 사용자 정의할 수 있습니다. 무엇보다 이 브랜딩은 결제, Shop Pay에 자동으로 적용되며 상점에 설치된 결제 확장 프로그램에 상속됩니다. 즉, 앱 사용자 지정을 한 번만 설치하면 되고 결제 확장 프로그램의 모양과 느낌을 업데이트할 때마다 코드를 수정할 필요가 없습니다. Shopify Branding API를 사용하여 외관을 변형하는 맞춤형 결제 모형Branding API를 사용하여 체크아웃 모양 변경. 결제 브랜딩을 시작하려면 개발자 문서를 방문하세요. 결제 사용자 지정 브랜드에서 체크아웃 UI 확장 및 Shopify 기능을 활용하여 체크아웃 경험을 사용자 정의할 수 있는 고유한 방법이 많이 있으며 이는 빙산의 일각에 불과합니다. 올해 내내 사용자 지정 옵션을 향상시키기 위해 새로운 기능을 신속하게 추가할 계획입니다. 또한 이 블로그는 체크아웃 UI 확장 및 Shopify 기능에 중점을 두었지만 체크아웃을 사용자 지정하는 데 활용할 수 있는 다른 노출 영역과 기능이 많이 있습니다. 예를 들어 구매 후 확장 기능 이나 웹 픽셀 로 고객 이벤트를 추적 하지도 않았습니다 . 결제를 연장할 수 있는 모든 방법에 대해 알아보려면 개발자 설명서를 읽어보십시오 .