디자인숲

사용가이드TIP

[쇼핑몰] 상품 진열하기

목표

등록한 상품들을 내 사이트에서 방문자가 보고 구매할 수 있도록 진열합니다.


상품 진열방법

1단계: 빈 메뉴 추가하기
  1. 디자인 모드에 접속합니다.
  2. 왼쪽 상단 메뉴 관리를 클릭합니다.
  3. 상단 메뉴 오른쪽 끝 ⨁ 아이콘을 클릭합니다.
  4. 메뉴명을 입력하고 확인을 클릭합니다. 예시) SHOP, STORE 등

2단계: 쇼핑 위젯 추가하기
  1. 디자인 모드 왼쪽 상단 위젯 추가  를 클릭합니다.
  2. 쇼핑 위젯을 클릭합니다.

3단계: 위젯 설정 열기
  1. 쇼핑 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  2. 보조 메뉴가 나타나면 쇼핑 카테고리 설정을 클릭합니다.


4단계: 카테고리 설정 및 디자인

다음 그림과 설명을 참조하여, 쇼핑 위젯과 연동할 상품 카테고리를 연결합니다.

  1. 표시옵션: 상품 목록에 표시할 표시요소를 켜고 끌 수 있습니다.
  2. 진열: 쇼핑 위젯과 연동할 상품 카테고리를 선택합니다.
  3. 디자인
    • 이미지 비율: 상품 이미지 비율을 선택합니다. *선택한 비율은 상품 상세페이지 이미지에도 적용됩니다.
    • 1줄 개수: 1줄에 몇 개의 상품을 표시할지 선택합니다.
    • 상품 간격: 상품 이미지 간 간격을 조절할 수 있습니다.
    • 텍스트 정렬: 상품명 및 상품가격과 같은 정보를 왼쪽, 가운데, 오른쪽 정렬시킵니다.
    • 상품명, 판매가, 요약설명: 해당 텍스트의 크기 및 색상, 굵게 옵션을 변경합니다.

5단계: 미리보기 및 게시하기
  1. 디자인 모드 오른쪽 상단 미리보기  아이콘을 클릭합니다.
  2. 연동한 상품 카테고리의 상품들이 표시되는지 확인합니다.
  3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.




쇼핑 위젯과 상품 카테고리 연동 후 메뉴의 변화

1. 웹사이트에 표시된 SHOP 메뉴와 상품 카테고리(하위 메뉴)

위 과정을 마치면 다음 그림처럼 SHOP 메뉴 아래 상품 카테고리가 하위 메뉴처럼 표시됩니다.



2. 생성한 상품 카테고리

위 상품 카테고리의 이름, 순서 등은 관리자 메뉴의 [쇼핑 > 상품관리]에서 카테고리 관리를 클릭해 변경할 수 있습니다.

디자인숲 (Dsoob.com)
경기도 남양주시 별내동 975-3 파라곤스퀘어 M동 1022호 / 서울시 중랑구 동일로 157길 8-10 디자인숲
TEL : 0507-1342-1237 ,  010-9990-1237 (AM10시-PM7시,점심PM12시-PM1시)
Copyright © 2020 디자인숲. All Right Rerserved

개인정보책임자 : info@dsoob.com

사업자 등록번호:405-12-62844

통신판매업신고 : 제2018-서울중랑-0218호