Shopify 스토어를 위한 Everything 디자인 가이드

글꼴, 색상, 액션! 예술적으로 관심이 있는 경우 Shopify 스토어를 디자인하는 것은 흥미로운 도전이 될 수 있습니다. 그러나 세리프체와 비세리프체 중 하나를 선택해야 할 때 다소 답답함을 느끼는 마케터와 기업가에게는 이 과정이 매우 어렵게 느껴질 수 있습니다.

Shopify에는 쉽게 시작할 수 있는 수많은 리소스가 있지만 사전 제작된 테마 템플릿, 고용을 위한 전문 디자이너, 앱과 위젯으로 가득 찬 마켓플레이스에 대해 이야기하고 있지만 의사 결정 마비는 매우 심각한 문제입니다. 적절한 예: 시각적으로 매력적이고 주의를 끌며 전환에 최적화된 Shopify 스토어를 원하는 사람은 누구나 있지만 생각보다 쉽지 않습니다.

Shopify 스토어의 디자인 옵션에 있어 한계가 있는 상황에서 어디서부터 시작해야 합니까? 색상 견본을 내려놓으십시오. 여기에 항상 필요했지만 존재하는지 몰랐던 Shopify의 궁극적인 디자인 가이드가 있으며 사용자 정의, 출시 및 판매 시작에 필요한 모든 팁과 요령이 있습니다.

이 문서에서:
쇼피파이 테마
제품 사진
테마 사용자 정의
메뉴 구조
홈페이지 헤더
3가지 테이크아웃 팁
도움이 필요하다?

Shopify 테마

Shopify 스토어 구축의 첫 번째 단계는 적절한 테마를 선택하는 것입니다. 상점의 사용자 경험, 시각적 미학 및 기능을 결정하는 사이트의 중추라고 생각하십시오.

수백 가지 옵션을 제공하는 Shopify의 테마 스토어를 사용하면 완벽하게 일치하는 항목을 쉽게 찾을 수 있습니다. 또한 대부분은 다양한 스타일 변형을 제공하므로 색상, 글꼴 및 앱과 관련하여 브랜드의 모양과 느낌에 맞게 사용자 지정할 수 있습니다.

압도되는 느낌? Shopify의 필터를 사용하여 다음과 같이 선택 범위를 좁힐 수 있습니다.

• 제품 카탈로그의 크기입니다. 제품이 많다면 무한 스크롤이나 그리드 레이아웃과 같은 기능이 필요할 수 있습니다.

• 당신의 산업. 패션 회사는 쇼핑객이 다양한 크기와 색상 중에서 선택할 수 있는 테마를 요구할 수 있지만 예술 및 사진 브랜드는 더 큰 제품 이미지 슬롯이 필요할 수 있습니다.
• 가격. Shopify는 다양한 무료 테마를 제공하지만 더 복잡한 테마는 최대 $180입니다.

나중에 타이포그래피와 색 구성표를 사용자 정의할 수 있지만 전체 미학과 레이아웃 측면에서 사이트에 대한 비전과 일치하는 테마를 선택하면 사용자 정의 프로세스가 더 간단합니다.

제품 사진

우리는 Shopify의 강력한 테마 마켓플레이스의 열렬한 팬이지만 한 가지 위험이 있습니다. 사용자 정의를 고려하더라도 다른 모든 사람들과 똑같이 보이는 상점을 갖는 것입니다. 하나의 빠른 솔루션? 독특한 제품 사진.

귀하의 브랜드를 경쟁업체와 구별하려면 회사의 아이덴티티와 태도가 담긴 제품 사진을 찍는 것이 중요합니다. 사진은 브랜드의 스타일과 톤을 설정하는 데 중요한 역할을 합니다.

제품 사진으로 재미를 더하고 대담한 것을 두려워하지 마십시오.

• 제품 사진을 라이프스타일 사진과 섞어서 소품 및 모델을 지원하는 로케이션에서 제품을 촬영하세요.
• 다양한 레이아웃으로 실험해 보세요. 예를 들어, 항상 흰색 배경에 옷을 놓고 촬영하는 것보다 플랫 레이를 하거나 모델을 고용하는 것을 고려하십시오.
• 직선이 아닌 흥미로운 각도에서 자르고 사진을 찍 습니다. 이것은 사진에 스타일과 감각을 더할 수 있는 좋은 방법입니다.

놀라운 제품 및 라이프스타일 이미지를 촬영하는 방법에 대한 추가 정보는 이 DIY 가이드를 확인하세요.

테마 사용자 정의

테마를 선택하고 선택할 수 있는 제품 사진의 전체 카메라 롤이 있으므로 재미있는 부분이 있습니다. 사이트를 고유한 것으로 변환하는 것입니다.

Shopify가 제공하는 편리함 덕분에 사용자 지정 시 코딩이 필요하지 않습니다. 대신 테마 설정을 클릭하기만 하면 상점의 시각적 스타일을 조정할 수 있는 여러 가지 방법을 찾을 수 있습니다.

그림 물감

색상 메뉴에서 텍스트, 버튼 및 양식 필드를 포함하여 상점의 많은 요소에 대한 색상을 토글할 수 있습니다.

전문가 팁: 클릭 유도문안(CTA)을 눈에 띄게 만들려면 페이지의 나머지 부분과 대조되는 더 대담하고 밝은 색상으로 만드는 것이 좋습니다.

타이포그래피

이 섹션은 상점 전체의 모든 텍스트의 시각적 모양을 제어합니다. 제목 대 본문 텍스트의 글꼴 유형, 두께 및 축척을 조정할 수 있습니다.

파비콘

파비콘은 브라우저 탭에 표시되는 작은 아이콘(일반적으로 회사와 관련된 로고 또는 단순한 이미지)입니다.

• 적절한 이미지가 있습니까? 업로드되면 Shopify에서 자동으로 크기를 32 x 32픽셀로 조정합니다.
• 하나가 없습니까? Shopify에는 사용할 수 있는 수많은 무료 이미지가 있습니다.

체크아웃 요소

체크아웃 프로세스는 전자상거래 사이트에서 가장 중요한 부분입니다. 환상적인 체크아웃 경험이 없으면 쇼핑객이 구매 중간에 장바구니를 포기할 위험이 있습니다.

결제를 최대한 원활하게 하기 위해 다음을 사용자 지정할 수 있습니다.

• 악센트, 버튼 및 오류의 색상
• 체크아웃 전용 타이포그래피
• 결제 및 주문 요약 페이지의 배경 패턴, 색상 또는 이미지

메뉴 구조

대부분의 Shopify 사전 제작 테마에는 다음과 같은 핵심 요소가 포함되어 있지만 스토어를 시작하기 전에 다음 팁을 염두에 두시기 바랍니다.

탐색 모음

탐색 모음은 모든 페이지의 상단에 있어 쇼핑객이 페이지 사이를 빠르게 이동할 수 있습니다.

전문가 팁: 쇼핑객이 부담 없이 필요한 것을 쉽게 찾을 수 있도록 하세요. 기본 탐색 모음을 비교적 깨끗하고 단순하게 유지하기 위해 카테고리와 하위 카테고리를 드롭다운 옵션으로 추가할 수 있습니다.

알림 표시줄

기간한정판매? 배송 지연? 신규 매장 영업시간은? 모든 쇼핑객이 알아야 하는 필수 정보를 홍보해야 하는 경우 알림 표시줄(전체 헤더라고도 함)이 답입니다.

대부분의 Shopify 테마에는 알림 표시줄이 함께 제공됩니다. 사용자 지정하고 Shopify 테마 편집기를 통해 켜기만 하면 됩니다.

전문가 팁: 공지 표시줄이 사이트와 같은 방식으로 스타일이 지정되었는지 확인하세요(브랜드 색상, 글꼴 및 CTA 고려).

바닥글

바닥글은 사이트에서 가장 과소평가된 영역 중 하나입니다. 홈페이지를 스크롤하여 바닥글에 도달하는 쇼핑객은 거의 없지만 정보에 빠르게 액세스해야 할 때 바닥글을 가장 먼저 보게 되는 곳 중 하나입니다.

바닥글을 편집하려면 온라인 스토어 아래의 탐색 페이지로 이동해야 합니다.

전문가 팁:

• 바닥글은 탐색 모음에 있는 동일한 정보를 다시 해시하는 것이어서는 안 됩니다. 대신 배송, 반품 및 교환, 사이트 개인 정보 보호, 채용 기회 등에 대한 페이지에 중요한 링크를 추가하십시오.
• 소셜 미디어 아이콘을 버튼으로 사용하십시오. 그러면 바닥글의 장황함이 줄어듭니다.
• 쇼핑객이 이메일 또는 SMS 업데이트에 가입하도록 허용합니다.
• 핫라인, "라이브 채팅 시작" 또는 이메일 도움말과 같은 고객 서비스 빠른 링크를 제공합니다.

홈페이지 헤더

홈페이지 헤더는 쇼핑객이 웹사이트에 방문했을 때 가장 먼저 보게 되는 것입니다. 훌륭한 첫인상을 남기면 사람들이 더 많이 스크롤할 것입니다. 그들을 끌어들이는 데 실패하면 탭을 닫을 것입니다. 즉, 홈페이지 헤더는 다음과 같아야 합니다.

• 브랜드 또는 판매하는 제품에 대한 간단한 스냅샷 제공
• 판매 이벤트 홍보
• 브랜드의 태도와 아이덴티티를 보여주세요
• 당신의 최고 제품을 보여주세요

홈페이지 헤더가 비디오, 캐러셀 또는 정적 이미지인지 여부에 관계없이 정기적으로 변경하는 것을 목표로 해야 합니다. 충성도가 높은 고객에게 웹사이트가 낡거나 구식으로 느껴지지 않도록 하십시오.

3가지 테이크아웃 팁

Shopify 스토어를 디자인하는 것은 매우 재미있을 수 있지만 기본적으로 빈 캔버스에 글꼴, 색상 및 위젯을 실험하기 시작하면 손에서 벗어날 수도 있습니다. Shopify 디자인 프로세스를 가능한 한 관리하기 쉽고 두통 없이 유지하려면 염두에 두어야 할 몇 가지 팁이 있습니다.

1. 형태보다 기능, 항상

당신은 아름다운 사이트를 가질 수 있지만 그것이 직관적으로 흐르지 않고 환상적인 고객 여정을 제공하지 않는다면 당신은 판매 침체를 보게 될 것입니다. 다음을 권장합니다.

• 디자인 프로세스를 시작하기 전에 사이트에서 달성하고자 하는 것에 중점을 둡니다. 이렇게 하면 필요한 도구 또는 위젯의 범위를 좁히고 Shopify 앱 스토어를 처음 방문할 때 발생할 가능성이 있는 선택 마비를 방지할 수 있습니다.
• 추천 및 강력한 필터와 같은 유용한 기능을 구현 하여 쇼핑객이 제품 검색 범위를 빠르게 좁힐 수 있습니다.
• 사이트 속도 우선 순위. 멋진 애니메이션, 멋진 앱, 고해상도 이미지를 많이 추가하고 싶은 마음이 들지만 더 많은 요소를 포함할수록 사이트의 로딩 시간이 길어집니다. 연구에 따르면 페이지를 로드하는 데 1초가 추가될 때마다 전환이 7%, 페이지 조회가 11% 감소할 수 있습니다. 반면에 더 빠른 사이트는 Google에서 더 높은 순위로 보상을 받습니다.
• 이미지 압축. Compressor.io와 같은 무료 도구를 사용하면 고품질 제품 이미지를 선명하게 유지하면서 파일 크기를 줄일 수 있습니다.
• 타사 웹 사이트의 테마 대신 Shopify 테마 스토어의 테마 선택. 타사 테마는 Shopify의 평가 프로세스를 거치지 않기 때문에 일부 테마는 백엔드에 예기치 않게 추가되어 로딩 시간이 길어질 수 있습니다.

기억하십시오: Shopify 스토어를 시작하는 것은 한 번에 완료되는 프로세스가 아닙니다. 사이트를 시작하고 판매가 조금씩 들어오기 시작한 후에는 헤더 이미지를 수정하거나 SEO 사본을 다시 작성하거나 이미지를 업데이트하는 등 모든 페이지를 지속적으로 최적화하고 싶을 것입니다. 저희를 믿으세요. 지루한 작업이지만 전환율을 높이고 새로운 쇼핑객을 유치하며 고객 경험을 개선하는 데 도움이 됩니다.

전문가 팁: 사이트 속도 측면에서 사이트가 어떻게 운영되고 있는지 확실하지 않습니까? Google의 PageSpeed ​​Insights 도구를 확인하십시오. URL을 입력하기만 하면 사이트 속도 개선에 대한 통찰력과 권장 사항이 제공됩니다.

2. 사이트를 단순하게 유지

무기고에 있는 모든 제품, 이미지 및 카피를 선보이고 싶지만 대부분의 경우 이는 고객 경험을 방해할 뿐입니다. 너무 많은 정보로 사이트에 과부하가 걸리는 것을 원하지 않습니다. 아무도 지저분한 중고품 매장의 디지털 버전에서 제품을 샅샅이 뒤지는 것을 원하지 않습니다. 대신 단순하게 유지하고 베스트셀러에 집중하고 가능한 한 지방을 줄이십시오(이미지, 사본, 위젯, 페이지 또는 제품 자체 등).

3. 모든 것을 테스트

버튼 하나를 파란색에서 빨간색으로 변경하기만 하면 전환율을 높일 수 있다고 하면 어떨까요? 특정 색상, 이미지 및 그래픽으로 사이트를 시작했지만 제대로 작동하는지 알 방법이 없습니다. (우리는 당신에게 성공적인 공식을 제공하고 싶지만 진실은: 모범 사례는 브랜드의 고유한 고객, 제품 및 틈새 시장에 달려 있습니다.)

A/B 테스팅이 필요한 이유는 여기에서 가장 잘 수행되는 것을 결정하는 데 중요한 프로세스입니다. (신규 마케터를 위한 A/B 테스트에 대한 모든 가이드가 있습니다.) 순수한 본능만으로 운영하기 보다는 다음 매장 디자인 요소를 A/B 테스트하고 싶을 것입니다.

• 다른 버튼의 색상
• CTA, 위젯 및 이미지의 위치
• 탐색 모음
• 소셜 미디어 아이콘 디자인
• 이미지 스타일 — 예: 제품과 라이프스타일 이미지
• 배경 이미지 또는 텍스처

도움이 필요하다?

Shopify의 인터페이스를 사용하면 마케터와 기업가가 매장 디자인을 쉽게 DIY할 수 있지만 매장이 어떻게 생겼으면 하는지에 대한 명확한 아이디어가 있는 완벽주의자라면 시간이 많이 소요될 수 있습니다.

도움을 요청해도 괜찮습니다! Shopify는 매장을 관리하기 위해 신뢰할 수 있는 풍부한 리소스와 수백 명의 전문가를 제공합니다. 때로는 문제를 혼자 헤매는 것보다 프로 디자이너의 전문성을 활용하는 것이 좋습니다.

AdRoll은 Shopify 스토어에 최고 수준의 마케팅을 제공할 때 귀하를 지원합니다. 판매를 촉진할 준비가 되었다면 Shopify용 AdRoll 통합을 확인하십시오.