전자 상거래 쇼핑 카트 페이지 디자인의 8가지 모범 사례

장바구니 페이지 디자인은 전환을 만들 수도 있고 깨뜨릴 수도 있습니다. 데이터에 따르면 장바구니의 유용성은 전환율에 직접적인 영향을 미칩니다.

이 기사에서는 최고의 온라인 상점 브랜드가 장바구니 페이지를 전략적으로 디자인한 방법을 보여줍니다. 하지만 먼저 장바구니 페이지에 대한 기본 사항을 살펴보겠습니다.

전자상거래 장바구니를 통해 방문자는 제품이나 서비스를 구매할 수 있습니다. 고객은 또한 제품 세부 정보를 보고, 쿠폰 코드를 입력하고, 체크아웃을 위한 지불 옵션을 선택할 수 있습니다.

온라인 상점의 수익에 장바구니가 차지하는 중요성에도 불구하고 많은 장바구니 페이지가 제대로 설계되지 않았다는 사실을 발견했습니다.

다음은 상점을 개조하는 데 도움이 될 인상적인 전자 상거래 장바구니의 실제 예입니다. 목표는 항상 고객의 경험입니다.

한번 봅시다!

더 많은 예시를 보고 싶으시다면? 무료 스와이프 파일을 다운로드하고 26개의 장바구니 예제에서 영감을 얻으십시오.

목차

전자상거래 장바구니 디자인의 8가지 예

알아야 할 전자상거래 장바구니 모범 사례

장바구니 포기를 줄이고 판매를 늘리는 방법

다행스럽게도 인기 있는 전자 상거래 웹사이트에 대한 조사가 나쁜 소식만은 아닙니다. 전환을 유도하는 혁신적인 장바구니 페이지 디자인을 갖춘 여러 온라인 상점을 찾았습니다. 이것을 템플릿으로 생각하고 브랜드 스타일에 따라 사양을 변경하십시오.

여기 8가지 영감을 주는 장바구니 디자인이 있습니다.

1. 비앤에이치
2. 틸리의
3. 올버드
4. 포에버 21
5. 나이키
6. 세포라
7. 희귀한 아름다움
8. 룰루레몬

언뜻 보기에 B&H의 "장바구니에 추가" 화면은 전자 제품을 판매하는 다른 사이트와 비슷합니다. 그러나 "장바구니에 추가" 버튼을 클릭하면 단순한 디자인 내에서 고객이 취할 수 있는 엄청난 양의 작업이 있습니다.

예를 들어 페이지에는 선택한 제품과 잘 어울리는 액세서리가 표시되어 고객이 장바구니에 더 많은 항목을 추가할 수 있습니다.

또한 이 페이지에서는 고객이 제품 보증에 대해 생각하도록 합니다.

장바구니 아이콘을 클릭하면 고객이 보다 표준적인 페이지로 리디렉션됩니다. 그리고 관련 제품 권장 사항을 상기시켜줍니다.

이렇게 하면 잊어버렸거나 마음이 바뀌었을 경우에 대비하여 장바구니에 항목을 추가할 수 있는 또 다른 기회가 제공됩니다.

Tilly의 온라인 의류 매장은 간단하고 사용하기 쉽습니다. 이 페이지에는 방문자의 관심을 끌 수 있는 눈길을 사로잡는 많은 사진과 함께 가장 필요한 정보만 표시됩니다.

그들의 영리한 "장바구니에 추가" 디자인은 고객의 쇼핑 경험을 향상시킵니다.

고객이 장바구니에 제품을 담으면 오른쪽에 '미니 카트'가 펼쳐집니다. 그것은 사용자가 한 눈에 자신의 항목을 추적할 수 있습니다.

완료되었을 때를 위한 "체크아웃" 버튼도 있습니다. 따라서 고객은 수고 없이 바로 결제할 수 있습니다. 이 "장바구니에 추가" 예는 충동 구매를 장려하는 좋은 방법을 보여줍니다.

사이드 메시지는 화면의 왼쪽 또는 오른쪽에서 슬라이드하는 웹 사이트의 요소입니다. 많은 공간이 필요한 중요한 정보를 표시해야 할 때 사용할 수 있습니다.

Allbird의 장바구니 측면 패널 디자인은 사이트의 전체 테마와 통합됩니다. 그리고 고객이 알아야 할 모든 것을 보여줍니다.

팝업 메시지는 다음과 같습니다. “축하합니다! 무료 표준 배송이 제공됩니다.” 그리고 처음부터 카트 포기 에 맞서 싸울 수 있는 좋은 방법 입니다. 그들은 고객에게 배송비가 예기치 않게 변경되지 않을 것이라고 말합니다(잠재 고객이 장바구니를 남겨두는 가장 큰 이유 중 하나).

해당 메시지 아래 장바구니 페이지에는 추가된 제품과 가격이 표시됩니다. 또한 소계를 집계하고 다른 유사한 항목을 추천합니다.

Forever 21의 "장바구니에 추가"는 무료 배송 기준으로 투명합니다. 그러나 쇼핑객이 무료 배송 자격을 얻으려면 일정 금액을 지출해야 합니다. 이 장바구니가 무료 배송 자격을 갖추기까지 $10.01밖에 남지 않았음을 알 수 있습니다.

또한 큰 쿠폰 코드 필드가 있어 할인을 쉽게 추가할 수 있습니다.

이 두 가지 비용 절감 기능은 고객이 결제 페이지에 도달하기 전에도 긍정적인 감정을 불러일으킵니다. 결과: 더 높은 판매.

쇼핑객은 Nike 웹사이트에서 "장바구니에 추가" 버튼을 클릭하면 화면 오른쪽 상단에 작은 알림이 표시됩니다.

미니 카트 창에는 두 가지 옵션이 있습니다. 가방을 보거나 직접 결제를 진행하십시오.

고객이 지금 구매하거나 사이트를 계속 탐색하도록 권장하는 선택입니다.

Nike는 또한 쇼핑객이 결제 프로세스를 완료하도록 안내하기 위해 "남은 시간, 지금 주문하세요"와 같은 메시지를 표시합니다. 이런 식으로 고객의 관심을 끌면 아무도 좋은 신발을 놓치고 싶어하지 않기 때문에 더 많은 판매로 이어질 수 있습니다. 이를 FOMO 또는 Fear Of Missing Out 전략이라고 합니다.

Nike 장바구니 페이지의 또 다른 멋진 기능은 예상 배송 날짜입니다. 그것은 쇼핑객이 특정 날짜까지 새 신발을 신고 있는 자신을 상상할 수 있는 기회를 제공합니다. 이러한 세부 사항이 중요합니다!

Sephora의 장바구니 알림 시스템은 장바구니 페이지 디자인 기능에 대한 수많은 모범 사례를 결합합니다.

그들은 사전 총액을 표시합니다. 또한 고객에게 무료 배송 자격을 갖추기 위해 지출해야 하는 금액이 얼마나 되는지 보여줍니다. 또한 각 고객에 대한 제품 권장 사항을 개인화합니다.

Sephora는 장바구니 알림 페이지에서 쉽게 액세스할 수 있는 링크와 함께 무료 샘플(보상 및 프로모션과 함께)을 제공함으로써 이러한 다른 웹사이트를 능가합니다.

고객은 장바구니에 추가할 무료 샘플을 최대 2개까지 선택할 수 있습니다. 이것은 고객에게 부가가치를 제공하는 훌륭한 솔루션이며 고객이 새로운 제품을 사용하도록 권장합니다.

Rare Beauty는 온라인에서 두터운 존재감을 자랑하는 또 다른 메이크업 브랜드입니다. Sephora와 마찬가지로 고객에게 주문과 동일한 상자에 무료 품목을 제공합니다.

또한 주문에 추가해야 하는 금액이 얼마나 되는지 보여줍니다. 그러면 쇼핑객은 언제 무료 배송이 가능한지 알게 됩니다.

Rare Beauty는 고객이 장바구니에서 항목을 쉽게 제거 할 수 있도록 비 전통적으로 큰 X를 사용합니다. 이렇게 하면 주문을 쉽게 편집할 수 있습니다.

고객들이 온라인 구매를 선호하는 이유를 알 수 있습니다 . 빠르고 간편하게 결제할 수 있습니다.

Lululemon의 장바구니에서 가장 먼저 눈에 띄는 것은 상단에 "You've Got Great Taste"라는 큰 메시지입니다.

그런 메시지는 사용자가 장바구니 아이콘을 클릭하고 싶게 만듭니다!

고객을 칭찬하는 것은 장바구니에 무언가를 추가한 것에 대해 감사하는 좋은 방법입니다. 그리고 선의를 보여줍니다. 이것은 긍정적이고 긍정적인 브랜딩 때문에 Lululemon에 특히 효과적입니다.

Lululemon의 결제 버튼은 크고 밝은 색상입니다. 사용자의 눈을 사로잡고 보완 제품을 추천하여 "계속 쇼핑"하도록 유도합니다.

온라인 쇼핑 카트 페이지를 만들 때: 다양한 각도에서 도전에 대해 생각해 보십시오.

훌륭한 장바구니 디자인은 고객의 주문 요약을 표시해야 합니다. 그러나 이는 또한 쇼핑을 계속 하거나 즉시 계산대를 이동하는 데 편안함 을 느끼게 해야 합니다 .

위의 예와 같은 훌륭한 결과를 얻을 수 있으며 모범 사례를 통해 전환율을 높일 수 있습니다.

다음은 전자상거래 장바구니 페이지 디자인의 기본 사항을 요약한 것입니다.

• 지원하는 장바구니의 총 비용, 배송 세부정보 및 결제 옵션을 사용자에게 보여줍니다.
• 고객이 장바구니에 이미 가지고 있는 것과 일치하는 제품을 더 제안하세요.
• 웹사이트 사용자는 적은 노력으로 구매를 맞춤화하는 방법(색상, 수량, 크기 등을 선택하여)을 볼 수 있어야 합니다.
• 장바구니에 대형 고품질 제품 이미지를 사용하여 혼란을 줄입니다.
• 배송료가 얼마인지 또는 고객이 무료 배송을 받기 위해 지출해야 하는 금액을 명확히 합니다.
• 웹사이트에서 허용하는 결제 게이트웨이를 강조 표시합니다.
• 지불 프로세스가 어떻게 안전하고 신뢰할 수 있는지를 증명하는 기호를 표시하십시오.
• 실제 가치를 약속하는 프로모션 코드 상자를 추가하십시오.

제품 탐색에서 장바구니에 항목 추가, 실제 결제까지 원활하게 전환되도록 설계하고 싶을 것입니다. 이것은 전환율 최적화의 중요한 측면입니다.

최고의 장바구니 디자인을 사용하더라도 고객이 결제 프로세스를 완료할 것이라는 보장은 없습니다.

연구원들은 2019년 평균 장바구니 포기율이 77.13%라는 놀라운 사실을 발견했습니다.

장바구니 페이지를 개선하는 기업은 전자상거래 보고서에서 팝업이 방문자의 결제를 유도하는 가장 효과적인 방법 중 하나라는 사실을 발견했습니다.

예를 들어, AVON의 장바구니 포기율 은 OptiMonk의 장바구니 포기 방지 시스템 을 도입했을 때 16.5% 감소했습니다 . 매장 방문자가 장바구니를 포기할 가능성이 있는 시점을 감지하고 쇼핑객이 구매를 완료하도록 권장하는 팝업을 보냅니다.

최고의 팝업 예제를 시작하겠습니다.

장바구니 포기 팝업의 3가지 예

1. 거부할 수 없는 제안 홍보

팝업을 사용하여 제한된 기간 동안 무료 배송 또는 기타 매장 할인을 제공할 수 있습니다.

쇼핑객은 주문 배송비에 매우 민감하기 때문에 장바구니 포기를 줄이는 가장 좋은 방법 중 하나입니다.

매장 디자인 및 결제 페이지 디자인에 잘 맞는 OptiMonk의 팝업 템플릿 라이브러리를 확인하십시오.

2. 기간 한정 제안으로 긴급성 증가

시간 압박감을 사용하면 울타리에 있는 웹사이트 방문자가 계산대를 향하도록 설득할 수 있습니다. 쇼핑객에게 제품 가용성에 대한 자신의 입장을 알립니다. 이것은 구매 결정에 긴박감을 더합니다.

예를 들어 SwissWatchExpo는 중고 명품 시계를 판매하는 상점입니다. 그들은 팝업을 사용하여 시계가 15분 동안만 예약될 것임을 분명히 했습니다. 이러한 긴박감으로 인해 전환율이 25% 증가했습니다 .

3. 관심을 다시 끌 수 있도록 관련 제품 추천

사용자가 체크아웃하지 않고 나가는 경우 상점을 탐색하는 동안 가능한 구매 옵션으로만 항목을 저장했을 가능성이 큽니다.

장바구니에 있는 것과 유사한 대체 제품을 표시하는 팝업으로 관심을 끌 수 있습니다. 상점에서 더 많은 옵션을 빠르게 볼 수 있도록 하여 전환율을 높일 수 있습니다.