새로운 Ecwid 디자인 설정: 수십 가지 사용자 정의 옵션, 코딩 없음

12 분 읽음

디자인은 많은 것을 말해줍니다 전자 상거래 가게. 사람들이 온라인 매장을 쉽게 탐색할 수 있다면 전환 가능성이 훨씬 높아집니다. 일관되고 현대적인 디자인은 고객에게 귀하가 신뢰할 수 있는 브랜드임을 알릴 수 있습니다.

Ecwid는 소규모의 초기 기업이라도 모든 기업이 웹에서 전문적으로 보고 판매할 수 있도록 도와줍니다. 엄청나게 많은 비용을 지불할 필요는 없습니다. 상위 계층 웹디자이너를 얻으려면 모바일 친화적이고, 깨끗하고, 아름다워요 전자 상거래 가게.

우리는 추가했습니다 수십 가지의 새로운 매장 디자인 기능 Ecwid에게 전자 상거래 브랜드를 가장 잘 반영하는 모양과 느낌을 저장하세요.

온라인 상점 디자인의 모든 세부 사항을 설정하는 것은 매우 쉽습니다. 코딩 없이 이미지 스타일, 제품 페이지 레이아웃, 매장 요소를 변경할 수 있습니다. 이번 포스팅을 통해 직접 확인해보실 수 있습니다.

새 설정은 아래에 중첩됩니다. 설정 → 디자인 Ecwid 제어판에서. 이를 사용하려면 다음에서 모든 매장 업데이트를 활성화했는지 확인하세요. 설정 → 새로운 소식.

새로운 디자인 설정 페이지를 보려면 설정 → 새로운 기능에서 이러한 업데이트를 활성화하세요.

이전 버전의 Ecwid 매장을 사용하고 있으면 어떻게 되나요?

새로운 매장으로 전환하면 매장의 모습이 완전히 바뀔 수 있습니다. 새로운 디자인 설정을 사용하면 더 많은 사용자 정의 옵션과 매장을 더욱 매력적으로 보이게 할 수 있습니다. 그러나 다음을 사용하는 경우 주의하세요. 자체 제작 CSS 테마 또는 기타 맞춤 개발된 매장 기능 — 새 매장과 호환되지 않을 수 있습니다. 도움이 필요하시면 저희 지원팀이 도와드리겠습니다.

온라인 매장 디자인

제품 사진부터 제품 카탈로그의 전체 모습을 제어할 수 있습니다. SKU 그리고 버튼.

1. 제품을 선보일 수 있는 최적의 이미지 크기를 선택하세요.

기본적으로 제품 이미지는 중간 크기, 대부분의 상점에 적합합니다.

일부 제품에는 시각화하고 싶은 중요한 세부정보가 있습니다(예: 보석이나 그림을 판매하는 경우). 고객이 아름다운 제품과 사진에 감탄할 수 있도록 큰 이미지 크기를 선택하세요.

한 가지 제품 유형을 대규모로 판매하는 경우(예: 다양한 색상의 가죽 벨트 200개) 작은 이미지를 사용하세요. 귀하의 매장은 화면에 많은 제품을 표시하고 고객은 선택에 깊은 인상을 받을 것입니다.

제품 사진의 소, 중, 대 이미지 크기

2. 제품 크기에 맞게 이미지 종횡비를 최적화하세요.

손바닥을 팔아요? 아니면 어쩌면 다리가 긴 모델이 디자이너 코트를 선보이나요? 둘 다 세로 사진에서 멋지게 보일 것입니다.

수평 비율은 신발, 소파, 영양바 등 다양한 제품에 적합합니다.

둥근 물체의 경우(또는 의심스러운 경우) 정사각형 이미지를 사용하면 항상 멋지게 보입니다.

수직, 수평 및 정사각형 이미지

매장 배경에서 제품 이미지를 강조하여 돋보이게 하고 싶다면 '이미지 배경을 어둡게'를 선택하세요.

3. 매장에 표시할 제품 정보를 선택하세요.

제품 사진과 마찬가지로 제품 이름, 제목, 가격, SKU, "구매" 버튼 등 다른 매장 요소에 대한 다양한 디자인 옵션 중에서 선택할 수 있습니다. 제품 이미지 아래 또는 마우스 오버 시 각 항목을 표시하는 방법을 결정합니다.

제품 사진 아래, 마우스 오버 시 요소를 표시하거나 숨깁니다.

제품 사진 아래에 정보를 배치하도록 선택하면 레이아웃을 설정할 수 있습니다. 콘텐츠를 왼쪽, 오른쪽, 가운데로 정렬하거나 양쪽 정렬합니다. - 가장 좋아하는 모양을 자유롭게 만들 수 있습니다.

요소의 다양한 레이아웃(제품 이름 및 가격)

요소를 숨기는 것도 가능합니다. 매장 전면을 룩북처럼 보이게 하려면 모두 숨기세요. 고객이 제품 사진을 클릭하면 제품 페이지로 이동됩니다.

더 자세한 내용을 보여주고 싶다면 추가 제품 이미지 표시를 선택하세요. Ecwid는 마우스를 올리면 제품 사진 갤러리의 첫 번째 이미지를 표시합니다.

마우스를 올리면 추가 상품 이미지

이러한 새로운 설정을 통해 매장 외관에 다양한 디자인 변형이 가능해졌습니다.

4. 매장 카테고리 디자인

카테고리의 모양을 설정하는 옵션이 있습니다. 카테고리 사진에 대한 사진, 아이콘, 브랜드 로고 등 Ecwid에는 사진을 멋지게 보이게 하는 디자인 옵션이 있습니다.

사진 아래, 사진 위에, 마우스를 올리면 카테고리 이름이 숨겨집니다.

전환을 위한 제품 페이지 최적화

이제 고객에게 가장 적합한 방법에 따라 제품 페이지의 정보를 다양한 방식으로 구성할 수 있습니다. 각 디자인 옵션은 최고에 따라 만들어집니다. 전자 상거래 전환율을 높이는 방법.

1. 상품 페이지 레이아웃을 선택하세요

제품 페이지의 콘텐츠를 구성하기 위한 4가지 새로운 옵션이 있습니다.

제품 사진으로 관심을 끌 수 있습니다. 배치 높은 품질의 제품 페이지 왼쪽에 있는 제품 이미지는 고객이 가장 먼저 눈에 띄는 이미지가 됩니다. 사용 2열 시각적으로 매력적인 제품을 판매하고 제품 설명이 짧은 경우 오른쪽에 제품 설명이 있는 레이아웃을 사용하세요.

이 어플리케이션에는 XNUMXµm 및 XNUMXµm 파장에서 최대 XNUMXW의 평균 출력을 제공하는 2열 오른쪽에 제품 설명이 있는 레이아웃

자세한 제품 설명을 추가하세요. 전자제품이나 의약품과 같은 제품의 경우 제품 설명이 꽤 길 수 있습니다. 그런 다음 2열 이미지 아래에 제품 설명이 포함된 레이아웃입니다. 제품 사용에 대한 긴 설명서를 추가해도 페이지가 조화롭게 보입니다.

이 어플리케이션에는 XNUMXµm 및 XNUMXµm 파장에서 최대 XNUMXW의 평균 출력을 제공하는 2열 이미지 아래에 제품 설명이 있는 레이아웃

제품 옵션과 '결제' 버튼을 강조하세요. 고객이 제품을 구매하기 위해 긴 설명을 읽거나 갤러리를 자세히 살펴볼 필요가 없다면 왼쪽의 결제 버튼을 사용하여 제품 옵션을 표시하도록 선택하세요. 작은 수족관 물고기를 파는 경우를 가정해 보겠습니다.

초점이 맞춰진 '쇼핑백에 추가' 버튼

스크롤링과 방해 요소를 최소화하세요. A 3열 추가 이동 없이 제품 페이지에 최대 정보를 표시하려는 경우 레이아웃이 적합합니다.

컴팩트 3열 레이아웃

당신은 또한 수 사진 갤러리의 레이아웃을 선택하세요. 매력적인 사진 갤러리를 통해 고객이 제품에 대한 느낌을 갖도록 도와주세요. 갤러리의 이미지 썸네일 레이아웃(세로 또는 가로)을 선택하거나 최면에 걸린 이미지를 전체 크기로 표시하세요. 더 많은 교대 뷰와 자세한 뷰를 표시할수록 좋습니다.

사진 갤러리 레이아웃 옵션

3. 사이드바에 표시할 제품 정보를 선택하세요.

변환되는 제품 페이지는 단순함을 유지하면서 충분한 제품 정보를 제공합니다. Ecwid에서는 필요하지 않은 요소(예: SKU, 제품 옵션, 공유 버튼)를 숨길 수 있으므로 고객이 장바구니로 이동하는 동안 주의가 산만해지지 않습니다.

가장 좋은 점은 각 요소를 드래그하여 원하는 순서로 구성할 수 있다는 것입니다. 전환을 위해 제품 페이지를 최적화하는 새로운 방법을 많이 테스트하세요.

유연한 사이드바 설정

매장 탐색 및 색상 변경

고객이 매장을 탐색하는 데 도움이 되도록 기본적으로 활성화되는 몇 가지 추가 매장 설정이 있습니다. 원할 때마다 이들 중 하나를 끌 수 있습니다.

이전 매장 버전에서 전환하는 경우 이러한 설정은 이전과 마찬가지로 새 매장으로 마이그레이션됩니다.

색상 적응 모드. 웹사이트에 Ecwid 온라인 스토어를 설치하면 스토어 색상이 웹사이트 테마와 자동으로 일치합니다. 귀하의 매장은 웹사이트의 자연스러운 일부처럼 보일 것입니다.

바닥글 메뉴 및 탐색경로 고객이 매장을 더 빠르게 탐색하고 길을 잃지 않도록 도와주세요.

이 어플리케이션에는 XNUMXµm 및 XNUMXµm 파장에서 최대 XNUMXW의 평균 출력을 제공하는 로그인에 링크 고객은 자신의 프로필에 로그인하여 주문을 확인하고 위시리스트를 사용할 수 있습니다.

'정렬 기준' 옵션 고객이 가격, 이름, 기타 조건별로 제품을 정렬할 수 있도록 하세요.

Ecwid 매장 디자인을 변경하는 다른 방법

새로운 디자인 설정은 가장 일반적인 사용 사례를 다룹니다. 다른 방법으로 스토어를 변경하려면 다음을 수행하세요.

코딩 없이 매장에 맞는 맞춤형 테마가 필요하다면, 시도해 보세요 Ecwid 앱 마켓의 앱 디자인 (유료 Ecwid 요금제에서 사용 가능, 앱 가격이 적용됨)
사용자 정의 CSS 테마(크기, 모양, 색상 등 스토어에 있는 모든 요소의 모양을 결정하는 규칙 집합)를 만듭니다. CSS 테마를 만들려면 특정 기술 지식이 필요합니다. 있다 Ecwid 기술 자료의 CSS 테마 가이드 자신만의 CSS 테마를 만드는 방법과 특정 요소 변경에 대한 지침. 언제든지 Ecwid 고객 관리팀에 도움을 요청하거나 나만의 CSS 테마 맞춤 개발 주문.
개발자의 경우: Ecwid 자바스크립트 API Ecwid 매장 기능을 확장합니다. 새로운 CSS 테마나 앱을 제작하여 Ecwid 앱마켓에서 판매할 수 있습니다. Ecwid Javascript API를 사용하면 매장 전면 디자인을 완전히 변경하여 필요한 만큼 깊이 있는 변경을 적용할 수 있습니다. 시작할 준비가 되셨다면, 개발자를 위한 페이지에 등록하세요.