스타일 편집

번

설정 항목

1

스타일 편집 항목

2

템플릿 변경하기 버튼

설정 항목

너비

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

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

• 넓은

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

배경

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

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

테두리

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

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

• 두께

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

기본값으로 돌리기

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

설정 항목

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

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

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

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

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

설정 항목

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

글자

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

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

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

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

• 줄간격

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

설정 항목

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

글자

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

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

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

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

• 줄간격

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

설정 항목

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

설정 항목

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

설정 항목

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

설정 항목

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

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

• 테두리

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

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

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

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

• 알약

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

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

크기

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

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

글자

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

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

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

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

설정 항목

종류

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

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

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

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

색상

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

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

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

크기

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

말풍선

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

• 글꼴

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

• 글자 굵기

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

• 글자 크기

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

• 글자 색상

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

• 배경 색상

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

• 둥근 모서리

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

설정 항목

색상

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

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

간격

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

글자

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

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

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

설정 항목

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

종류

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

• 한글

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

• 영어

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

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

• 아이콘 + 영어

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

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

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

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

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

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

여백

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

• 오른쪽

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

• 아래쪽

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

굵기

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

설정 항목

공통

• 너비

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

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

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

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

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

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

• 상세 정보 간격

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

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

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

• 종류

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

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

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

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

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

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

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

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

      • 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

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

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

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

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

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

상품 이름

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

후기 평점 보이기

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

가격

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

옵션

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

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

• 위치

  • 가격 위

  • 가격 아래

  • 구매 버튼 아래

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

상세 설명

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

• 최대 너비

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

• 여백

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 질문 개수 보이기

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

후기와 질문 / 관련 상품

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

• 제목 정렬

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

• 제목 크기

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

후기와 질문

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

• 너비

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

  • 공통 너비에 맞추기

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

• 후기 제목 글자

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

• 질문 제목 글자

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

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

• 후기 작성 안내 글자 크기

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

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

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

• 베스트 후기 배지 배경색

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

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

• 질문 등록일 보이기

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

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

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

관련 상품

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

• 위치

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

  • 상세 설명 위

  • 상세 설명 머리글 아래

  • 상세 설명 바닥글 위

  • 상세 설명 아래

  • 질문 아래

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

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

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

• 너비

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

  • 공통 너비에 맞추기

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

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

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

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

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

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

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

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

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

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

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

• 배지 글자 크기

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

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

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

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

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

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

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

  • 기본 색상

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

  • 마우스 오버 색상

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

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

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

설정 항목

장바구니 이름

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

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

장바구니 설명

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

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

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

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

삭제하기 버튼

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

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

구매하기 버튼

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

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

설정 항목

로그인 이름

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

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

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

로그인 버튼

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

회원 가입 버튼

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

상단 이미지

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

하단 이미지

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

설정 항목

회원 가입 이름

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

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

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

가입하기 버튼

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

추천인

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

설정 항목

저장 방지

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

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

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

주문

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

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

회원

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

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

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

결제 페이지 로고 이미지

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

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

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

모바일 디자인

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

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

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

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

애니메이션 효과

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

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

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