쇼핑 위젯으로 제품 브로셔 사이트 만들기

생산 장비, 부품과 같은 다양한 제품을 취급하면서 온라인 브로셔 개념으로 웹사이트를 만들려는 경우 쇼핑 위젯을 사용하면 수백, 수천 개의 제품도 빠르고 효율적으로 진열이 가능합니다.

이 도움말은 제품 소개 페이지 제작을 위한 가이드로, 사용자가 상품을 등록하고, 상품 상세페이지에 가격, 구매하기 버튼과 같은 쇼핑 요소들을 숨기는 방법을 설명합니다.

1단계: 상품 카테고리 구성하기

제품군, 제품 종류에 맞춰 상품 카테고리를 생성하고 구성합니다. 이렇게 구성한 상품 카테고리는 나중에 쇼핑 위젯을 사용해 사이트 상단 메뉴에 그대로 적용할 수 있습니다.

상품 카테고리 구성하기

2단계: 표시할 제품 등록하기

웹사이트에 진열할 제품들을 등록합니다.

  1. 내 사이트 관리자 페이지에 접속합니다. 접속방법
  2. 왼쪽 메뉴에서 [쇼핑 > 상품]을 클릭합니다.
  3. 오른쪽 상단의 상품 추가 버튼을 클릭합니다.
  4. 상품 이미지, 상품명, 브랜드, 제조사, 원산지, 상세설명 등의 상품 정보를 입력합니다.
  5. (선택 사항) 가격 항목에서 가격을 공개하지 않으려면 가격없음 을 선택합니다. 쇼핑 위젯 및 상품 상세페이지에 상품 가격 대신 가격문의로 표시됩니다.

    참고: 가격없음 으로 설정하면 구매하기 버튼과 옵션을 사용할 수 없게 됩니다.

  6. 등록할 상품이 속할 카테고리를 선택합니다.

  7. 저장 버튼을 클릭해 등록을 완료합니다.
  8. (선택 사항) 위 3~7번 과정을 반복해 필요한 만큼 상품을 추가합니다.

    참고: 같은 형식을 유지하는 경우 상품을 복제해 일부 정보만 바꿔 빠르게 추가할 수 있습니다. 상품 복제하기

3단계: 쇼핑 위젯 추가 및 상품 카테고리 연동하기

위 2단계에서 추가한 상품을 웹 페이지에 진열하고, 상단 메뉴에 상품 카테고리가 나타나도록 설정합니다.

  1. 관리자 페이지 왼쪽 상단의 디자인 모드를 클릭합니다.
  2. 디자인 모드 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭하고, 새로운 메뉴를 생성합니다. 메뉴 추가하기
  3. 왼쪽 상단의 위젯 추가 + 아이콘을 클릭합니다.
  4. 쇼핑 위젯을 클릭합니다.
  5. 쇼핑 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  6. 컨텍스트 메뉴가 나오면 쇼핑 설정을 클릭합니다.
  7. 진열 항목에서, 연동할 상품 카테고리를 선택합니다. 가장 최상위 카테고리를 선택해 주세요. 그럼 하위 카테고리의 메뉴 및 상품들도 모두 연동됩니다. 표시되는 형태는 아래 8번 과정의 스크린샷을 참고할 수 있습니다.

  8. 쇼핑 설정 창 바깥을 클릭해 설정 창을 끄고, 상단 메뉴에 마우스 포인터를 올려봅니다. 메뉴명이 최상위 카테고리명(SHOP)으로 바뀌고, 하위 카테고리들도 모두 연동되어 표시되는 걸 볼 수 있습니다.

    참고: 자동 변경된 최상위 카테고리명은 메뉴 관리에서 언제든 다시 변경할 수 있습니다. 단, 하위 카테고리명은 관리자 페이지 [쇼핑 > 상품] 페이지의 카테고리 변경 메뉴에서 가능합니다.

  9. 쇼핑 위젯에 모든 상품들이 표시되는 걸 확인할 수 있으며, 방문자는 원하는 카테고리를 클릭해, 해당 카테고리의 상품들만 보는 것도 가능해집니다.

4단계: 상품 상세페이지 표시요소 설정하기

상품 상세페이지에 표시되는 표시요소 중 쇼핑 관련 요소들을 숨기는 과정입니다.

  1. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
  2. 글로벌 메뉴에서 상품 상세페이지 메뉴를 클릭합니다.

  3. 상품 상세페이지 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  4. 컨텍스트 메뉴가 나오면 상품 상세페이지 설정을 클릭합니다.
  5. 왼쪽 탭에서 표시요소를 클릭합니다.
  6. 상품 상세페이지에 표시될 요소들을 선택 또는 선택 해제합니다. 예를 들어, 온라인 판매를 하지 않기 때문에, 판매량, 회원등급가, 남은 재고, 적립금, 배송정보는 선택 해제할 수 있습니다.

  7. 상품 상세페이지에 표시되는 구매하기, 장바구니, 위시리스트 버튼 사용여부를 선택할 수 있습니다. 예를 들어 상세페이지에서 버튼을 숨기려면 사용안함 을 선택할 수 있으며, 필요에 따라 사용자 정의 옵션을 선택해 임의의 링크(예: 견적문의 게시판)로 연결할 수도 있습니다.

    주의: 단, 상품 가격을 가격없음 으로 설정한 경우, 버튼 옵션을 사용자 정의로 설정해도 상세페이지에 표시되지 않습니다.

(선택 사항) 5단계: 페이지에 상품 카테고리 표시하기

방문자의 편의를 위해 페이지에 상품 카테고리를 표시할 수 있습니다. 이 단계에서는 메뉴 리스트 위젯을 활용해, 페이지에 상품 카테고리를 표시하는 방법을 설명합니다.

  1. 쇼핑 위젯이 포함된 메뉴에서, 왼쪽 상단의 위젯 추가 + 아이콘을 클릭합니다.
  2. 메뉴 리스트 위젯을 클릭합니다.
  3. 메뉴 리스트 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  4. 컨텍스트 메뉴가 나오면 메뉴/카테고리 설정을 클릭합니다.
  5. 다른 스타일 버튼을 클릭해, 원하는 스타일을 선택해 주세요.

  6. 기준 위치 항목에서 SHOP 카테고리를 선택합니다. 그럼 위 5번 과정에서 선택한 메뉴 리스트 스타일에 맞춰 카테고리가 표시됩니다.

  7. 메뉴/카테고리 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
  8. 설정 완료한 메뉴 리스트 위젯을 마우스로 클릭해 드래그하여 원하는 위치로 이동시킵니다. 위젯 이동하기

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

  1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. 쇼핑 메뉴로 이동합니다.
  3. 의도한대로 상품 목록이 표시되고, 상품 상세페이지도 표시되는지 확인합니다.
  4. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.
목록으로