1. 모바일 화면 디자인하기
디자인 에디터 오른쪽 하단의 모니터 모양 아이콘을 클릭하면 뷰포트를 전환할 수 있어요. 단축키(Ctrl + Shift + M)를 사용해 주셔도 됩니다.
모바일에서 설정할 수 있는 구성 요소는 연필 모양 아이콘(개별 편집)과 팔레트 모양 아이콘(스타일 편집)이 노출되며, 요소 이름만 보이는 경우 별도 수정이 불가합니다.
2. 모바일 전용 배너 사용하기
Step1. [식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > 모바일]을 눌러 모바일 뷰포트로 변경해 주세요.
Step2. 메인 배너 섹션에 마우스를 대면 보이는 개별 편집(연필 모양 아이콘)을 클릭해 주세요.
Step3. '모바일 전용 메인 배너 사용하기'를 [사용]으로 선택해 주세요.
모바일 전용 메인 배너 사용하기를 ‘사용’으로 설정하고, 이미지, 색상, 동영상 중 사용할 유형을 선택해 주세요.
추가한 이미지나 색상 배너 위 문구는 이미지에 마우스를 대면 보이는 설정(톱니바퀴 아이콘)을 클릭하면 변경하거나 삭제할 수 있습니다.
Step4. 하단의 +를 클릭하고 배너를 등록해 주세요.
Step5. 모바일 메인 배너의 스타일을 설정해 주세요.
모바일 뷰포트에서 [왼쪽 하단 메뉴(≡) > 스타일 편집 > 메인 배너 섹션]으로 이동하여 스타일을 설정할 수 있어요.
※ 머리글과 합치기, 스타일, 배경 위 색상 설정은 데스크톱의 스타일을 따라갑니다.
3. 모바일 보조 메뉴 설정하기
Step1. [식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > 모바일]을 눌러 모바일 뷰포트로 변경해 주세요.
Step2. 왼쪽 하단 메뉴(≡)를 눌러 모바일 보조 메뉴 옆 +를 클릭하고 노출할 보조 메뉴를 선택한 후 [저장하기] 해주세요.
Step3. 모바일 뷰포트에서 [왼쪽 하단 메뉴(≡) > 스타일 편집 > 모바일 보조 메뉴]로 이동하여 스타일을 설정할 수 있어요.
※ 메인 배너 섹션의 ‘머리글과 합치기’ 기능을 사용하면 메인 배너 섹션의 색상 스타일을 따라갑니다.
※ 모바일 보조 메뉴는 스크롤할 때 상단에 고정되지 않습니다.
4. 모바일 최대 글자 크기 설정하기
PC 화면에서는 적당한 글자 크기가 모바일에서 너무 크게 보인다면, 아래 경로에서 글자의 최대 크기를 변경해 보세요.
[식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > 모바일]을 선택하고, [왼쪽 하단 메뉴(≡) > 스타일 편집]에서 제목글, 줄글, 슬라이드 중 최대 글자 크기 제한이 필요한 요소를 클릭하여 글자 크기를 제한해 주세요.
※ 기본적으로 데스크톱 뷰에서 설정한 글자의 크기를 따라가지만, 모바일 뷰 스타일 편집에서 각 섹션의 글자 크기를 설정할 수 있습니다.
※ 데스크톱에서 글자의 크기를 다르게 설정하였으나 모바일에서 동일한 크기로 보이거나, 다르게 보이는 경우에 모바일 뷰의 최대 크기 설정이 데스크톱의 글자보다 작게 설정되어 있지 않은지 확인해 보시면 좋습니다.
5. 모바일 화면의 상품 설정하기
5-1. 상품 상세 설정하기
[식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > 모바일]을 선택하고, [왼쪽 하단 메뉴(≡) > 스타일 편집 > 상품 상세]에서 설정할 수 있어요.
[왼쪽 하단 메뉴(≡) > 스타일 편집 > 실험실]에서 모바일 디자인의 [상품 상세 페이지 - 좌우 여백 제거]에 체크하면 상품 상세의 대표 이미지, 상세 설명의 좌우 여백이 제거됩니다.
5-2. 상품 목록 여백 설정하기
[왼쪽 하단 메뉴(≡) > 스타일 편집 > 실험실]에서 모바일 디자인의 [상품 목록 섹션 - 좌우 여백 제거]에 체크하면 상품 목록의 좌우 여백이 제거됩니다.
6-1. 모바일 메뉴 디자인 설정하기
모바일 메뉴의 디자인은 1️⃣ 데스크톱 뷰포트에서 2️⃣ [데스크톱에서 ≡ 메뉴 사용하기]일 때, 설정할 수 있어요.
데스크톱 뷰포트에서 설정하면 데스크톱과 모바일에 공통 적용됩니다.
Step1. [식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > 데스크톱]을 선택해 주세요.
Step2. [메뉴 나열하기]일 때, 임시적으로 [데스크톱에서 ≡ 메뉴 사용하기]로 변경해 주세요.
설정을 마치고 다시 [메뉴 나열하기]로 복구해 주시면 됩니다.
Step3. [왼쪽 하단 메뉴(≡) > 스타일 편집 >모바일 메뉴]에서 글꼴, 색상 등의 모바일 메뉴 디자인을 변경할 수 있어요.
※ 모바일 뷰포트 [왼쪽 하단 메뉴(≡) > 스타일 편집 >모바일 메뉴]에서는 모바일 메뉴의 로고, 로그인/상품 검색 사용 여부, 메뉴 글자 크기, 아이콘 크기 설정만 가능합니다.
6-2. 모바일 메뉴 로그인, 상품 검색 설정하기
모바일 머리글과 모바일 메뉴에 각각 로그인, 상품 검색 메뉴를 사용할 수 있어요.
[머리글에 로그인, 상품 검색 사용하기]
Step.1 [식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > 모바일]을 선택해 주세요.
Step.2 머리글의 개별 편집(연필 모양 아이콘)에서 로그인과 상품 검색의 사용 여부를 설정해 주세요.
[모바일 메뉴에 로그인, 상품 검색 사용하기]
Step1. [식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > 모바일]을 선택해 주세요.
Step2. [왼쪽 하단 메뉴(≡) > 스타일 편집 >머리글 - 모바일 메뉴]에서 ‘로그인 사용하기’, ‘상품 검색 사용하기’에 체크 또는 체크 해제하여 각 항목의 사용 여부를 설정해 주세요.
7. 사용자 편집 섹션 설정하기
데스크톱에서 사용자 편집 섹션을 2단 이상으로 설정하면 모바일에서는 1단으로 합쳐지며 데스크톱의1단부터 위에서 아래로 나열됩니다.
모바일 화면에서 이미지 크기가 작게 보인다면, 사용자 편집 섹션 개별 편집의 좌우 여백 설정과 이미지 요소의 너비 설정을 조절해 보시기 바랍니다.
이미지 요소의 너비가 30%, 사용자 편집 섹션의 좌우 여백이 200px일 때, 데스크톱과 모바일 화면 이미지 요소의 너비가 40%, 사용자 편집 섹션의 좌우 여백이 50px일 때, 데스크톱과 모바일 화면 [사용자 편집 섹션 좌우 여백 설정하기]
사용자 편집 섹션에 마우스를 대면 보이는 개별 편집(연필 모양 아이콘)을 클릭하고 하단의 좌우 여백 설정을 변경해 주세요.
[사용자 편집 섹션 이미지 요소 너비 설정하기]
사용자 섹션에 추가된 이미지 요소에 마우스를 대면 보이는 개별 편집(연필 모양 아이콘)을 클릭하고 디자인 탭에서 너비 설정을 변경해 주세요.
8. 모바일에서 열 설정하기
상품 목록 섹션, 상품 슬라이드 섹션, 갤러리 섹션, 게시판 섹션(격자형 게시판)에서는 데스크톱과 모바일에서 각각 한 줄에 표시되는 썸네일이나 상품의 개수를 따로 설정할 수 있습니다.
[갤러리 섹션, 상품 목록 섹션, 상품 슬라이드 섹션]
Step1. [식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > 모바일]을 눌러 모바일 뷰포트로 변경해 주세요.
Step2. 열 설정을 변경할 섹션에 마우스를 대면 보이는 개별 편집(연필 모양 아이콘)을 클릭하고, 열 설정을 변경해 주세요.
Step1. [식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > 모바일]을 눌러 모바일 뷰포트로 변경해 주세요.
Step2. 열 설정을 변경할 섹션에 마우스를 대면 보이는 스타일 편집(팔레트 모양 아이콘)을 눌러 열 설정을 변경해 주세요.
