상품 진열하기

목표

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

1단계: 빈 메뉴 추가하기

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단 메뉴 관리  를 클릭합니다.
  3. 상단 메뉴 오른쪽 끝 ⨁ 아이콘을 클릭합니다.
  4. 메뉴명을 작성하고 확인을 클릭합니다. 예시) SHOP, STORE 등

2단계: 쇼핑 위젯 추가하기

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

3단계: 위젯 설정 열기

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

4단계: 카테고리 연동하기

아래 그림을 참고하여, 상품 카테고리를 연결합니다. 해당 카테고리에 포함된 모든 상품(하위 카테고리 포함)들이 모두 표시됩니다.

참고: 카테고리 연동 즉시 메뉴명이 해당 상품 카테고리명으로 변경됩니다. 카테고리명을 그대로 이용해도 좋고, 메뉴 관리를 열어 메뉴명을 다시 변경할 수도 있습니다.

5단계: 쇼핑 위젯 디자인하기

남은 쇼핑 설정 항목들을 수정해 쇼핑 위젯에 표시할 요소들을 선택하고, 스타일을 변경합니다.

  1. 표시옵션: 상품 목록에 표시할 표시요소를 켜고 끌 수 있습니다.
  2. 진열: 표시할 상품 카테고리를 선택하고, 정렬, 출력수, 페이지 방식을 설정할 수 있습니다.
    • 카테고리: 표시할 상품의 카테고리를 선택해 주세요. 위 4단계 설명을 참고할 수 있습니다.
    • 정렬: 상품 정렬순을 등록순, 인기순 등으로 변경할 수 있습니다.
    • 출력수:  한 번에 출력할 상품 개수를 선택합니다.
    • PC 페이지 방식: PC 버전에서 다음 상품을 보기 위해 숫자 대신 더보기 등 페이지 방식으로 변경할 수 있습니다.
    • 모바일 페이지 방식: 모바일 버전에서 다음 상품을 보기 위해 숫자 대신 더보기 등 페이지 방식으로 변경할 수 있습니다.
  3. 디자인
    • 이미지 비율: 상품 이미지 비율을 선택합니다. *선택한 비율은 상품 상세페이지 이미지에도 그대로 적용됩니다.
    • 1줄 개수: 1줄에 몇 개의 상품을 표시할지 선택합니다.
    • 상품 간격: 상품 이미지 간 간격을 조절할 수 있습니다.
    • 텍스트 정렬: 상품명 및 상품가격과 같은 정보를 왼쪽, 가운데, 오른쪽 정렬시킵니다.
    • 상품명, 판매가, 회원등급가, 요약설명: 각 옵션 텍스트의 크기 및 색상, 굵게 옵션을 수정합니다.

6단계: 미리보기 및 게시하기

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



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

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

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


2. 생성한 상품 카테고리

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

목록으로

아임웹 디자이너가 되어주세요!

개인 디자이너, 1인 기업을 위한 아임웹 디자이너 프로그램

리셀러/디자이너 신청

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.

218.7K

누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.

315

일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.

2.1K

전국 파트너/리셀러 수

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 나이스페이, 엑심베이 공식파트너입니다.