전환율이 높은 Shopify 제품 페이지를 만드는 9가지 방법

전자 상거래 상점 소유자의 경우 제품 페이지에 많은 관심을 기울여야 합니다. 고려해야 할 요소가 많지만 고객에게 훌륭한 쇼핑 경험을 제공할 수 있는 기회도 많습니다.

이 기사에서는 더 높은 전환율, 더 나은 쇼핑 경험을 위해 전자 상거래 제품 페이지를 실제로 최적화하고 브라우저를 구매자로 전환하기 위해 집중할 수 있는 몇 가지 영역을 살펴볼 것입니다.

1. 제품 페이지의 요소를 매핑하십시오.

전환에 최적화된 전자 상거래 페이지를 디자인하는 첫 번째 단계는 성공적인 전자 상거래 페이지에서 일반적으로 사용되는 요소를 통합하는 것입니다.

예를 들어 Asos와 같은 인기 있는 상점을 보면 제품 페이지에서 그들이 찾은 중요한 요소 중 일부를 확인할 수 있습니다.

제품 페이지가 전환에 큰 영향을 미치기 때문에 Asos가 모든 구성 요소를 테스트하고 최적화하기 위해 리소스를 할애할 것이라고 확신할 수 있습니다.

이러한 세부 사항에 대한 관심은 일반적인 제품 페이지가 250kb/s(또는 일반 3g 연결)로 제한되는 슬로우 모션으로 로드되는 방식을 보면 분명합니다. 각 구성 요소가 로드되는 순서를 통해 각 구성 요소가 얼마나 중요한지 알 수 있습니다.

요소의 로드 순서는 다음과 같습니다.

• 탐색 및 로고 . 사용자는 항상 자신의 위치를 ​​알고 있어야 하며 다른 페이지로 빠르게 이동할 수 있는 방법이 있어야 합니다.
• 제품 썸네일. 이미지는 사용자가 올바른 페이지에 있음을 알리고 완전히 로드되기 전에 페이지를 미리 볼 수 있도록 합니다.
• 제품 제목 및 이동 경로. 또한 사용자의 선택을 확인하고 유사한 범주로 다시 이동할 수 있는 빠른 옵션을 제공합니다.
• 주요 제품 이미지 . 제품 사진은 고객이 찾는 것입니다. 일반적으로 이미지가 더 큰 파일 크기임에도 불구하고 이러한 파일은 클릭 유도문안 이전 에도 로드됩니다.
• 행동 촉구 . 장바구니에 담기 버튼
• 추가 정보 . 접힌 부분 아래에 있는 추가 제품 정보가 마지막으로 로드됩니다.

Asos 제품 페이지의 일부 구성 요소를 더 자세히 살펴보겠습니다.

2. 제품 사진 전면 및 중앙 강조 표시

Asos는 다양한 방식으로 사진을 사용하는 콘텐츠 중심의 사이트입니다. 홈페이지에 있을 때 특정 제품으로 연결되는 사진이 아니라 컬렉션으로 연결되는 사진이 표시됩니다.

그러나 고객이 제품을 클릭하면 이야기가 달라집니다. 그들이 가장 먼저 보는 것은 전면 중앙에 제품 이미지입니다. 스크롤 없이 볼 수 있는 부분에 약간의 콘텐츠가 남아 있는 것은 모두 이 기본 사진 갤러리를 중심으로 정렬되어 있습니다.

우리는 Asos가 사용하는 다양한 사진의 중요성에 대해 더 이야기할 것이지만, 지금은 위치와 눈에 띄는 것이 중요합니다. 제품 사진은 고객이 어떤 설명보다 제품에 대한 세부 정보를 즉시 식별하고 원하는 제품을 더 빨리 찾을 수 있도록 도와줍니다. 눈에 잘 띄게 배치하고 빠르게 로드해야 합니다.

3. 배송 정보를 명확하게 표시

Asos에는 무료 배송 및 반품 배너가 있을 뿐만 아니라 가격 옆에 무료 전 세계 배송 세부 정보에 대한 링크도 있습니다. 이러한 유형의 전자 상거래 판촉은 구매 결정에 상당한 영향을 미칠 수 있습니다.

높은 배송비는 소비자가 장바구니를 포기하는 가장 큰 이유이며 93%의 소비자가 무료 배송이 가능하다면 더 많은 제품을 구매할 것이라고 말했습니다. 이를 알고 Asos는 무료 배송 제안을 홍보하기 위해 할 수 있는 모든 일을 합니다.

4. 추가 세부 정보 포함

Asos 제품 페이지에는 스크롤 없이 볼 수 있는 부분에 희소한 정보가 있을 수 있지만 더 많은 정보를 원하는 고객은 제품에 대한 추가 정보를 쉽게 사용할 수 있습니다.

고객이 제품을 직접 시음하거나 판매원에게 질문할 수 없기 때문에 고객을 교육하고 고객이 가질 수 있는 질문에 대한 답변을 제공하기 위해 최선을 다해야 합니다.

어떤 종류의 세부 정보를 포함해야 합니까?

이 정보에는 다음과 같은 세부 정보가 포함될 수 있습니다.

• 제품의 재질
• 스타일
• 중요한 디자인 기능
• 관리 및 유지 관리 지침
• 브랜드 또는 제조업체에 대한 정보
• 고객이 추가 조사를 수행하거나 귀하에게 연락하는 데 도움이 될 수 있는 SKU와 같은 메타 정보입니다.

패션 브랜드의 경우 이러한 추가 세부 정보가 특히 중요할 수 있습니다. Asos는 또한 고객이 이 제품이 어떻게 어울릴지 보다 정확하게 측정할 수 있도록 모델의 치수와 착용한 사이즈를 포함합니다.

이 추가 정보가 왜 그렇게 중요한가요?

예를 들어, 고유한 제품 설명을 갖는 것은 유기적 검색 엔진 트래픽을 높이는 좋은 방법이 될 수 있습니다. 그러나 고객이 경쟁 제품보다 귀하의 제품이나 매장을 선택해야 하는 이유에 대한 질문에 답하는 데도 도움이 되어야 합니다. 이러한 추가 세부 정보를 제공하면 단순히 제품 사진에서 식별할 수 있는 기본 세부 정보를 나열하는 것보다 제품에 대한 전문 지식 수준이 더 높다는 것을 나타냅니다.

더 많은 정보는 고객이 정보에 입각한 독립적인 선택을 할 수 있음을 의미하며 이는 고객에게만 좋은 것은 아닙니다. 고객이 자신 있는 구매를 하도록 도우면 고객 지원이 줄어들고 반품이 줄어들 수 있습니다.

5. 명확한 클릭 유도문안 제공

Asos 웹사이트의 또 다른 기능 디자인 기능은 제품 페이지에서 사용할 수 있는 명확한 클릭 유도문안입니다.

복잡한 주문 프로세스가 없습니다. 사실 고객이 필요로 하는 모든 정보는 제품 사진과 제목, 설명에 담겨 있습니다. 고객은 사이즈를 선택하고 눈에 띄는 Add to Cart 버튼을 클릭하기만 하면 됩니다. 그렇게 하면 선택을 확인하는 눈에 잘 띄지 않는 팝업이 표시됩니다. 이 팝업을 사용하면 몇 초 후에 사라지기 전에 더 빨리 결제를 완료하거나 쇼핑을 계속할 수 있습니다.

많은 상점은 상품이 추가되자마자 카트로 리디렉션하거나 팝업 카트를 표시하거나, 대안을 전혀 선택하지 않고 고객에게 맡기는 한 가지 형태의 통지 또는 다른 형태를 선택합니다. 결제로 이동합니다. 이 접근 방식은 좋은 중간 지점인 것 같습니다.

고객이 구매할 준비가 되지 않은 경우 Asos는 고객이 항목을 즐겨찾기에 쉽게 선택할 수 있는 방법도 포함했습니다. 대부분의 상점에는 이제 일종의 위시리스트 기능이 있지만 Asos의 실행에 대한 좋은 점은 사용자가 브라우저 캐시에 60일 동안 항목을 저장하기 위해 계정을 만들 필요가 없다는 사실입니다.

그러나 버튼을 클릭하면 Asos로 다시 요청을 보내므로 항목을 저장하는 사용자 유형, 저장 중인 항목 및 저장 시간과 같은 세부정보를 알 수 있습니다. 소셜 미디어의 고객.

6. 제품 이미지에 흰색 배경 사용

Pixc에서 고객의 90% 이상이 이미지에서 배경을 제거하고 흰색으로 교체하기 위해 사진 편집을 선택합니다. 우리뿐만이 아닙니다. 모든 제품 이미지에 흰색(또는 최소한 일관된) 배경을 갖는 것은 성공적인 전자 상거래 상점의 표준이 되었습니다.

왜 그렇게 중요합니까?

그것은 당신에게 돈을 절약

일관된 배경을 유지하면 신제품 출시, 사진 촬영 및 편집 프로세스가 빨라집니다. Asos와 같은 상점은 스튜디오, 사진작가 및 편집자를 보유하여 제품 전반에 걸쳐 일관된 레이아웃과 조명을 보장할 수 있지만 흰색 배경을 사용하는 대형 전자 상거래 상점의 경우에도 많은 시간을 절약할 수 있습니다.

사내 팀을 두는 대신 단순히 제품 사진을 찍고 일관성을 위해 편집할 수 있습니다. 또는 더 나은 방법은 Pixc와 같은 서비스로 보내 프로세스를 더욱 자동화하는 것입니다.

그것은 당신의 제품을 더 잘 강조합니다

배경이 없으면 제품 자체에서 방해가 되지 않습니다. 흰색 배경을 사용하면 제품의 세부 사항과 눈에 띄지 않을 수 있는 특정 기능을 더 잘 보여줄 수 있습니다.

고객이 제품을 탐색하는 데 도움이 됩니다.

제품 사진이 모두 비슷하면 고객은 컬렉션 페이지를 쉽게 스캔하여 찾고 있는 제품을 선택할 수 있습니다.

7. 사진의 좋은 조합을 통합

표시하는 사진 수 늘리기

제품 사진이 매우 중요하기 때문에 제품의 다양한 사진을 포함하는 것이 중요합니다. 한 장의 추가 사진은 어떤 설명보다 더 많은 정보를 전달할 수 있습니다.

소비자의 0.52%만이 단일 사진을 보고 싶어하는 반면 33.16%는 여러 장의 사진을 보는 것을 선호하고 58.03%는 제품을 전체 360도로 보여주는 제품 사진을 보고 싶어합니다.

즉, 제품 사진을 혼합하여 제품의 모든 각도를 보여주고 다양한 사진을 활용하여 제품의 핵심을 강조해야 합니다. 예를 들어 신발과 같은 제품의 경우 밑창의 클로즈업과 스티칭을 사용하여 제품의 주요 판매 포인트를 전달합니다.

상황에 맞는 장면 고려

실제 제품을 보여주는 상황에 맞는 사진은 고객의 상상력을 자극하는 데 도움이 될 수 있습니다. 또한 쇼룸 밖에서 어떻게 보이는지 볼 수 있는 기회도 제공합니다.

8. 이미지 메타데이터 최적화

너무 많은 전자 상거래 상점이 제품 이미지에 실망하고 있습니다. Shopify 및 BigCommerce와 같은 플랫폼이 압축 및 적절한 종횡비를 대중에게 제공하는 데 도움이 되지만 항상 유지해야 하는 몇 가지 다른 좋은 습관이 있습니다.

적절한 메타 정보 포함

적절한 메타데이터는 세 가지로 요약됩니다. 이미지에 다음이 포함되어 있는지 확인하십시오.

1. 이미지를 정확하게 설명하는 올바른 ALT 태그
2. 적절한 제목 태그
3. 하이픈을 사용하는 관련 파일 이름(예: my-image.jpg)

메타 정보는 접근성에 중요하므로 키워드 스터핑은 눈살을 찌푸리게 하고 비효율적입니다. 그러나 페이지의 콘텐츠를 이해하는 데 도움이 되도록 이미지 메타데이터와 주변 콘텐츠를 사용할 Google에 컨텍스트를 제공합니다.

이미지가 적절한 크기인지 확인하십시오.

높이와 너비가 동일한지 확인하십시오. 일반적으로 정사각형 이미지는 모든 장치에서 더 잘 표시됩니다. 특히 길거나 넓은 제품이 있는 경우 직사각형 이미지를 사용하는 것이 어색해 보일 수도 있습니다.

확대/축소를 사용할 수 있을 만큼 충분히 큰지 확인합니다. 전자 상거래 사이트가 어떻게 디자인되었는지에 따라 사이트는 축소판, 컬렉션 이미지, 제품 이미지 및 확대/축소 기능에 대해 동일한 이미지의 다른 크기 버전을 사용합니다. 이 확대/축소 기능이 불필요하게 크지 않고 작동할 수 있도록 이미지가 충분히 큰지 확인하려고 합니다. 1,000px에서 1,600px 사이의 이미지가 일반적으로 좋은 크기입니다.

9. 나만의 제품 사진 템플릿 만들기

위의 팁을 염두에 두고 제품 이미지의 일관성을 유지하는 가장 쉬운 방법 중 하나는 템플릿을 사용하는 것입니다. 템플릿을 사용하면 반복적으로 사진을 올바르게 정렬하고 레이아웃과 치수가 동일하게 유지되도록 할 수 있습니다.

Photoshop에서 이를 달성하는 것은 비교적 간단합니다.

• Photoshop에서 새 파일을 만듭니다. 색상 모드가 RGB 색상 – 8비트, 해상도가 최소 72픽셀/인치, 배경 콘텐츠가 흰색 또는 투명으로 설정되어 있는지 확인하십시오.

• 새 가이드를 만듭니다. "보기" 메뉴에서 "새 가이드"를 선택합니다.

• 여백 안내선을 만듭니다. 10% 세로, 90% 세로, 10% 가로 및 90% 가로 안내선을 만듭니다. 자신의 여백을 설정할 수도 있습니다.

• 센터링 가이드를 만드십시오. 50% 수직 및 50% 수평 안내선을 만듭니다.

당신은 이것으로 끝내야 합니다.

완료되면 템플릿 파일을 일반적인 Photoshop 문서로 저장합니다. 다음에 문서를 열 때 가이드를 계속 사용할 수 있습니다.

템플릿을 사용하면 모든 제품 이미지를 똑같은 위치에 배치할 수 있습니다. 또한 이미지의 크기가 모두 올바르게 조정되고 일관된 크기로 저장됩니다.

이 가이드에서는 잘 디자인된 제품 페이지에 기여하는 요소와 고객의 쇼핑 경험을 개선하기 위해 오늘 취할 수 있는 몇 가지 단계를 살펴보았습니다.

이 가이드의 조언을 통해 이제 제품 페이지 개선을 시작하기 위해 구현할 수 있는 실행 가능한 제안이 있습니다. 이제 이 팁을 전자 상거래 상점에 적용하여 판매 촉진을 시작하는 것은 귀하에게 달려 있습니다!