그룹 상품 카테고리 만들기 (하위 카테고리)

여러 개의 상품 카테고리를 하나의 그룹으로 구성할 수 있으며, 최대 2단까지 구성이 가능합니다. 상품 카테고리는 일반 페이지 메뉴와 달리 관리자 페이지에서 구성할 수 있으며, 구성한 상품 카테고리 그대로 디자인 모드에서 표시가 가능합니다.

상품 카테고리를 쇼핑 위젯에 연결하고, 페이지에 상품을 표시하는 방법은 상품 진열하기 도움말을 참고할 수 있으며, 이 도움말에서는 상품 카테고리를 상위/하위 카테고리로 구성하는 방법을 설명합니다.

구성방법

1. 내 사이트 관리자 페이지에 접속합니다. 
2. 왼쪽 메뉴에서 [쇼핑 > 상품관리]를 클릭해 이동합니다.
3. 카테고리 관리를 클릭합니다.

   
   

4. ⨁ 새 카테고리를 클릭해, 새로운 카테고리를 추가합니다.
5. 오른쪽 카테고리명 항목에서 카테고리의 이름을 작성합니다.
6. (선택 사항) 위 4~5번 과정을 반복해 상품 카테고리를 필요한 만큼 추가합니다.
7. 하위 카테고리로 지정할 카테고리를 마우스로 클릭합니다.
8. 마우스 클릭을 유지한 체로 하위 메뉴를 드래그합니다. 드래그한 하위 카테고리를 상위 카테고리 위에 올린 다음, 마우스 버튼을 놓습니다.
9. 그룹 카테고리로 구성되면, 관련 하위 카테고리를 반복해서 추가합니다.
10. (선택 사항) 상품 카테고리는 최대 2단까지 구성 가능합니다. 필요에 따라 카테고리를 2단으로 구성합니다. 예를 들어, 위 애니메이션에서 패션/뷰티 카테고리 아래 상의, 하의, 점퍼, 신발 카테고리를 2단으로 구성하는 걸 확인할 수 있습니다.
11. 저장 버튼을 클릭합니다.
12. 이제 디자인 모드에 접속해 쇼핑 위젯을 추가하고, 쇼핑 위젯에 위에서 구성한 카테고리를 적용합니다. 상품 진열방법

관련 도움말

일반 페이지 메뉴를 그룹 메뉴로 구성하려면 아래 도움말을 참고하세요.

그룹 메뉴 만들기 (하위 메뉴)

상품 이미지에 움직이는 GIF를 넣고 싶어요 (애니메이션 GIF)

상품 대표 이미지에 GIF 이미지를 사용할 수 있습니다. 프레임 단위로 움직이는 애니메이션 효과를 줄 수 있는 GIF는 여러 상품 중 특정 상품을 강조할 때 유용하게 사용할 수 있습니다. 단, GIF 파일은 최대 256색만 사용할 수 있어 색상 표현력이 낮으며, 파일 용량이 높아 페이지 로드가 느려질 수 있으므로 주의해서 사용할 필요가 있습니다.

시작에 앞서

• 일반적으로 고해상도(High Resolution), 고프레임률(High Frame Rate)의 GIF 파일은 용량이 크기 때문에 상품 목록 등에서 여러 GIF 이미지가 동시에 표현될 경우 페이지 로드 속도에 악영향을 줄 수 있습니다.
• 네이버 쇼핑 등 일부 외부 서비스에서 GIF 형식은 사용이 금지되어 상품 노출이 제한될 수 있습니다.
• 과도한 애니메이션 효과는 구매자에게 시각적으로 혼란을 주게 되므로 매출에 악영향을 끼칠 수 있습니다.

추가방법

1. 내 사이트 관리자 페이지에 접속합니다. 
2. 왼쪽 메뉴에서 [쇼핑 > 상품관리]를 클릭해 이동합니다.
3. GIF 상품 이미지를 추가할 상품을 클릭합니다.
4. 이미지 항목에 image 추가를 클릭합니다.
5. 내 PC에서 GIF 파일을 선택해 올려줍니다.
6. (선택 사항) 등록된 이미지 중 가장 왼쪽 상단에 위치한 이미지가 상품의 썸네일로 표시됩니다. 이미지의 순서를 변경하려면, 이미지 클릭 후 드래그하여 이동해 주세요.
   

   참고: GIF 애니메이션이 작동하지 않는 경우 파일 용량이 높기 때문일 수 있습니다.

   
   .

마우스 오른쪽 버튼을 클릭하면 모든 설정 가능

디자인 모드에서 마우스 오른쪽 버튼을 활용해 메뉴, 위젯, 섹션의 컨텍스트 메뉴를 열 수 있습니다. 

사용자는 컨텍스트 메뉴를 통해 메뉴, 위젯, 섹션의 설정을 변경할 수 있을 뿐만 아니라, 다양한 추가 옵션도 적용할 수 있기 때문에 디자인 모드에서 가장 많이 이용하게 되는 기능 중 하나 입니다.

이 도움말에서는 디자인 모드에서 마우스 오른쪽 버튼을 사용하게 되는 여러 상황과 마우스 오른쪽 버튼 클릭 후 표시되는 컨텍스트 메뉴에 관해 상세히 설명합니다.

메뉴 관리에서 마우스 오른쪽 버튼 클릭

1. 메뉴 설정 : 메뉴명 수정, 메뉴 주소(URL), 페이지 제목 및 설명 등을 변경할 수 있는 설정 메뉴를 엽니다.
2. 메뉴 추가 : 새로운 메뉴(페이지)를 추가합니다.
3. 메뉴 복제 : 해당 메뉴를 복제합니다.
4. 삭제 : 메뉴를 삭제합니다.

위젯에서 마우스 오른쪽 버튼 클릭

1. (위젯) 설정 : 위젯 설정 메뉴를 엽니다. 위젯별로 옵션을 변경할 수 있습니다.
2. 애니메이션 : 애니메이션 설정 메뉴를 엽니다. *여백 위젯 제외
3. 가로 영역 확장 : 위젯 가로 크기를 브라우저 양끝까지 확장시킵니다.
4. 위젯 복사 : 위젯을 복사합니다.
5. 위젯 붙여넣기 : 위 4번 기능을 통해 복사한 위젯을 페이지에 붙여넣습니다.
6. (위젯) 삭제 : 위젯을 삭제합니다.

섹션에서 마우스 오른쪽 버튼 클릭

1. 섹션 설정 : 섹션 설정 창을 엽니다. 섹션 배경에 색/이미지/동영상을 넣거나 각종 효과, 옵션을 줄 수 있습니다.
2. 빈 섹션추가 : 빈 섹션을 추가합니다.
3. 위로 이동 : 섹션을 위로 이동 시킵니다.
4. 아래로 이동 : 섹션을 아래로 이동 시킵니다.
5. 섹션 복사 : 섹션을 복사합니다.
6. 섹션 붙여넣기 : 섹션을 붙여넣기 합니다. *다른 메뉴에서 붙여넣기 가능
7. 섹션 반복 : 해당 섹션이 다른 모든 페이지에서도 반복되도록 설정합니다. *하단 제일 끝에 위치하는 경우만 해당
8. 섹션 삭제 : 섹션을 삭제합니다.

상단 헤더 (Header)에서 마우스 오른쪽 버튼 클릭

1. 상단 설정 : 상단 설정 메뉴로 이동합니다.
2. 겹치기 : 상단 메뉴와 본문 배경이 겹치는 효과를 줍니다.

하단 푸터 (Footer)에서 마우스 오른쪽 버튼 클릭

• 하단 설정 : 하단 설정 메뉴를 엽니다.

위젯 이동하기

위젯은 이동시킬 수 있습니다. 

다음 이동 방법과 애니메이션을 참조해보세요.

이동방법

1. 마우스로 위젯을 클릭합니다.
2. 클릭을 유지하고 마우스로 드래그합니다.

3. 원하는 위치에 검정선이 나타나면 마우스를 놓습니다.

   

특정 섹션으로 이동하도록 링크 연결이 가능한가요?

모든 섹션은 고유의 ‘섹션 ID’를 갖고 있으며, 버튼 등에 추가할 수 있는 링크 주소로 활용할 수 있습니다.

예를 들어, 방문자가 ‘섹션 ID’가 링크된 버튼을 클릭하면 아래의 애니메이션과 같이 방문자를 동일한 페이지의 다른 섹션으로 이동시킬 수 있으며, 필요에 따라 다른 페이지의 특정 섹션으로 이동시키는 것도 가능합니다.

이 도움말을 통해 버튼을 클릭하면 특정 섹션으로 이동시키는 앵커 링크를 만드는 방법을 배워보세요.

설정방법

동일한 페이지의 특정 섹션에 앵커 링크 걸기

다른 페이지의 특정 섹션에 앵커 링크 걸기

애니메이션 효과 적용하기

위젯마다 페이드인, 날아오기, 회전하기, 뒤집기 등 애니메이션 효과를 추가할 수 있습니다. 적절히 활용하면 심미성을 높일 뿐더러 주목도를 높이는 데도 도움이 됩니다.

적용방법

위젯에 애니메이션 효과를 적용하는 방법을 두 가지가 있습니다.

방법2: 위젯 별로 애니메이션 효과 적용하기

공통 디자인 설정하기

공통 디자인 설정

공통 디자인 설정을 변경해 페이지마다 공통적으로 적용할 텍스트의 크기와 색상, 기본 배경색, 본문폭, 글꼴(폰트), 버튼 디자인 등을 맞춤 설정 할 수 있습니다.

참조 : 본 설정 메뉴에서 설정한 공통 디자인 값들은 일부를 제외하고 별도 수정이 가능합니다.

메뉴 열기

1. 디자인 모드에 접속합니다.
2. 오른쪽 상단 톱니바퀴아이콘을 클릭합니다.

본문 설정항목

1. 브랜드/링크색 : 구매하기, 로그인 버튼, 게시물 기본 링크색, 자동 발송 메일의 강조 등에 사용됩니다. 흰색 또는 밝은색 사용시 보이지 않는 경우가 생길 수 있으므로 주의가 필요합니다.
2. 뱃지색 : 알림 카운트 등을 표시하는데 사용하는 뱃지의 배경색을 설정합니다. 뱃지의 숫자는 흰색이므로 너무 밝지 않은 색상 적용이 권장됩니다.
3. 글자색 : 본문 텍스트 기본 색상을 변경할 수 있습니다.
4. 배경색 : 내 사이트 기본 배경색을 설정합니다. 섹션에서 설정한 배경이 있을 경우 기본 배경색 위에 덮어씌우게 됩니다.
5. 본문폭 : 데스크톱(PC) 모드의 기본 본문 가로폭을 설정합니다. 사이트의 모든 페이지에 영향을 주며, 위젯의 가로영역 확장 또는 섹션 가로 100% 확장이 적용된 영역은 본문폭이 적용되지 않습니다. 본문폭 설정방법
6. 그리드 간격 : 위젯과 위젯간의 상, 하, 좌, 우 간격을 설정합니다. 섹션 설정에서 그리드 간격 사용 시 섹션 설정이 더 우선시 됩니다.

텍스트 설정항목

1. 텍스트 정의 : 내 사이트에서 사용하는 기본 텍스트 크기 및 색상, 줄간격 등을 설정합니다.
2. 본문 한/중/일 : 단락이 본문(표준)으로 설정된 텍스트의 한글/중국어/일어 글꼴을 변경할 수 있습니다.
3. 본문 영문 글꼴 : 단락이 본문(표준)으로 설정된 텍스트의 영어 글꼴을 변경할 수 있습니다.
4. 제목 한/중/일 : 단락이 제목(Heading)으로 설정된 텍스트의 한글/중국어/일어 글꼴을 변경할 수 있습니다.
5. 제목 영문 글꼴 : 단락이 제목(Heading)으로 설정된 텍스트의 영어 글꼴을 변경할 수 있습니다.

구성요소 설정항목

1. 버튼 스타일 : 입력폼 위젯, 상품, 예약 상세페이지, 주문페이지 등 버튼이 포함된 항목의 스타일을 설정합니다. 일부 상황(로그인, 회원가입)에서는 버튼 스타일이 반영되지 않습니다.
2. 입력 필드 : 입력폼 위젯, 상품, 예약 상세페이지, 주문페이지 등 입력요소가 있는 항목의 스타일을 설정합니다. 일부 상황(로그인, 회원가입)에서는 입력 스타일이 반영되지 않습니다.
3. 말풍선 스타일 : 각종 위젯의 링크 타입을 말풍선으로 사용할 경우 표시될 말풍선의 스타일을 설정합니다. 이 설정은 모든 말풍선에 동일하게 적용됩니다.
4. 페이징 스타일 : 비주얼섹션 및 슬라이드 갤러리의 페이징 스타일을 지정합니다.
5. 기본 No-Image : 게시판 및 최신글 위젯(그리드 및 Masonry 타입만 적용) 등에 공통적으로 표시할 이미지를 지정합니다. 게시물에 대표이미지를 지정한 경우 직접 지정한 대표이미지가 우선 반영됩니다.

옵션 설정항목

1. 원페이지 구성 : 대메뉴가 원페이지로 구성됩니다. 대메뉴의 하위메뉴(서브메뉴)는 원페이지 적용 대상이 아니며, 미리보기에서만 원페이지 구성을 확인하실 수 있습니다. 상세 설정방법
2. 모바일 폰트유지 : 모바일에서도 설정한 글꼴(폰트)가 로드됩니다. 한글 폰트의 경우 용량이 많은 편이기에 로드 속도가 지연될 수 있으므로 특별한 경우가 아닌한 사용 해제를 권장합니다.
3. 모바일에서 PC 보기 버튼 사용 : 모바일에서 접속 시 페이지 최하단에 PC 보기 버튼을 표시합니다. PC 보기 버튼의 배경색과 글자색은 마지막 섹션을 따릅니다.
4. 로그인/가입 팝업으로 사용 : 이 옵션을 사용하면 로그인이나 가입창이 현재 페이지에서 팝업(모달) 형태로 나타납니다. 해제 시 메뉴 관리의 글로벌 메뉴에서 로그인, 가입 페이지를 직접 디자인(변경) 할 수 있습니다. 단, 사이트 접속 시 성인인증 페이지 출력 사용 시, 해당 페이지에서는 이 설정에 관계 없이 팝업 형태로 로그인, 가입 페이지가 동작합니다.
5. 가입완료 후 특정 위치로 이동 : 가입완료 후 항상 설정한 메뉴로 이동합니다.
6. 로그인 후 특정 위치로 이동 : 로그인 후 이동할 메뉴를 설정합니다. 로그인 위젯이나 모바일 메뉴의 로그인 영역을 통해서 로그인 시에만 적용되며 이외에는 마지막 접속 메뉴로 이동합니다.
7. 스크롤 부드럽게 : 방문자 컴퓨터의 기본 마우스 스크롤 설정 대신 부드러운 스크롤을 사용합니다. 디자인 모드가 아닌 미리보기에서 적용 상태를 직접 스크롤하여 확인할 수 있습니다. 단, 이 기능 적용 시 마우스 휠을 이용한 확대 및 축소 기능이 동작하지 않습니다.
8. 페이지 전환시 페이드 효과 : 사이트 내에서 링크 이동, 메뉴 이동 등 페이지 전환 시 서서히 전환되는 효과를 적용합니다. 디자인 모드가 아닌 미리보기에서 적용 상태를 메뉴 등을 클릭해 확인할 수 있습니다. Safari(사파리) 브라우저에서는 호환성 문제로 지원하지 않습니다.
9. 위젯에 애니메이션 적용 : 상단 섹션을 제외한 모든 위젯에 페이드인 애니메이션 효과가 지속시간 2초로 적용됩니다. 위젯마다 개별 적용한 경우 이 설정을 따르지 않습니다. 개별 애니메이션 설정방법

공통 디자인 설정 적용 또는 취소하기

1. 공통 디자인 설정 오른쪽 상단 ⓧ를 클릭하거나, 설정메뉴 바깥 영역 아무 곳을 클릭합니다.
2. '공통 디자인 설정을 저장 하시겠습니까?'라는 경고창이 나타납니다.

3. 적용을 하려면 저장을, 적용하지 않고 종료하려면 취소 버튼을 클릭합니다.