모바일 화면 디자인
식스샵은 자동으로 모바일에 최적화된 화면 디자인을 제공하지만 모바일 버전에서 보여지는 일부 구성요소의 설정을 직접 수정하실 수 있습니다.
디자인 에디터 하단의 뷰포트 설정 버튼을 눌러 모바일 뷰포트로 전환해주세요.
단축키: Ctrl + Shift + M
뷰포트를 변경하면 화면이 이렇게 바뀝니다.
버튼 1을 누르면 데스크탑 / 버튼 2를 누르면 모바일 버전으로 디자인 에디터 화면 모드를 변경합니다.
모바일에서 설정을 변경할 수 있는 구성 요소의 경우 선택하면 아래 갤러리 섹션과 같이 설정을 위한 버튼을 볼 수 있으며, 버튼이 노출되지 않는 경우 별도 수정이 불가합니다.
제목글, 줄글, 갤러리는 모바일 뷰포트 상점 공통 스타일 설정 에서 '글자 최대 크기'를 설정할 수 있어요. 데스크탑의 글자 크기를 모바일에서 동일하게 적용하지만 최대 크기를 제한하는 설정입니다.
모바일 뷰포트 편집 창에서 좌측 하단 메뉴 아이콘(≡) 클릭 > 스타일 편집 클릭 > 모바일 메뉴를 클릭하여 모바일 메뉴를 설정해볼 수 있습니다.
데스크탑에서 머리글의 종류를 '데스크톱에서 ≡ 메뉴 사용하기'로 선택한 상태에서는 모바일 메뉴의 설정이 데스크탑에도 적용됩니다. 데스크탑에서 머리글의 종류를 '메뉴 나열하기'로 선택한 상태에서는 모바일 메뉴를 데스크탑 버전과 별도로 설정할 수 있습니다.
상품 목록 혹은 게시글 등에서 필터를 설정한 경우, 전체 필터를 선택하지 않았어도 모바일 화면에서는 전체 필터가 적용되며, PC 버전에서 설정한 필터 숨기기는 모바일에 적용되지 않습니다.
모바일 뷰포트에서 머리글을 더블 클릭하거나
연필 모양 아이콘을 클릭하면 표시되는 개별 편집에서
머리글의 검색, 로그인 아이콘이 보이도록 설정할 수 있습니다.
데스크탑 버전과 마찬가지로 [스타일 편집 > 머리글 > 장바구니 / 로그인 / 상품 검색]에서
장바구니와 로그인 아이콘의 디자인을 설정할 수 있습니다.
[모바일 뷰포트 > 스타일 편집 > 머리글 > 공통 > 배치]에서
모바일 버전의 머리글 내 요소들의 배치를 변경할 수 있습니다.
모바일에서 접속 시 특정 페이지들을 머리글 아래에 모아 강조할 수 있습니다.
상품 카테고리별 메뉴, 시즌 상품, 특별 할인 상품을 모아둔 페이지 등으로
다양하게 구성해보세요.
[디자인 편집 > 모바일 뷰포트 > 메뉴와 스타일 편집] 에서 사용할 수 있습니다.
[디자인 편집 > 화면 오른쪽 하단 모니터 아이콘 클릭 > 모바일 뷰포트]로 이동해주세요.
디자인 편집 화면의 가장 왼쪽 아래의 석 삼자 모양 아이콘 또는 키보드의 Tab키를 누르면
왼쪽에서 메뉴(페이지)에 대한 설정을 할 수 있습니다.
모바일 보조 메뉴 오른쪽의 +모양 버튼으로 추가해보세요.
데스크탑의 여러 단이 모바일에서는 1단으로 합쳐집니다.
이때 데스크탑에서 더 왼쪽에 있는 단일수록 모바일에서는 더 위에 위치합니다.
좌_데스트 탑 / 우_모바일 경우, 2단 이상 배치 화면입니다.
너비를 다시 100%로 변경한 뒤,
이미지가 있는 사용자 편집 섹션의 개별 편집에서
좌우 여백을 조절하고, 화면을 새로고침해보세요.
데스크 탑 화면에서도 원하는 만큼 조절했지만 너비가 100%이므로
모바일에서는 최대 크기로 보입니다. 자세한 내용은 아래 안내서를 참고하세요.
Last modified 1yr ago