Webflow 전자상거래를 활용하면 전체 쇼핑 여정과 원활하게 조화되도록 결제 프로세스를 맞춤 설정할 수 있습니다. 장바구니, 결제, 주문 승인 등 전자상거래 보조 페이지를 개인화하고 디자인하는 방법을 살펴보겠습니다.
이번 교육 세션 내에서
- 카트 스타일을 선택하세요
- 카트 전환 맞춤화
- 다양한 카트 조건 설계
- 장바구니 컨테이너 개선
- 결제 진행 상황 이해
- 결제 페이지 수정
- PayPal 결제 프로세스 조정
- 결제 오류 알림 조정
- 주문 승인 페이지 및 관련 구성 요소 이해
- 최소 및 최대 거래 금액 이해
- 비용 없는 주문 파악
장바구니 버튼을 삽입하고 개인화하고 디자인한 후에는 이제 장바구니 자체를 개인화할 수 있습니다. 열기 및 닫기 애니메이션의 종류, 부드러움, 지속 시간, 장바구니 미리 보기에 표시할 항목 수를 선택할 수 있습니다. 항목이 추가되면 열리도록 설정할 수도 있습니다.
카트 스타일을 선택하세요
디자인 영역에서 Cart 요소를 식별하고 장바구니 시작 내 요소 구성 패널 (디). 그런 다음 카트.
장바구니 전환 개인화
교대 근무를 설정하여 카트가 시작하고 끝나는 방식을 조정하세요. 부드러움 그리고 지속 애니메이션을 위해. 미리보기 모드에서 효과를 실험해 볼 수 있습니다.
별도의 카트 상태 디자인
이제 카트가 표시되는 방식을 설정했으므로 3가지 모드 내에서 다양한 요소의 스타일을 지정할 수 있습니다.
- 기본값(장바구니 개요)
- 비어 있음(장바구니에 품목이 없는 경우)
- 오류(결제 장애가 발생한 경우).
다음에서 이러한 모드 간에 전환할 수 있습니다. 카트 컨테이너 설정.
더 발견하다: 장바구니 요소
다양한 상태에 맞게 카트를 맞춤화하세요.
에 대한 기본 상태에서는 장바구니 미리보기에 표시할 항목의 수량을 지정할 수 있습니다.
에 대한 오류 상태에서 결제 실패 시 나타날 수 있는 오류 알림을 조정하세요. 다음을 선택하세요. 에러 메시지 액세스할 수 있는 텍스트 블록 오류 메시지 설정. 다음을 클릭하세요. 연필 아이콘 수정하려면 마우스를 올리면 설정 내 오류 메시지 옆에 표시됩니다.
당신은 할 수 있습니다 기본값 복원 오류 메시지 오류 메시지 편집.
장바구니의 스타일 지정 및 사용자 정의가 완료되면 장바구니를 열 때처럼 닫으세요. 요소 설정 패널 > 장바구니 시작.
장바구니 컨테이너 디자인
카트를 열면 반투명 오버레이가 페이지의 카트를 둘러쌉니다. 이를 "카트 래퍼"라고 합니다.
래퍼의 배경색을 변경하려면 다음을 수행하세요.
- 선택 카트 포장지 (당신은 항해자 정확성을 위해)
- 배경색을 변경하세요. 스타일 패널
- 단색을 선택하고 투명도를 도입하여 현재 페이지의 팝업 모달임을 나타냅니다.
Cart 래퍼의 배경색 특성에서 적용된 스타일을 제거하여 언제든지 기본 스타일로 되돌릴 수 있습니다.
지불 흐름 이해
제품 페이지 또는 제품 목록에서 구매자는 다음 중 하나를 수행할 수 있습니다. 장바구니에 포함 또는 다음을 통해 직접 결제를 진행하세요. 지금 구입 선택.
주목: PayPal 결제는 별도의 흐름을 따르므로, 지금 구입 Stripe이 활성화된 매장에서만 유효합니다.
자세히 알아보기: 장바구니에 추가하고 지금 구매하세요
결제 절차
고객이 장바구니에 상품을 추가하면 매장 설정에 따라 3가지 방법으로 결제를 완료할 수 있습니다.
- 다음으로 진행하세요. 지불 신용카드 결제를 완료하는 페이지입니다. 결제 페이지에서 프로모션 코드를 적용하거나 구매에 관한 추가 세부정보를 제공할 수도 있습니다. 알림: 이 선택에는 Stripe이 필요합니다..
- 활용 온라인 결제 (예: Apple Pay 또는 Google Pay) 원본을 건너뛰는 빠른 결제를 위한 결제 페이지. 알림: 이 기능에는 Stripe과 온라인 결제 옵션 활성화.
- 선택하다 페이팔 결제구매자가 PayPal을 승인할 수 있는 새 팝업이 열립니다. 그런 다음 구매자는 다음 페이지로 이동됩니다. 결제(페이팔) 페이지에서 구매를 완료하고 바우처를 사용하고 자세한 정보를 제공하세요. PayPal을 활성화한 경우 해당 페이지를 사용자 정의했는지 확인하세요.
알림: 다음을 삽입할 수도 있습니다. 온라인 결제 그리고 페이팔 버튼 기본값의 맨 위에 점검 장바구니에서 멀어지면 고객에게 더 많은 대안을 제공하는 페이지입니다.
결제 페이지 수정
온라인 고객이 장바구니에 품목을 추가하고 주문할 준비가 되면 장바구니를 열고 결제 진행을 선택하고 결제 페이지(/checkout)로 이동합니다.
이것은 조정할 수 있는 초기 전자상거래 유틸리티 페이지입니다. 에 위치하고 있어요 페이지 패널 기본 요소와 함께 도착합니다. 다음으로 구성된 모든 전자상거래 페이지를 수정할 수도 있습니다.
- 점검
- 체크아웃(PayPal) – PayPal이 활성화된 경우에만 사용자 정의가 필요합니다.
- 주문 확인
구성요소와 요소를 원하는 대로 재배치하고 디자인하여 결제 페이지를 개인화할 수 있습니다. 필수 필드가 있는 구성 요소를 제거하거나 숨기면 결제 양식이 중단될 수 있다는 점을 명심하세요. 언제든지 다시 추가할 수 있습니다. 품목 주문, 주문 요약, 그리고 온라인 결제 ~로부터 패널 추가 에 결제 페이지.
결제 양식
결제 페이지 양식의 모든 템플릿 요소를 포함합니다. 기본 결제 페이지 템플릿으로 되돌리려는 경우 이를 포함할 수 있습니다.
품목 주문
장바구니에 있는 모든 품목과 변형을 표시합니다. 구매자는 결제 과정을 완료하기 전에 해당 품목이 구매하려는 품목인지 확인할 수 있습니다.
주문 요약
장바구니의 소계, 세금 및 배송비, 총 주문 비용을 표시합니다. 이는 구매자가 지불하는 금액의 내역을 이해하는 데 도움이 됩니다.
온라인 결제
고객이 표준 결제 프로세스를 우회하고 디지털 지갑(예: Apple Pay 또는 Google Pay)을 사용하여 매장에서 구매를 신속하게 완료할 수 있습니다.
자세히 알아보기 온라인 결제 활성화.
추가 정보
결제 중에 수집된 추가 정보 필드에 입력된 데이터를 표시합니다. 알림: 자동으로 동기화되지 않는 별도의 라벨과 필드가 있으므로 주문 양식과 체크아웃 확인을 모두 업데이트해야 합니다.
디자인 제안: 사용자를 기본 스토어 페이지로 다시 연결하는 '쇼핑 계속' 버튼을 포함하여 이 페이지에 탐색 바와 바닥글을 도입할 수도 있습니다.
PayPal 결제 개인화
PayPal을 활용하려면 별도의 Checkout(PayPal) 템플릿 페이지를 디자인해야 합니다.
귀하의 사이트에 PayPal을 통합할 의사가 없다면 이 페이지에 대해 걱정할 필요가 없습니다. PayPal을 결제 공급자로 활성화하지 않으면 PayPal에 액세스할 수 없습니다.
라이브 사이트에서 PayPal을 활용하는 경우 PayPal을 통한 구매 순서는 다음과 같이 나타납니다.
- 구매자가 선택 페이팔 결제 ~로부터 카트 또는 (표준) 결제 페이지
- 구매자가 로그인하거나 결제 세부 정보 및 배송 주소를 입력하도록 안내하는 PayPal 결제 모드가 나타납니다.
- 구매자가 다음으로 반품합니다. 결제(PayPal) 페이지 페이팔 검증 후
- 구매자가 배송 방법을 선택합니다. 결제(PayPal) 페이지 (적용된다면)
- 구매자가 구매를 완료합니다.
- 구매자는 주문 확인 페이지 구매가 완료되면
Checkout(PayPal) 페이지 디자인하기
그만큼 결제(PayPal) 페이지 전자상거래가 활성화되면 자동으로 생성됩니다.
알림: PayPal을 포함하기 전에 전자상거래가 활성화된 프로젝트의 경우 PayPal 버튼을 추가한 후 페이지가 자동으로 생성됩니다. 카트 또는 결제 페이지. 이 페이지를 찾을 수 없으면 장바구니에 PayPal 버튼을 추가해 보세요.
유사하다 결제 페이지, Paypal 페이지에는 기본 요소가 포함되어 있으며 이를 통해 보완하고 교체할 수 있습니다. 패널 추가.
모듈은 결제 게이트웨이(PayPal) 페이지 의 기능과 동일하게 작동합니다. 결제 페이지, 아직 이 두 섹션은 서로 연결되어 있지 않습니다. 비슷한 레이아웃과 모양을 가지고 있는지 수동으로 확인해야 합니다.
채용을 희망하시는 경우 할인 또는 수집 추가 세부정보 결제하는 동안 두 제품 모두에 이러한 구성 요소를 통합하는 것을 잊지 마십시오. 지불 그리고 결제 게이트웨이(PayPal) 페이지.
PayPal Checkout 페이지와 Checkout의 구별 기능
- 구매자가 PayPal을 통해 결제하기 때문에 결제 세부정보를 입력하는 필드가 없습니다.
- 이 페이지에서 구매자가 기대하는 유일한 정보는 선호하는 배송 방법입니다.
- 배송이 필요하지 않은 품목만 주문한 경우 배송 방법을 선택할 필요가 없습니다. 이러한 시나리오에서 페이지는 구매를 완료하기 전 최종 확인과 유사하게 작동합니다.
메모: PayPal은 구매자의 청구서 수신 주소 전체를 Webflow로 전송하지 않습니다. 게시된 웹사이트에서는 결제 세부정보 섹션 청구서 수신 주소의 이름과 국가만 표시됩니다.
결제 페이지 오류 알림 개인화
결제 과정에서 오류가 발생하면 구매자는 다양한 오류 메시지를 접하게 됩니다. 다음을 선택하여 이러한 메시지를 미리 보고 개인화할 수 있습니다. 지불 양식 구성 요소로 전환하고 오류 구성 패널 내 상태.
다음으로 에러 메시지 액세스할 수 있는 구성 요소 오류 메시지 구성. 캔버스의 각 메시지를 보려면 설정을 탐색하세요. 메시지를 편집하려면 편집 가능을 나타내는 연필 아이콘이 나타날 때까지 설정에서 해당 메시지 위로 마우스를 가져가세요.
메모: 매장에서 PayPal을 사용하는 경우, 동일한 오류 메시지를 사용자 정의해야 합니다. 결제 게이트웨이(PayPal) 페이지 도.
주문 확인 페이지 및 관련 요소를 이해합니다.
주문을 제출한 후 온라인 구매자는 주문 확인 페이지로 이동됩니다. 이는 또 다른 전자상거래 유틸리티로 사용됩니다. 페이지 패널 > 전자상거래 페이지 세그먼트.
그만큼 주문 확인 페이지 완전히 수정하고 디자인할 수 있는 기본 레이아웃이 특징입니다. 와 달리 결제 페이지, 이 페이지의 모든 구성요소는 패널 추가. 주문 확인 요소를 드래그하여 전체 템플릿을 모든 섹션과 통합할 수 있습니다.
주문 확인 컨테이너 내에 다음 요소를 개별적으로 통합할 수 있습니다.
- 주문 확인
- 품목 주문
- 클라이언트 정보
- 배달 방법
- 지불 세부 사항
- 주문 요약
- 추가 정보
- 다운로드(베타)
주문 확인
주문 확인 페이지 템플릿의 모든 요소를 포함합니다. 기본 페이지 템플릿을 복원하려면 이를 추가하세요.
품목 주문
장바구니에 있는 모든 제품과 변형을 표시합니다. 구매자는 결제 프로세스를 완료하기 전에 해당 품목이 구매하려는 품목인지 확인할 수 있습니다.
클라이언트 정보
공개합니다 이메일 주소 그리고 배송 정보 고객이 결제 양식에 입력한 것입니다.
배달 방법
다음을 나타냅니다. 배달 방법 결제 중에 선택되었습니다.
지불 세부 사항
제시한다 지불 내역 그리고 청구 지 주소 결제 시 고객이 제공한 정보입니다.
메모: PayPal 거래의 경우 PayPal이 전체 청구 주소를 Webflow에 전달하지 않기 때문에 이름과 청구 주소 국가만 표시됩니다.
주문 요약
보여줍니다 소계 카트 중 무엇이든 관련 세금 그리고 배송료, 그리고 총 주문금액. 이를 통해 구매자는 결제 내역을 이해할 수 있습니다.
추가 정보
전화번호, 선물 메시지, 맞춤 안내 등 고객 정보 수집에 도움을 줍니다.
다운로드(베타)
다운로드 가능한 모든 파일을 순서대로 나열합니다. 디지털 다운로드에 대해 자세히 알아보세요.
디자인 힌트: 이 페이지에 탐색바와 바닥글을 추가할 수 있는 옵션이 있습니다. 또한 사용자를 기본 스토어 페이지나 홈페이지로 리디렉션하는 버튼을 추가하는 것도 고려해 보세요.
최소 및 최대 거래 금액의 개념을 파악하세요.
결제 처리자는 거래 제한을 시행합니다. 쇼핑객의 주문 금액이 최소 금액 미만이거나 최대 금액을 초과하는 경우 결제 중에 오류 메시지가 표시됩니다.
이러한 거래 기준점은 결제 처리업체 및 매장 통화에 따라 다릅니다.
- PayPal은 최소 0.01을 부과하지만 PayPal 사용자에게는 거래 제한이 있을 수 있습니다. 추가 통찰력을 얻으려면 PayPal의 documentation을 확인하세요.
- Stripe의 제한사항은 매장의 통화를 기준으로 합니다. 예를 들어 USD의 경우 최소값은 $0.50입니다. Stripe의 documentation을 참조하세요..
주문이 최소 임계값보다 낮으면 결제 중에 쇼핑객에게 "최소 주문이 충족되지 않음" 오류가 표시됩니다. 이 오류는 귀하가 조정할 수 있습니다. 오류 메시지 사용자 정의에 대해 자세히 알아보세요.
무료 주문 이해
때때로 구매자는 경품이나 100% 할인으로 인해 총 금액이 0인 주문을 할 수도 있습니다. 이러한 경우 Webflow는 주문을 결제 프로세서로 전송하지 않고 결제 후 주문을 처리합니다.
무료 주문 관련 주요 사항:
무료 주문은 Webflow 주문 관리자에 표시되지만 이러한 주문은 결제 프로세서로 전달되지 않으므로 Stripe 또는 PayPal 대시보드에는 표시되지 않습니다.
PayPal 결제는 배송비를 계산하기 전에 시작되므로 이전 배송 소계가 0인 경우 PayPal 결제 시작이 불가능합니다. 따라서 PayPal만 사용하는 매장에서는 쇼핑객이 배송비를 포함하는 소계가 0인 거래를 완료할 수 없습니다.
PayPal만을 사용하는 매장에서는 무료 배송을 제공하거나 배송이 필요하지 않은 품목에 대해서만 무료 주문을 활용하는 것이 좋습니다. 이 경우 쇼핑객은 기본 결제 페이지 대신에 결제 게이트웨이(PayPal) 페이지.
- Workspace 스팟 및 멤버 포함 또는 제거 - 2024년 4월 15일
- 센터링 상자 요약 - 2024년 4월 15일
- 나중에 참조할 수 있도록 사이트 저장 - 2024년 4월 15일