모바일 안내서_나래
식스샵은 자동으로 모바일에 최적화된 화면 디자인을 제공하지만 모바일 버전에서 보여지는 일부 구성요소의 설정을 직접 수정하실 수 있습니다.
[ 일반 안내서 ]
목차
뷰포트 전환하기
메뉴
상단 메뉴 배치
모바일 보조 메뉴
메인 배너 섹션
상품 목록 섹션
상품 상세
상세 설정하기
열 설정
글자 크기 설정
FAQ
1. 뷰포트 전환하기
Step1. 디자인 편집 페이지 하단의 뷰포트 설정 버튼을 눌러 모바일 뷰포트로 전환해 주세요.
이미지
Step2. 섹션에 대한 설정이 필요한 경우 해당 섹션을 더블 클릭 해주세요.
섹션에 연필 모양 아이콘이 뜨는 경우는 [개별 편집]이 가능합니다.
이미지
Step3. 스타일에 대한 설정이 필요한 경우 스타일 편집으로 들어가 설정해 주세요.
섹션에 팔레트 모양 아이콘이 뜨는 경우 [스타일 편집] 설정으로 바로 이동합니다.
이미지
2. 메뉴
2-1. 상단 메뉴 배치
Step1. 모바일 디자인 편집 페이지 하단의 [메뉴와 스타일 편집]을 클릭해 주세요.
이미지
Step2. 페이지 리스트 하단의 [스타일 편집]을 클릭해 주세요.
이미지
Step3. 가장 맨 위에 위치한 머리글 [공통]을 클릭해 주세요.
이미지
Step4. 배치에서 원하는 종류를 선택하여 클릭해 주세요.
이미지 종류 다 때려넣은 이미지
2-2. 모바일 보조 메뉴
Step1. 모바일 디자인 편집 페이지 좌측 하단의 [메뉴와 스타일 편집(三)]을 클릭해 주세요.
이미지
Step2. 모바일 보조 메뉴 옆의 + 모양의 [메뉴 추가]를 클릭해 주세요.
이미지
Step3. 원하는 페이지들을 체크하고 [저장하기]를 클릭해 주세요.
이 미 지
3. 메인 배너 섹션
데스크탑의 메인 배너 섹션이 모바일에서 잘 표현되지 않는다면, 모바일 전용 이미지를 제작하여 데스크탑과 모바일에 각각 다른 이미지를 등록할 수 있습니다.
Step1. 모바일 뷰포트로 전환해 주세요.
Step 2. 메인 배너 섹션을 더블 클릭하고 모바일 전용 메인 배너 섹션을 [사용]으로 선택해 주세요.
Step 3. + 모양의 [이미지 추가] 클릭하여 이미지를 등록하면 모바일 전용 메인 배너가 적용됩니다.
사용하지 않을 이미지가 등록되어 있다면 해당 이미지 위에 마우스를 올린 후 휴지통 모양 아이콘을 클릭하여 삭제해 주세요.
메인 배너 섹션의 종류에 따라 모바일 전용 메인 배너 섹션의 높이와 비율 설정 방법이 다릅니다. 메인 배너 섹션의 종류를 확인하려면 Ctrl(⌘) + Shift + M하신 후 데스크탑 모양 아이콘을 클릭하여 데스크탑 뷰포트로 이동해 주세요. [데스크탑 뷰포트 > 메뉴(좌측 하단≡) > 스타일 편집 > 메인 배너 섹션]에서 확인하실 수 있어요.
메인 배너 섹션의 종류가 높이 고정인 경우 모바일 전용 메인 배너 섹션의 높이를 데스크탑의 높이와 다르게 설정할 수 있어요. [모바일 뷰포트 > 메뉴(좌측 하단≡) > 스타일 편집 > 메인 배너 섹션]에서 높이 조정이 가능합니다.
메인 배너 섹션의 종류가 비율 고정인 경우 데스크탑에서 설정한 메인 배너 섹션의 비율을 동일하게 따라갑니다. [데스크탑 뷰포트 > 메뉴(좌측 하단≡) > 스타일 편집 > 메인 배너 섹션]에서 비율이 조정이 가능합니다.
메인 배너 섹션의 종류별 이미지 설정 방법이 궁금하다면 메인 배너 섹션의 크기 안내서를 확인해 주세요.
4. 상품 목록 섹션
상품 목록 섹션, 갤러리 섹션, 인스타그램 섹션은 모바일에서 보이는 열을 별도로 설정할 수 있습니다.
Step1. 편집을 원하는 상품 목록 섹션 or 갤러리 섹션 or 인스타그램 섹션을 더블 클릭 해주세요.
이미지
Step2. 나타나는 개별 편집 창에서 [열]을 조정해주세요.
모바일 섹션의 열 1~3열 중 선택할 수 있습니다.
이미지
5. 상품 상세
모바일의 상품 상세 페이지를 편집할 수 있습니다. 다만 데스크탑의 설정을 기반으로 구성되기에, 편집할 수 있는 부분이 제한되어 있는 점은 참고 부탁드립니다.
이미지
설정 항
상품 이름 상단의 상품 이름의 크기를 지정할 수 있습니다.
가격
상단의 상품 가격의 크기를 지정할 수 있습니다.
요약 설명
상품 이름 하단의 요약 설명의 크기를 지정할 수 있습니다.
스크롤할 때 구매하기 버튼 보이기
옵션 체크 시 모바일 상품 상세 화면 스크롤을 할 때 하단에 구매하기 버튼이 지속적으로 노출됩니다.
모바일에서 글자 크기 조정하기
옵션 체크 시 상세 설명의 글자 크기를 일괄적으로 지정할 수 있습니다.
체크하지 않았을 때에는 [모바일 > 스타일 편집 > 줄글]의 크기를 따라갑니다.
네비게이션
스크롤 시 상단에 나타나는 네비게이션의 글자 크기를 지정할 수 있습니다.
후기와 질문 / 관련 상품
후기 상단, 질문 상단, 관련 상품의 상단에 나타나는 제목 크기를 지정할 수 있습니다.
후기와 질문 같은 경우 등록일 보이기 옵션도 설정 가능한 점 참고해 주세
관련 상품
관련 상품의 열 조정과, 관련 상품 이름 / 가격의 크기를 지정할 수 있습니다.
6. 상세 설정하기
6-1. 글자 크 설정
모바일의 글자 크기 조정하는 부분이 별도로 있어, 데스크탑에서 설정하신 크기가 따라가지 않습니다. 아래 안내에 따라 글자 크기를 설정해 주세
Step1. 모바일 디자인 편집 페이지 하단의 [메뉴와 스타일 편집]을 클릭해 주세요.
이미지
Step2. 페이지 리스트 하단의 [스타일 편집]을 클릭해 주세요.
이미지
Step3. [제목글]과 [줄글]을 선택하여 원하는 크기로 설정해 주세요
이미지
위의 설정을 모두 마치면, 제목글과 줄글 영역에 속하는 부분들이 일괄적으로 변경되는 부분을 확인하실 수 있어
Last updated
Was this helpful?