쇼핑몰 메인 화면 구성

📌 쇼핑몰의 메인 화면은 두 가지 주요 영역으로 나뉘어 있습니다.

디자인 가이드 1.png

A - 메인 레이아웃 (중앙)

모바일 웹 또는 앱 화면과 유사한 구조로 구성된 주요 콘텐츠 영역으로,

상품 진열 및 메인 디자인이 반영되는 핵심 화면입니다.

<aside> 🧶

어디에 있나요? 관리자페이지 > 좌측 상단에 디자인관리 > 메인 레이아웃

</aside>

B - 메인 PC화면 (좌/우측)

웹으로 접속할 시, 노출되는 디자인을 수정할 수 있는 영역입니다.

단, 메인 PC화면 설정은 웹에만 적용되며 모바일에는 노출되지 않는 점 참고 부탁드립니다.

<aside> 🧶

어디에 있나요? 관리자페이지 > 좌측 상단에 디자인관리 > 메인 PC화면

</aside>

A. 메인 레이아웃

<aside>

디자인 가이드 4.png

<aside> 🤚🏻

잠깐! 레이아웃 설정 화면에서 회색으로 표시된 영역은 위치 이동이 불가합니다.

image.png

</aside>

1. 메인 최상단 배너

<aside> 🧶

어디에 있나요? 디자인관리 > 배너 관리 : 메인 최상단 배너

</aside>

채널 추가 및 회원가입을 유도하여 비회원 고객이 회원으로 전환될 수 있도록 유입을 유도하는 기능의 배너 영역입니다.

메인 최상단 배너 등록

2. 상단 GNB

<aside> 🧶

어디에 있나요? 디자인관리 > 메인 레이아웃 관리 > 선택 : 상단 GNB > 추가

</aside>

자주 사용하는 [로그인, 회원가입, 마이페이지, 주문배송, 장바구니] 메뉴가 노출되는 영역입니다.

<aside> 💡

회원가입 GNB 설정 TIP!

[회원 > 포인트 및 리워드 > 포인트 적립 지급 > 신규가입 시]에 ****설정된 포인트가 애니메이션 효과로 노출됩니다.

image.png

</aside>

3. 아이콘

<aside> 🧶

어디에 있나요? 디자인관리 > 아이콘 > 아이콘 설정

</aside>

쇼핑몰 내에서 아이콘의 모양과 노출할 아이콘을 변경할 수 있습니다.

메인 레이아웃의 네비게이션 메뉴는 최대 4개까지 설정하실 수 있으며 순서 변경이 가능합니다.

아이콘 설정

4. 쇼핑몰 로고

<aside> 🧶

어디에 있나요? 디자인관리 > 기본 설정 > 쇼핑몰 정보

</aside>

쇼핑몰 로고를 노출시킬 수 있는 영역입니다.

5. 상단 메뉴

<aside> 🧶

어디에 있나요? 디자인관리 > 메인 레이아웃 관리 > 상단 메뉴

</aside>

메인 화면에서 지정한 URL로 이동할 수 있도록 설정하는 영역입니다.

상단 메뉴

6. 검색 영역

<aside> 🧶

어디에 있나요? 디자인관리 > 메인 레이아웃 관리 > 선택 : 검색 영역 > 추가

</aside>

검색 영역은 대표 검색어를 통해 기본 검색 명칭 적용이 가능합니다.

검색 영역

7. 배너 영역

<aside> 🧶

어디에 있나요?

  1. 디자인관리 > 배너관리 > 배너 그룹 > 배너 그룹명 입력 후 추가
  2. 디자인관리 > 메인 레이아웃 관리 > 선택 : 배너 영역 > 추가 </aside>

이벤트 광고 및 상품이나 특정 링크로 연결하고 노출 기간을 설정할 수 있습니다.

메인 배너 등록

8. 플로팅 액션 버튼 설정

<aside> 🧶

어디에 있나요? 디자인관리 > 기본 설정 > 플로팅 액션 버튼 설정

</aside>

화면 우측 하단에 고정으로 노출되는 버튼으로 상담하기, 친구 초대 리워드, 주문/배송 조회, 페이지 상단 이동 버튼이 노출됩니다.

플로팅 액션 버튼 설정

디자인 가이드 6.png

9. 추천상품 영역

<aside> 🧶

어디에 있나요?

  1. 상품 > 추천상품 그룹 > 추천상품 그룹 추가
  2. 디자인관리 > 메인 레이아웃 관리 > 선택 : 추천상품 영역 > 추가 </aside>

카테고리와 관계없이 원하는 상품들을 자유롭게 묶어 진열할 수 있는 그룹입니다.

주로 메인 페이지에 노출되는 상품 혹은 메인 PC화면에서 좌·우측 영역에 노출할 수 있습니다.

추천상품 그룹 설정 방법

10. 상품그룹 영역

<aside> 🧶

</aside>

카테고리, 태그 등과 연동하여 상품을 진열할 수 있으며 메인 페이지에 노출시킬 수 있습니다.

디자인 가이드 6.png

11. 퀵 메뉴

<aside> 🧶

</aside>

메인 화면에서 원하는 카테고리로 이동할 수 있도록 설정하는 메뉴입니다.

퀵 메뉴

12. 구분선 및 여백

<aside> 🧶

</aside>

메인 레이아웃 내에서 영역을 구분하기 위한 기능입니다.

구분 선 및 여백 설정

13. 랭킹 영역

<aside> 🧶

</aside>

판매수량, 구매후기 등 다양한 기준에 따라 인기 상품을 순위별로 노출하고, 관리자 설정으로 랭킹 기준을 변경할 수 있는 영역입니다.

랭킹 영역

디자인 가이드 8.png

14. 카테고리 영역

<aside> 🧶

</aside>

등록된 모든 카테고리가 노출되며 카테고리 영역별로 일부 상품만 진열되는 기능입니다.

카테고리 영역

</aside>

<aside> 💡

</aside>

B. 메인 PC화면

<aside>

</aside>