식스샵 고객센터
식스샵 웹사이트채팅 상담하기인스타그램개선 요청하기
  • 💬고객센터 안내
  • 🤔자주 묻는 질문
  • ✨이용 요금 안내
    • 상점 개설하기
  • 🌱쇼핑몰 가장 빠른 시작 가이드
  • 🏠홈페이지 1일 완성 가이드
  • ✅식스샵 배워보기
    • 식스샵 시작하기
      • 판매 준비하기
        • 사업자 등록하기
          • 사업자 변경하기
        • PG 연동하기
          • 토스페이먼츠
            • 토스페이먼츠 심사 미비 사항 보완하기
          • KG 이니시스
          • 간편결제 사용하기
            • 카카오페이
            • 네이버페이 주문형
            • 네이버페이 결제형
          • 기타 결제 설정하기
        • 통신판매업 신고하기
        • 상점 필수 정책 고지하기
        • 도메인 연결하기
        • 배송 설정하기
        • 알림 메시지 설정하기
      • 해외 전용 상점 개설
        • 해외 PG 연동하기
      • 식스샵으로 호스팅 이전하기
    • 상점 관리하기
      • 주문
        • 송장 엑셀 등록하기
        • 현금 영수증 발급하기
        • 부분 취소하기
      • 상품
        • 개인 결제창 생성하기
        • 조합형 옵션 만들기
        • 추가 상품 판매하기
      • 할인
        • 할인 적용 순서 살펴보기
        • 특정 상품만 할인 적용하기
      • 고객
      • 게시판
      • 후기와 질문
        • 상품 후기 연동하기
      • 블로그
      • 애드온
        • 할인 행사
        • 적립금
        • 쿠폰
        • 할인 코드
        • 셀러허브 이지셀
        • 네이버페이 주문형
        • 네이버페이 결제형
        • 무통장 입금 자동 확인
        • 송장 자동 등록 / 출력 (베타 서비스)
          • 송장 재출력하기
        • 소셜 로그인
          • 카카오 로그인 연동하기
            • 카카오 디벨로퍼스 앱 연동하기
            • 카카오톡 채널 만들기
          • 네이버 로그인 연동하기
          • 페이스북 로그인 연동하기
          • 구글 로그인 연동하기
        • 본인 인증
        • 재입고 알림
        • 카카오 알림톡/문자
          • 알림톡 템플릿 추가하기
          • 문자 템플릿 수정하기
        • 카카오 채팅
        • 채널톡
        • 네이버 톡톡
        • 네이버 쇼핑
        • 네이버 웹마스터 도구
        • 네이버 프리미엄 로그 분석
        • 지그재그 상품 연동
        • 페이스북 비즈니스 인증
        • 페이스북 마케팅(FBE)
        • 구글 서치 콘솔
        • 구글 애즈
        • 구글 태그 매니저
          • 구글 태그 매니저 구글 애널리틱스 연동하기 - GA4 버전
          • 구글 태그 매니저 구글 애널리틱스 연동하기 - UA 버전(중단 예정)
          • 구글 태그 매니저 구글 애즈 연동하기
          • 페이지별 변수 확인하기
        • 카카오 픽셀
        • 다음 쇼핑하우
        • 링크프라이스
          • 링크프라이스 할인 코드 추가하기
        • 스티비
        • 빅인
        • 팝업
        • 최상단 배너
        • 고정 버튼
        • SNS 공유
        • 코드 삽입
        • 구글 애널리틱스
          • 구글 애널리틱스 전자상거래
          • 구글 애널리틱스 캠페인 URL
          • 구글 URL Builder 활용하기
        • 네이버 애널리틱스
        • 스팸 콘텐츠 방지
      • 통계
      • 상점 설정
      • 계정 설정
      • 크롬 브라우저 설정
    • 상점 디자인하기
      • 기초부터 따라 하는 디자인 편집
        • 🧑‍🎨 디자인 에디터
        • 🚧 템플릿 변경
        • 📑 메뉴 편집
        • 🖼️ 메인 배너 섹션
        • 🛒 상품 목록 섹션
        • 📸 갤러리 섹션
        • 📢 게시판 섹션
      • 에디터 기본 정보
      • 페이지와 메뉴
        • 쇼핑몰 메뉴 구성 팁
      • 스타일 편집
      • 콘텐츠 구성 요소
        • 인스타그램 프로페셔널 계정 인증하기
      • 기본 제공 페이지
      • 모바일 화면 디자인
      • 디자인 활용하기
        • 이미지 설정 가이드
        • 상품 카테고리를 메뉴로 구성하기
        • 상점 제작 중 안내 페이지 만들기
        • 특정 등급만 구매 가능한 상품 판매하기
        • 원페이지 구성하기
        • 룩북 페이지 구성하기
        • 이미지 다운로드하기
        • 외부 설문 기능(구글 폼) 활용하기
        • 외부 팝업 기능(코드앤버터) 활용하기
    • 마케팅 스쿨
  • 💌식스샵 소식
    • 업데이트 뉴스
      • 2025년 5월 2일
      • 2025년 4월 18일
      • 2025년 3월 21일
      • 2025년 3월 7일
      • 2025년 2월 21일
      • 2024년 12월 27일
      • 2024년 9월 20일
      • 2024년 8월 21일
      • 2024년 6월 14일
      • 2024년 5월 3일
      • 2024년 4월 19일
      • 2024년 3월 8일
      • 2023년 12월 22일
      • 2023년 12월 1일
      • 2023년 11월 3일
      • 2023년 10월 13일
      • 2023년 8월 4일
      • 2023년 6월 30일
      • 2023년 5월 26일
      • 2023년 5월 19일
      • 2023년 5월 12일
      • 2023년 4월 28일
      • 2023년 4월 7일
      • 2023년 3월 17일
      • 2023년 3월 10일
      • 2023년 2월 10일
      • 2023년 2월 3일
      • 2022년
        • 2022년 12월 2일
        • 2022년 10월 7일
        • 2022년 9월 8일
        • 2022년 7월 1일
        • 2022년 6월 17일
        • 2022년 5월 27일
        • 2022년 4월 29일
        • 2022년 4월 22일
        • 2022년 4월 8일
        • 2022년 3월 18일
        • 2022년 3월 11일
        • 2022년 2월 25일
        • 2022년 2월 18일
        • 2022년 2월 11일
        • 2022년 1월 28일
        • 2022년 1월 14일
        • 2022년 1월 7일
      • 2021년
        • 2021년 12월 31일
        • 2021년 12월 24일
        • 2021년 12월 17일
        • 2021년 12월 10일
        • 2021년 12월 3일
        • 2021년 11월 26일
        • 2021년 11월 19일
        • 2021년 11월 12일
        • 2021년 11월 5일
        • 2021년 10월 29일
        • 2021년 10월 22일
        • 2021년 10월 15일
        • 2021년 10월 1일
        • 2021년 9월 24일
        • 2021년 9월 17일
        • 2021년 9월 10일
        • 2021년 8월 27일
        • 2021년 8월 20일
        • 2021년 8월 13일
        • 2021년 8월 6일
        • 2021년 7월 30일
        • 2021년 7월 2일
        • 2021년 6월 18일
        • 2021년 6월 17일
        • 2021년 6월 4일
        • 2021년 4월 30일
        • 2021년 4월 23일
        • 2021년 4월 15일
        • 2021년 4월 9일
        • 2021년 3월 26일
        • 2021년 3월 19일
        • 2021년 3월 5일
        • 2021년 2월 26일
        • 2021년 2월 19일
        • 2021년 2월 10일
        • 2021년 2월 5일
        • 2021년 1월 22일
        • 2021년 1월 15일
        • 2021년 3월 12일
      • 2020년
        • 2020년 12월 31일
        • 2020년 12월 18일
        • 2020년 12월 4일
        • 2020년 11월 20일
        • 2020년 11월 12일
        • 2020년 10월 30일
        • 2020년 10월 23일
        • 2020년 10월 8일
        • 2020년 9월 25일
        • 2020년 9월 18일
        • 2020년 9월 9일
        • 2020년 9월 4일
        • 2020년 8월 28일
        • 2020년 8월 14일
        • 2020년 8월 7일
        • 2020년 7월 24일
        • 2020년 7월 17일
        • 2020년 6월 17일
        • 2020년 6월 5일
        • 2020년 5월 13일
        • 2020년 4월 22일
        • 2020년 4월 8일
        • 2020년 3월 25일
        • 2020년 3월 11일
        • 2020년 2월 26일
        • 2020년 1월 15일
        • 2020년 1월 2일
      • 2019년
        • 2019년 12월 10일
        • 2019년 11월 26일
        • 2019년 11월 12일
        • 2019년 10월 15일
        • 2019년 10월 1일
        • 2019년 8월 6일
        • 2019년 7월 23일
        • 2019년 7월 2일
        • 2019년 6월 5일
        • 2019년 5월 21일
        • 2019년 4월 23일
        • 2019년 4월 2일
        • 2019년 3월 12일
        • 2019년 2월 13일
        • 2019년 1월 23일
      • 2018년
        • 2018년 12월 28일
        • 2018년 12월 5일
        • 2018년 11월 19일
        • 2018년 11월 7일
        • 2018년 10월 29일
        • 2018년 10월 15일
        • 2018년 9월 4일
        • 2018년 8월 8일
        • 2018년 7월 16일
        • 2018년 7월 2일
        • 2018년 6월 14일
        • 2018년 5월 23일
        • 2018년 5월 8일
        • 2018년 4월 23일
        • 2018년 3월 14일
        • 2018년 2월 2일
        • 2018년 1월 11일
      • 2017년
        • 2017년 11월 29일
        • 2017년 10월 19일
        • 2017년 9월 26일
        • 2017년 8월 25일
        • 2017년 7월 26일
        • 2017년 6월 30일
        • 2017년 6월 9일
        • 2017년 5월 19일
        • 2017년 4월 17일
        • 2017년 3월 7일
        • 2017년 2월 7일
        • 2017년 1월 13일
      • 2016년
        • 2016년 12월 22일
        • 2016년 12월 1일
        • 2016년 11월 10일
        • 2016년 10월 17일
        • 2016년 9월 29일
        • 2016년 8월 25일
        • 2016년 8월 9일
        • 2016년 7월 7일
        • 2016년 6월 14일
        • 2016년 5월 19일
        • 2016년 5월 6일
        • 2016년 4월 18일
        • 2016년 4월 11일
        • 2016년 3월 25일
    • 진행 중인 이벤트
    • 💜 식스샵 프로 살펴보기
  • .
    • 페이스북 로그인 연동하기
    • 토스페이먼츠 결제 위젯 설정
    • 구글 애널리틱스(구버전)
    • 구글 애널리틱스 전자상거래
    • 카카오 싱크
    • 공지사항
    • 상점 디자인 기타
      • 로딩 속도 개선하기
    • 스타일 편집 및 개별 편집 수정
    • 갤러리_슬라이드형 만들기
    • 갤러리_라이트박스 만들기
    • 갤러리_컬렉션 버튼 만들기
    • 종료된 이벤트
      • [종료] 페이스북/인스타그램 마케팅 대행 이벤트
      • [종료] 카카오모먼트 CBT 모집
      • [종료] 링크프라이스 제휴 마케팅 서비스
      • [종료] 이니시스 맞춤형 타겟 마케팅
    • 페이스북 카탈로그(해외 쇼핑몰 전용)
      • 페이스북 다이내믹 광고 등록하기
      • 인스타그램 제품 태그하기
    • 페이스북 픽셀(해외 쇼핑몰 전용)
      • 페이스북 픽셀 타겟 만들기
    • 🚀식스샵 퀵가이드
Powered by GitBook
On this page
  • 목차
  • 1. 스타일 편집이란?
  • 2. 스타일 편집
  • 2-1. 스타일 편집 열기
  • 2-2. 스타일 편집 메뉴 구성
  • 3. 페이지 스타일 설정
  • 3-1. 전체 > 공통
  • 4. 머리글 스타일 설정
  • 5. 섹션별 스타일 편집
  • 6. 사용자 편집 섹션
  • 6-1. 제목글
  • 6-2. 줄글
  • 6-3. 보조글
  • 6-4. 링크
  • 6-5. 선
  • 6-6. 버튼
  • 6-7. 아이콘
  • 6-8. 말풍선
  • 6-9. 쪽번호
  • 6-10. 맨 위로 버튼
  • 7. 바닥글 스타일 설정
  • 8. 기본 제공 페이지 스타일 설정
  • 8-1. 상품 상세
  • 8-2. 장바구니
  • 8-3. 로그인
  • 8-4. 회원가입
  • 9. 템플릿 변경하기
  • 10. 실험실

Was this helpful?

  1. 식스샵 배워보기
  2. 상점 디자인하기

스타일 편집

상점의 여러 페이지에 공통적으로 적용되는 스타일 편집 설정에 대해 알아보겠습니다.

Previous쇼핑몰 메뉴 구성 팁Next콘텐츠 구성 요소

Last updated 2 months ago

Was this helpful?

목차

1. 스타일 편집이란?

전체 상점 웹사이트에 공통적으로 적용되는 스타일 속성을 '스타일 편집'이라고 합니다. 스타일 편집은 고객에게 일관적인 브랜드 테마를 노출하기 위해 필요하며 템플릿 지정 시 템플릿 별 기본 설정값이 자동으로 적용됩니다. 이후 변경 사항은 페이지 내 모든 섹션과 요소에 일괄 적용됩니다.

각 섹션과 요소의 일부 속성은 개별 편집을 통해 상황에 맞게 스타일 등을 변경할 수 있습니다.

2. 스타일 편집

2-1. 스타일 편집 열기

Step 1. 화면 좌측 하단에 위치한 페이지 관리 메뉴(≡) 버튼을 누르면 아래와 같은 화면을 볼 수 있습니다.

Step 2. 아래 이미지를 참고하여 [스타일 편집] 버튼을 눌러주세요.

2-2. 스타일 편집 메뉴 구성

번

설정 항목

1

스타일 편집 항목

2

템플릿 변경하기 버튼

3. 페이지 스타일 설정

3-1. 전체 > 공통

설정 항목

너비

상점 웹사이트 메뉴 영역(머리글, 바닥글)의 기본 너비를 지정할 수 있습니다.

  • 보통 메뉴 영역의 최대 너비를 1240px로 지정합니다.

  • 넓은

    메뉴 영역의 최대 너비를 기본 1800px로 지정하며 하단에 위치한 '수정하기' 체크 박스를 선택하여 최대 너비를 변경할 수 있습니다. 이후 모든 섹션의 너비 값을 '넓은' 으로 바꿀 때 이곳에 지정한 너비가 자동 적용됩니다.

배경

상점 웹사이트 내 모든 페이지의 배경 색상을 지정할 수 있습니다.

사용자 편집 섹션을 제외한 모든 섹션은 이곳에 지정한 배경이 자동 적용됩니다.

테두리

상점 웹사이트 내 모든 페이지를 감싸는 테두리를 지정할 수 있습니다.

  • 색상 테두리의 색상을 지정할 수 있습니다.

  • 두께

    테두리의 두께를 지정할 수 있습니다.

기본값으로 돌리기

템플릿 기본 설정으로 초기화 합니다.

4. 머리글 스타일 설정

5. 섹션별 스타일 편집

6. 사용자 편집 섹션

사용자 편집 섹션은 사용자가 직접 각종 요소를 추가하여 만들 수 있는 사용자 정의 콘텐츠를 위한 섹션입니다. 아래 내용을 참조하여 사용자 편집 섹션의 공통 스타일을 설정하세요.

설정 항목

너비 사용자 편집 섹션의 제목 출력 방식을 지정할 수 있습니다.

  • 좁은 너비가 960px 로 화면에 보여집니다.

  • 보통 너비가 1200px 로 화면에 보여집니다.

간격 사용자 편집 섹션의 단을 나눈 경우 단 사이의 간격을 지정할 수 있습니다.

6-1. 제목글

[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 제목글]에서 제목글의 스타일 편집이 가능합니다.

설정 항목

색상 사용자 편집 섹션에 추가되는 제목글의 글자 색상을 지정할 수 있습니다.

글자

  • 글꼴 서체를 지정할 수 있습니다.

  • 굵기 글자 굵기를 지정할 수 있습니다.

  • 크기 글자 크기를 지정할 수 있습니다.

  • 자간 글자의 자간을 지정할 수 있습니다.

  • 줄간격

    줄 사이의 간격을 조정할 수 있습니다.

6-2. 줄글

[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 줄글]에서 줄글의 스타일 편집이 가능합니다.

설정 항목

색상 사용자 편집 섹션에 추가되는 줄글의 글자 색상을 지정할 수 있습니다.

글자

  • 글꼴 서체를 지정할 수 있습니다.

  • 굵기 글자 굵기를 지정할 수 있습니다.

  • 크기 글자 크기를 지정할 수 있습니다.

  • 자간 글자의 자간을 지정할 수 있습니다.

  • 줄간격

    줄 사이의 간격을 조정할 수 있습니다.

6-3. 보조글

[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 보조글]에서 보조글의 스타일 편집이 가능합니다.

설정 항목

색상 사용자 편집 섹션에 추가되는 보조글의 글자 색상을 지정할 수 있습니다.

6-4. 링크

[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 링크]에서 링크의 스타일 편집이 가능합니다.

설정 항목

색상 사용자 편집 섹션에서 링크가 적용된 글자의 색상을 지정할 수 있습니다.

6-5. 선

[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 선]에서 선의 스타일 편집이 가능합니다.

설정 항목

선 사용자 편집 섹션에서 들어가는 선 요소의 색상을 지정할 수 있습니다.

6-6. 버튼

[디자인 편집 > 좌측 하단 메뉴(≡) > 스타일 편집 > 버튼]에서 버튼 스타일 편집이 가능합니다.

설정 항목

종류 버튼 스타일을 설정할 수 있습니다.

  • 일반 안이 색으로 꽉찬 버튼으로 노출됩니다.

  • 테두리

    안이 투명하며 테두리만 둘러진 버튼으로 노출됩니다.

모양 버튼 모양을 설정할 수 있습니다.

  • 사각형 사각형 박스 형태로 보여집니다.

  • 둥근 사각형 둥근 사각형 박스 형태로 보여집니다.

  • 알약

    좌우가 완전히 둥근 박스 형태로 보여집니다.

색상 버튼의 색상을 설정할 수 있습니다.

크기

버튼의 크기를 작게 / 보통 / 크게 중에서 설정할 수 있습니다.

테두리 버튼의 종류가 '테두리' 일 때 테두리의 두께를 설정할 수 있습니다.

글자

  • 글꼴 버튼의 글자 글꼴을 설정할 수 있습니다.

  • 굵기 버튼의 글자 굵기를 설정할 수 있습니다.

  • 크기 버튼의 글자 크기를 설정할 수 있습니다.

  • 자간 버튼 글자 사이의 간격을 설정할 수 있습니다.

6-7. 아이콘

[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 아이콘]에서 아이콘의 스타일 편집이 가능합니다.

설정 항목

종류

  • 일반 아이콘 모양대로 화면에 보여집니다.

  • 원 원형 박스 안에 아이콘이 들어간 형태로 보여집니다.

  • 사각형 사각형 박스 안에 아이콘이 들어간 형태로 보여집니다.

  • 둥근 사각형 둥근 사각형 박스 안에 아이콘이 들어간 형태로 보여집니다.

색상

  • 기본 항시 노출되는 소셜 링크 아이콘의 색상을 지정할 수 있습니다.

  • 마우스 오버 소셜 링크 아이콘에 마우스를 올렸을 때 기본 색상에서 바뀔 색상을 지정할 수 있습니다.

  • 대표 색상 넣기 사용 [✔︎] 설정 시 각 소셜 미디어의 오리지널 색상을 자동 적용합니다.

크기

소셜 링크 아이콘의 크기를 지정할 수 있습니다.

6-8. 말풍선

말풍선 메시지를 사용하려면 디자인 편집 페이지에서 머리글 영역을 더블 클릭하고 ’말풍선 넣기’를 [✔︎] 체크해 주시면 됩니다.

[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 말풍선]에서 말풍선의 스타일 편집이 가능합니다.

설정 항목

말풍선

말풍선의 스타일을 설정할 수 있습니다.

  • 글꼴

    말풍선 메시지의 서체를 지정할 수 있습니다.

  • 글자 굵기

    말풍선 메시지의 글자 굵기를 지정할 수 있습니다.

  • 글자 크기

    말풍선 메시지의 글자 크기를 지정할 수 있습니다.

  • 글자 색상

    말풍선 메시지의 글자 색상을 지정할 수 있습니다.

  • 배경 색상

    말풍선의 배경 색상을 지정할 수 있습니다.

  • 둥근 모서리

    말풍선 모서리의 둥근 정도를 설정할 수 있습니다.

6-9. 쪽번호

[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 쪽번호]에서 쪽번호의 스타일 편집이 가능합니다.

설정 항목

색상

  • 기본 현재 보는 페이지를 제외한 모든 페이지의 쪽번호 숫자에 적용될 색상을 지정할 수 있습니다.

  • 선택 현재 보는 페이지의 쪽번호 숫자에 적용될 색상을 지정할 수 있습니다.

간격

쪽 번호 사이 간격을 지정할 수 있습니다.

글자

  • 글꼴 서체를 지정할 수 있습니다.

  • 굵기 글자 굵기를 지정할 수 있습니다.

  • 크기 글자 크기를 지정할 수 있습니다.

6-10. 맨 위로 버튼

[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 맨 위로 버튼]에서 맨 위로 버튼의 스타일 편집이 가능합니다.

설정 항목

스크롤할 때 맨 위로 버튼 보이기 사용 [✔︎] 을 선택하면 화면을 스크롤할 때 맨 위로 버튼 화면 우측 하단에 노출됩니다.

종류

맨 위로 버튼의 버튼 유형을 지정할 수 있습니다.

  • 한글

    '맨위로' 라는 문구가 출력됩니다.

  • 영어

    'TOP' 이란 문구가 출력됩니다.

  • 아이콘 - 화살표1 / 화살표2 / 화살표3 세가지 유형의 화살표 아이콘을 선택하여 사용할 수 있습니다.

  • 아이콘 + 영어

    화살표 아이콘과 'TOP'이란 문구가 함께 출력됩니다.

색상 맨 위로 버튼의 색상을 지정할 수 있습니다.

  • 배경 버튼의 배경색을 지정할 수 있습니다.

  • 글자 버튼의 글자색을 지정할 수 있습니다.

  • 불투명도 버튼의 투명함을 정할 수 있습니다. 0%는 완전 투명 100%는 완전 불투명한 상태입니다.

  • 경계선 넣기 사용 [✔︎] 을 선택하면 버튼에 테두리가 자동 적용됩니다.

여백

버튼의 위치를 지정할 수 있습니다.

  • 오른쪽

    화면 오른쪽 간격 설정할 수 있습니다.

  • 아래쪽

    화면 아래쪽 간격을 설정할 수 있습니다.

굵기

맨위로 버튼과 글자의 두께를 얇은, 보통, 두꺼운 중 하나로 선택하여 지정할 수 있습니다.

7. 바닥글 스타일 설정

8. 기본 제공 페이지 스타일 설정

8-1. 상품 상세

설정 항목

공통

  • 너비

    • 좁은 화면의 너비는 960px 로 고정됩니다.

    • 보통 화면의 너비는 1200px 로 고정됩니다.

  • 정렬 상품 이름, 가격 등의 정보를 왼쪽 / 가운데 / 오른쪽 중에서 설정할 수 있습니다.

  • 여백 상품 정보의 상단 여백을 설정할 수 있습니다.

  • 간격 상품 대표 이미지와 상품 정보의 간격을 설정할 수 있습니다.

  • 상세 정보 간격

    상품 정보 내 각 정보의 간격을 설정할 수 있습니다.

대표 이미지 상품 상세 페이지 상단에 노출되는 상품 대표 이미지의 속성을 설정할 수 있습니다.

  • 위치 상품 대표 이미지의 노출 위치를 왼쪽 / 오른쪽 중에서 설정할 수 있습니다.

  • 종류

    상품 대표 이미지를 노출하는 방식을 설정할 수 있습니다.

    • 나열 상품 대표 이미지가 위에서부터 아래로 순차적으로 나열됩니다.

      • 너비 나열된 대표 이미지의 너비 비율을 설정할 수 있습니다.

      • 간격 나열된 대표 이미지의 간격을 설정할 수 있습니다.

    • 썸네일 첫 번째 대표 이미지만 상단에 크게 노출되고, 다른 대표 이미지는 하단에 작은 썸네일 형식으로 노출됩니다.

      • 너비 썸네일 형식으로 노출된 대표 이미지의 너비 비율을 설정할 수 있습니다.

      • 비율 썸네일 형식으로 노출된 대표 이미지의 출력 비율을 설정할 수 있습니다.

        • 원본 원본 이미지 비율로 노출됩니다.

        • 2:3 / 3:4 / 1:1 / 4:3 / 3:2 / 16:9 / 7:3 / 3:1

      • 썸네일 정렬 하단 썸네일 이미지의 정렬 방식을 왼쪽 / 가운데 / 오른쪽 중에서 설정할 수 있습니다.

      • 썸네일 너비

        하단 썸네일 이미지의 너비를 설정할 수 있습니다.

      • 썸네일 간격

        하단 썸네일 이미지의 간격을 설정할 수 있습니다.

    • 슬라이드 상품 대표 이미지 위의 화살표를 클릭하면 좌우 슬라이드 형식으로 대표 이미지가 노출됩니다.

      • 너비 슬라이드 형식으로 노출된 대표 이미지의 너비 비율을 설정할 수 있습니다.

      • 비율 슬라이드 형식으로 노출된 대표 이미지의 출력 비율을 설정할 수 있습니다.

        • 원본 원본 이미지 비율로 노출됩니다.

        • 2:3 / 3:4 / 1:1 / 4:3 / 3:2 / 16:9 / 7:3 / 3:1

      • 전환 효과 대표 이미지의 화살표를 클릭했을 때 보이는 이전 / 다음 이미지의 전환 효과를 설정할 수 있습니다.

        • 밀어내기 대표 이미지 화살표 클릭 시 이미지를 밀어내는 형식으로 보입니다.

        • 밝기변화 대표 이미지 화살표 클릭 시 부드럽게 사라지고 부드럽게 나타나는 형식으로 보입니다.

  • 마우스 올릴 때 확대하기 사용 [✔]을 체크하면 상품 대표 이미지 위에 마우스를 올렸을 때 이미지를 확대해서 보여줍니다.

  • 클릭할 때 팝업창으로 확대하기 사용 [✔]을 체크하면 상품 대표 이미지를 클릭했을 때 팝업창으로 확대해서 보여줍니다.

상품 이름

상품 상세 페이지의 상품 이름의 글자 크기를 설정할 수 있습니다.

후기 평점 보이기

사용 [✔]을 체크하면 상품 이름 하단에 후기 평점이 노출됩니다.

가격

상품 상세 페이지의 상품 가격 크기를 설정할 수 있습니다.

옵션

상품 옵션 선택 박스의 배치 방식을 아래로 / 옆으로 중에서 설정할 수 있습니다.

요약 설명 상품 요약 설명의 노출 방식을 설정할 수 있습니다.

  • 위치

    • 가격 위

    • 가격 아래

    • 구매 버튼 아래

  • 크기 요약 설명의 글자 크기를 설정할 수 있습니다.

상세 설명

상품 상세 설명의 노출 방식을 설정할 수 있습니다.

  • 최대 너비

    상세 설명이 출력되는 영역의 너비를 설정할 수 있습니다.

  • 여백

    상세 설명의 상하 여백을 설정할 수 있습니다.

네비게이션 사용 [✔]을 체크하면 상품 공통 정보, 상품 상세 설명, 관련 상품, 후기, 질문 등 상품 상세 페이지를 구성하는 각 영역으로 바로 이동할 수 있도록 설정할 수 있습니다.

  • 글자 최대 너비 네비게이션 메뉴 사이의 최대 비를 설정할 수 있습니다.

  • 기본 글자 색상 네비게이션 메뉴의 글자 색상을 설정할 수 있습니다.

  • 선택 글자 색상 현재 선택되어 있는 네게이션 메뉴 글자 색상을 설정할 수 있습니다.

  • 경계선 색상 네비게이션 하단 경계선의 색상을 설정할 수 있습니다.

  • 글자 크기 네비게이션 메뉴의 글자 크기를 설정할 수 있습니다.

  • 상세 설명 머리글 글자 공통 정보를 활용해 등록한 상세 설명 머리글 바로가기의 메뉴 글자를 변경할 수 있습니다.

  • 상세 설명 글자 상세 설명 본문 바로가기의 메뉴 글자를 변경할 수 있습니다.

  • 상세 설명 바닥글 글자 공통 정보를 활용해 등록한 상세 설명 바닥글 바로가기의 메뉴 글자를 변경 수 있습니다.

  • 후기 글자 상품 후기 바로가기의 메뉴 글자를 변경할 수 있습니다.

  • 질문 글자 상품 문의 바로가기의 메뉴 글자를 변경할 수 있습니다.

  • 관련 상품 글자 관련 상품 바로가의 메뉴 글자를 변경할 수 있습니다.

  • 후기 개수 보이기 사용 [✔]을 체크하면 상품 후기 바로가기의 메뉴 글자 옆에 후기 개수가 숫자로 노출됩니다.

  • 질문 개수 보이기

    사용 [✔]을 체크하면 상품 문의 바로가기의 메뉴 글자 옆에 문의 개수가 숫자로 노출됩니다.

후기와 질문 / 관련 상품

상품 상세 페이지에 노출되는 상세 설명 이외 섹션의 제목 스타일 속성을 설정할 수 있습니다.

  • 제목 정렬

    왼쪽 / 가운데 / 오른쪽 중에서 설정할 수 있습니다.

  • 제목 크기

    제목의 크기를 설정할 수 있습니다.

후기와 질문

상품 상세 페이지에 노출되는 후기와 질문의 스타일 속성을 설정할 수 있습니다.

  • 너비

    • 상세 설명 너비에 맞추기 사용자가 설정한 상세 설명 너비와 동일하게 화면에 출력됩니다.

    • 공통 너비에 맞추기

      페이지 너비와 동일하게 화면에 출력됩니다.

  • 후기 제목 글자

    상품 후기 제목의 글자를 변경할 수 있습니다.

  • 질문 제목 글자

    상품 질문 제목의 글자를 변경할 수 있습니다.

  • 후기 작성 안내 배경색 후기 작성 안내 배경색을 설정할 수 있습니다.

  • 후기 작성 안내 글자 크기

    후기 작성 안내 문구의 글자 크기를 설정할 수 있습니다.

  • 후기 작성 안내 정렬 후기 작성 안내 문구 정렬을 왼쪽 / 가운데 / 오른쪽 중에서 설정할 수 있습니다.

  • 베스트 후기 제목 글자 베스트 후기 배지에 노출되는 글자를 변경할 수 있습니다.

  • 베스트 후기 배지 배경색

    베스트 후기 배지의 배경색을 설정할 수 있습니다. 베스트 후기 배지의 글자 색상은 배경색 여부에 따라 흰색 또는 검은색으로 자동 설정됩니다.

  • 후기 등록일 보이기 사용 [✔]을 체크하면 상품 후기에 등록일이 노출됩니다.

  • 질문 등록일 보이기

    사용 [✔]을 체크하면 상품 질문에 등록일이 노출됩니다.

  • 후기 위치 최상단으로 이동하기

    사용 [✔]을 체크하면 후기가 상품 설명 최상단으로 이동합니다.

관련 상품

[상품 > 상품 고급 설정 > 관련 상품]에서 설정한 관련 상품의 스타일 속성을 설정할 수 있습니다.

  • 위치

    관련 상품의 노출 위치를 설정할 수 있습니다.

    • 상세 설명 위

    • 상세 설명 머리글 아래

    • 상세 설명 바닥글 위

    • 상세 설명 아래

    • 질문 아래

  • 종류 관련 상품의 노출 방식을 설정할 수 있습니다.

    • 상품 목록 설정한 열 수에 상품이 아래로 나열됩니다.

    • 상품 슬라이드 설정한 열에 맞춰 상품을 좌우로 이동하며 확인할 수 있습니다.

  • 너비

    • 상세 설명 너비에 맞추기 사용자 설정한 상세 설명 너비와 동일하게 화면에 출력됩니다.

    • 공통 너비에 맞추기

      페이지 너비와 동일하게 화면에 출력됩니다.

  • 제목 글자 관련 상품의 제목 글자를 변경할 수 있습니다.

  • 정렬 상품이 수가 열 보다 적은 경우 정렬 방식을 왼쪽 / 가운데 / 오른쪽 중에서 설정할 수 있습니다.

  • 열 한 줄에 몇 개의 상품을 보여줄지 설정할 수 있습니다.

  • 가로 간격 상품의 좌우 간격을 설정할 수 있습니다.

  • 세로 간격 상품의 위아래 줄 간격을 설정할 수 있습니다.

  • 상품 이름 크기 상품 이름의 크기를 설정할 수 있습니다.

  • 가격 크기 상품 가격의 크기를 설정할 수 있습니다.

  • 배지 너비 배지의 너비를 설정할 수 있습니다.

  • 배지 좌우 여백 배지의 좌우 여백을 설정할 수 있습니다.

  • 배지 상하 여백 배지의 상하 여백을 설정할 수 있습니다.

  • 배지 글자 크기

    배지의 글자 크기를 설정할 수 있습니다.

  • 전환할 때 넘어가는 상품 개수 (종류: 상품 슬라이드 선택 시)

    관련 상품의 슬라이드를 좌우로 이동 시 썸네일을 몇 개씩 넘겨줄지 설정할 수 있습니다.

  • 자동 재생하기 (종류: 상품 슬라이드 선택 시)

    사용 [✔]을 체크하면 지정한 재생 간격(초) 마다 관련 상품의 슬라이드가 자동으로 재생됩니다.

  • 이전 / 다음 화살표 보이기 (종류: 상품 슬라이드 선택 시)

    사용 [✔]을 체크하면 관련 상품의 슬라이드 화면에 이전 / 다음 화살표 버튼이 노출됩니다.

    • 기본 색상

      화살표의 기본 색상을 설정할 수 있습니다.

    • 마우스 오버 색상

      화살표에 마우스를 올렸을 때 변경될 색상을 설정할 수 있습니다.

구매하기 버튼 구매하기 버튼의 글자를 변경할 수 있습니다.

장바구니 버튼 장바구니 버튼의 글자를 변경할 수 있습니다.

8-2. 장바구니

설정 항목

장바구니 이름

  • 글자 장바구니 이름의 글자를 변경할 수 있습니다.

  • 크기 장바구니 이름의 글자 크기를 설정할 수 있습니다.

장바구니 설명

  • 상품 정보 글자 장바구니 이름의 글자를 변경할 수 있습니다.

  • 수량 글자 장바구니 이름의 글자 크기를 설정할 수 있습니다.

  • 가격 글자 가격의 글자를 변경할 수 있습니다.

  • 배송비 글자 배송비의 글자를 변경할 수 있습니다.

삭제하기 버튼

  • 위치 상품 이름 아래와 상품 가격 오른쪽 중에서 설정할 수 있습니다.

  • 종류 글자와 아이콘 중에서 설정할 수 있습니다.

구매하기 버튼

  • 버튼 글자 구매하기 버튼의 글자를 변경할 수 있습니다.

  • 크기 구매하기 버튼의 글자 크기를 설정할 수 있습니다.

8-3. 로그인

설정 항목

로그인 이름

  • 글자 로그인 이름의 글자를 25자 이내로 변경할 수 있습니다.

  • 정렬 로그인 이름의 정렬 방식을 왼쪽 / 가운데 / 오른쪽 중에서 설정할 수 있습니다.

  • 크기 로그인 이름의 글자 크기를 128px 이내로 설정할 수 있습니다.

로그인 버튼

  • 글자 로그인 버튼의 글자를 14자 이내로 변경할 수 있습니다.

회원 가입 버튼

  • 글자 회원 가입 버튼의 글자를 14자 이내로 변경할 수 있습니다.

상단 이미지

  • 이미지 로그인 화면 상단에 노출될 5MB 이하의 jpg, jpeg, png, gif 이미지를 업로드할 수 있습니다.

하단 이미지

  • 이미지 로그인 화면 하단에 노출될 5MB 이하의 jpg, jpeg, png, gif 이미지를 업로드할 수 있습니다.

8-4. 회원가입

설정 항목

회원 가입 이름

  • 글자 회원 가입 이름의 글자를 25자 이내로 변경할 수 있습니다.

  • 크기 회원 가입 이름의 글자 크기를 128px 이내로 설정할 수 있습니다.

  • 정렬 회원 가입 이름의 정렬 방식을 왼쪽 / 가운데 / 오른쪽 중에서 설정할 수 있습니다.

가입하기 버튼

  • 글자 가입하기 버튼의 글자를 14자 이내로 변경할 수 있습니다.

추천인

9. 템플릿 변경하기

필요에 따라 현재 사용 중인 템플릿을 다른 템플릿으로 변경하고 싶을 경우가 있습니다. 이때 아래의 안내를 참조하여 진행해주세요.

템플릿 변경 후에는 이전 디자인으로 되돌릴 수 없는 점을 유의하여 진행해 주세요.

Step 1. 좌측 하단의 페이지 관리 메뉴 버튼을 눌러주세요 단축키: Tab

Step 2. 그 다음 스타일 편집 버튼을 눌러주세요.

Step 3. 스타일 편집 패널의 템플릿 변경하기 버튼을 눌러주세요.

Step 4. 변경할 템플릿을 선택합니다.

Step 5. 선택한 템플릿으로 변경하기 버튼을 클릭합니다.

Step 6. 기존 입력한 콘텐츠의 초기화 여부를 선택하세요.

  • 초기화하기: 모든 작업 내역이 삭제되고 템플릿이 변경됩니다.

  • 초기화 없이 변경하기: 작업 내용은 모두 유지하고 선택한 템플릿의 스타일 편집 설정 값으로 변경합니다.

Step 7. 이제 변경된 템플릿을 사용하실 수 있습니다.

10. 실험실

사용자 편의성을 위한 신규 기능을 실험실로 제공합니다.

실험실에서 제공하는 기능은 사전 안내 없이 사라질 수 있습니다.

설정 항목

저장 방지

  • 우클릭 방지 마우스 우클릭 시 이미지 저장을 방지합니다. 이미지를 눌렀을 때 뜨는 팝업 창에서 이미지 저장을 방지합니다.

  • 드래그 방지 마우스로 드래그하여 이미지 저장 및 텍스트 복사를 방지합니다. 모바일에서는 텍스트를 눌렀을 때 드래그를 방지합니다.

※ 접속 환경에 따라 기능이 동작하지 않을 수 있습니다.

주문

  • 배송 준비 상태일 때 취소 요청 버튼 숨기기 배송 준비 상태의 주문 상세 페이지에서 취소 요청 버튼을 숨길 수 있습니다.

※ 고객이 열어 둔 주문 상세 페이지의 주문 상태가 [배송 준비]일 때만 적용됩니다. 만약 주문 처리가 빠르게 진행되어 [결제 완료] 상태로 창을 새로 고침 하지 않았다면, 취소 요청이 인입될 수 있는 점 유의해 주세요.

회원

  • 등급 안내 페이지 문구 사용하기 마이페이지에 등급 안내 페이지로 이동하는 링크를 제공하여 고객이 빠르게 등급 제도를 살펴보도록 할 수 있습니다.

    • 기능 체크 후, 상점에서 제공 중인 등급 안내 페이지의 주소를 '링크 주소' 항목에 입력합니다. 임시 도메인(sixshop.com/관리자ID) 형식이 아닌 대표 도메인 기반의 주소로 입력해 주시길 바랍니다.

※ 자동 등급 조정 조건 보여주기 기능을 사용 중이어야 링크가 노출됩니다. [식스샵 > 고객 > 등급 관리]에서 [자동 등급 조정 정책 보기] 버튼 클릭 후, '자동 등급 조정 조건 보여주기' 사용 여부를 점검해 주세요.

결제 페이지 로고 이미지

  • 이미지 너비(데스크탑) 기본 값은 150px로 데스크탑 결제 페이지 로고 이미지의 너비를 조정할 수 있습니다.

  • 이미지 너비(모바일) 기본 값은 80px로 모바일 결제 페이지 로고 이미지의 너비를 조정할 수 있습니다.

※ 이미지 너비는 데스크탑에서는 최대 1,000px, 모바일에서는 최대 300px로 설정하는 것을 권장합니다.

모바일 디자인

  • 상품 목록 섹션 - 좌우 여백 제거

    상품 목록 섹션의 좌우 여백을 제거하여 이미지 너비를 화면 가득 채울 수 있습니다.

  • 상품 상세 페이지 - 좌우 여백 제거

    상품 상세 페이지의 상품 대표 이미지 및 상세 설명에 포함된 이미지의 좌우 여백을 제거하여 이미지 너비를 화면 가득 채울 수 있습니다.

애니메이션 효과

  • 머리글 ≡ 메뉴 페이드-인

    • 데스크톱에서의 ≡ 메뉴와 모바일 메뉴가 펼쳐질 때 자연스럽게 나타나는 애니메이션 효과를 적용할 수 있습니다.

※ [데스크톱 > 머리글 - 공통 > 종류]가 '데스크톱에서 ≡ 메뉴 사용하기'가 아닌 '메뉴 나열하기'라면 데스크톱 메뉴에는 적용되지 않습니다.

안내서를 참고하세요.

안내서를 참고하세요.

넓은 설정의 최대 너비(기본 1800px) 로 화면에 보여집니다.

안내서를 참고하세요.

넓은 화면의 너비는 설정의 최대 너비(기본 1800px)로 고정됩니다.

안내 글자 추천인 항목의 안내 글자를 25자 이내로 변경할 수 있습니다. [식스샵 > 고객 > ]에서 추천인 항목을 사용 중일 때만 반영됩니다.

✅
스타일 편집이란?
스타일 편집
스타일 편집 열기
스타일 편집 메뉴 구성
페이지 스타일 설정
전체 > 공통
머리글 스타일 설정
섹션별 스타일 편집
사용자 편집 섹션
제목글
줄글
보조글
링크
선
버튼
아이콘
말풍선
쪽번호
맨 위로 버튼
바닥글 스타일 설정
기본 제공 페이지 스타일 설정
상품 상세
장바구니
로그인
회원가입
템플릿 변경하기
실험실
전체 > 공통
가입 관리
전체 > 공통
콘텐츠 구성 요소 > 섹션
페이지와 메뉴 > 머리글과 바닥글 > 머리글 설정하기
페이지와 메뉴 > 머리글과 바닥글 > 바닥글 설정하기