상점 공통 스타일

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

목차

1. 공통 스타일이란?

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

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

2. 공통 스타일 설정

2-1. 공통 스타일 설정 열기

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

Step 2. 아래 이미지를 참고하여 공통 스타일 설정 버튼을 눌러주세요.

2-2. 공통 스타일 설정 메뉴 구성

설정 항목

1

공통 스타일 설정 항목

2

템플릿 변경하기 버튼

3. 페이지 스타일 설정

3-1. 전체 > 공통

설정 항목

너비

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

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

  • 넓은

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

배경

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

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

테두리

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

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

  • 두께

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

기본값으로 돌리기

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

4. 머리글 스타일 설정

페이지와 메뉴 > 머리글과 바닥글 > 머리글 설정하기 안내서를 참고하세요.

5. 섹션 공통 스타일 설정

콘텐츠 구성 요소 > 섹션 안내서를 참고하세요.

6. 사용자 편집 섹션

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

설정 항목

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

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

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

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

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

6-1. 제목글

설정 항목

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

글자

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

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

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

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

  • 줄간격

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

6-2. 줄글

설정 항목

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

글자

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

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

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

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

  • 줄간격

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

6-3. 보조글

설정 항목

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

6-4. 링크

설정 항목

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

6-5. 선

설정 항목

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

6-6. 버튼

설정 항목

종류 버튼의 유형을 지정할 수 있습니다.

  • 일반 안이 색으로 꽉찬 버튼이 보여집니다.

  • 테두리

    안이 투명한 테투리로 그려진 버튼이 보여집니다.

모양

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

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

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

  • 알약

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

글자 버튼에 보여질 글자의 스타일 속성을 지정할 수 있습니다.

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

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

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

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

6-7. 아이콘

설정 항목

종류

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

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

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

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

색상

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

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

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

크기

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

6-8. 쪽번호

설정 항목

색상

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

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

간격

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

글자

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

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

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

6-9. 맨 위로 버튼

설정 항목

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

종류

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

  • 한글

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

  • 영어

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

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

  • 아이콘 + 영어

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

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

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

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

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

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

여백

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

  • 오른쪽

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

  • 아래쪽

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

굵기

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

7. 바닥글 스타일 설정

페이지와 메뉴 > 머리글과 바닥글 > 바닥글 설정하기 안내서를 참고하세요.

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

8-1. 상품 상세

설정 항목

공통

  • 너비

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

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

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

  • 정렬 상품 이름, 가격 등의 정보를 왼쪽 / 가운데 / 오른쪽 중 선택한 방식으로 정렬할 수 있습니다.

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

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

  • 상세 정보 간격

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

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

  • 위치 상품 대표 이미지가 보여질 위치를 왼쪽 / 오른쪽 중 하나로 지정할 수 있습니다.

  • 종류

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

    • 썸네일 하단에 위치한 작은 썸네일을 누르면 상단에 큰 사이즈로 보여집니다.

    • 나열 위에서부터 아래로 상품 사진이 순차적으로 나열되어 보여집니다.

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

  • 비율 이미지의 출력 비율을 지정할 수 있습니다.

    • 원본 원본 비율대로 썸네일의 사이즈를 보여줍니다.

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

  • 썸네일 정렬 (종류: 썸네일만)

    하단 썸네일의 정렬 방식을 왼쪽 / 가운데 / 오른쪽 중 하나로 선택하여 지정할 수 있습니다.

  • 썸네일 너비 (종류: 썸네일만)

    하단 썸네일을 너비를 지정할 수 있습니다.

  • 썸네일 간격 (종류: 썸네일만)

    썸네일 사이의 간격을 지정할 수 있습니다.

  • 마우스 올릴 때 확대하기 상품 이미지에 마우스를 올리면 이미지를 확대하여 볼 수 있습니다.

  • 클릭할 때 팝업창으로 확대하기 상품 이미지를 마우스로 클릭하면 전체 팝업창으로 확대하여 볼 수 있습니다.

상품 이름

상품 정보 중 상품 이름의 크기를 지정할 수 있습니다.

가격

상품 정보 중 상품 가격의 크기를 지정할 수 있습니다.

옵션

상품 옵션 선택 박스의 배치 방식을 아래로 / 옆으로 중 하나를 선택하여 지정할 수 있습니다.

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

  • 위치

    요약 설명이 보여지는 위치를 가격 위 / 가격 아래 / 구매 버튼 아래 중 선택하여 지정할 수 있습니다.

상세 설명

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

  • 최대 너비

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

  • 여백

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

네비게이션

상품 공통 정보, 상품 상세 설명, 관련 상품, 후기, 질문 등 상품 상세 페이지를 구성하는 각 영역으로 바로 갈 수 있는 메뉴입니다.

  • 글자 최대 너비 네비게이션에 노출될 메뉴명 글자의 최대 너비입니다.

  • 기본 글자 색상 항시 노출되는 메뉴명 글자의 색상입니다.

  • 선택 글자 색상 현재 보고 있는 영역에 해당하는 선택 메뉴명 글자의 색상을 지정할 수 있습니다.

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

  • 글자 크기 네비게이션 글자 크기를 지정할 수 있습니다.

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

  • 상세 설명 글자 상세 설명 본문 바로가기 메뉴명을 지정할 수 있습니다.

  • 상세 설명 바닥글 공통 정보를 활용해 삽입한 상세설명 바닥글의 바로가기 메뉴명을 지정할 수 있습니다.

  • 후기 글자 상품 후기 바로가기 메뉴명을 지정할 수 있습니다.

  • 질문 글자 상품 문의 바로가기 메뉴명을 지정할 수 있습니다.

  • 관련 상품 글자 상품과 연결한 관련 상품 목록 바로가기 메뉴명을 지정할 수 있습니다.

  • 후기 개수 보이기 사용 [✔︎] 선택하면 상품 후기가 몇 개 등록되었는지 상품 후기 바로가기 메뉴명 옆에 숫자로 보여줍니다.

  • 질문 개수 보이기

    사용 [✔︎] 선택하면 상품 문의가 몇 개 등록되었는지 상품 문의 바로가기 메뉴명 옆에 숫자로 보여줍니다.

후기와 질문 / 관련 상품

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

  • 제목 정렬

    왼쪽 / 가운데 / 오른쪽 중 하나를 선택하여 지정할 수 있습니다.

  • 제목 크기

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

후기와 질문

상품 상세 페이지 노출되는 후기 / 질문 관련 설정입니다.

  • 너비

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

    • 공통 너비에 맞추기

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

  • 후기 제목 글자

    후기 섹션의 제목을 지정할 수 있습니다.

  • 질문 제목 글자

    질문 섹션의 제목을 지정할 수 있습니다.

관련 상품

'상품 > 상품 고급 설정 > 관련 상품' 에 지정한 관련 상품을 출력하는 섹션을 설정할 수 있습니다.

  • 위치

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

    • 상세 설명 위

    • 상세 설명 머리글 아래

    • 상세 설명 바닥글 위

    • 상세 설명 아래

    • 후기와 질문 아래

  • 종류 상품 출력 방식을 설정할 수 있습니다.

    • 상품 목록 상품이 지정한 열에 맞춰 아래로 나열되어 보여집니다.

    • 상품 슬라이드 지정한 열에 맞춰 상품을 좌우로 이동하며 살펴볼 수 있습니다.

  • 너비

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

    • 공통 너비에 맞추기

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

  • 제목 글자 관련 상품 섹션의 제목을 지정할 수 있습니다.

  • 정렬 상품이 지정한 열 보다 적은 개수일 때 정렬 방식을 왼쪽 / 가운데 / 오른쪽 중 하나에 맞춰 정렬할 수 있습니다.

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

  • 가로 간격 출력되는 상품 간 좌우 간격을 지정할 수 있습니다.

  • 세로 간격 출력되는 상품의 위아래 줄 간격을 지정할 수 있습니다.

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

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

  • 배지 너비 상품 위에 보여지는 할인/품절/사용자 정의 배지의 너비를 지정할 수 있습니다.

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

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

  • 배지 글자 크기

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

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

    좌우 이동 버튼을 누를 때 몇 개씩 상품을 넘겨 볼 수 있는지를 지정할 수 있습니다.

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

    사용 [✔︎] 선택하면 지정한 재생 시간에 한 번씩 자동으로 상품을 넘겨가며 보여줍니다.

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

    사용 [✔︎] 선택하면 좌우로 이동할 때 누르는 버튼을 출력할 수 있습니다.

    • 기본 색상

      항시 노출되는 화살표의 색상입니다.

    • 마우스 오버 색상

      마우스를 올렸을 때 보여지는 화살표의 색상입니다.

9. 템플릿 변경하기

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

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

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

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

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

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

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

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

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

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