스타일 편집

목차
​스타일 편집이란?​
​스타일 편집​
​스타일 편집 열기 ​
​스타일 편집 메뉴 구성 
​페이지 스타일 설정​
​전체 > 공통​
​머리글 스타일 설정​
​섹션별 스타일 편집​
​사용자 편집 섹션​
​제목글​
​줄글​
​보조글​
​링크​
​선​
​버튼​
​아이콘​
​말풍선​
​쪽번호​
​맨 위로 버튼​
​바닥글 스타일 설정​
​기본 제공 페이지 스타일 설정​
​상품 상세 
​템플릿 변경하기​
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. 쪽번호
[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 쪽번호]에서 쪽번호의 스타일 편집이 가능합니다.
설정 항목
색상
기본
현재 보는 페이지를 제외한 모든 페이지의 쪽번호 숫자에 적용될 색상을 지정할 수 있습니다.

선택
현재 보는 페이지의 쪽번호 숫자에 적용될 색상을 지정할 수 있습니다.
간격
쪽 번호 사이 간격을 지정할 수 있습니다.
글자
​
글꼴
서체를 지정할 수 있습니다.

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

크기
글자 크기를 지정할 수 있습니다.
​
6-10. 맨 위로 버튼
[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 맨 위로 버튼]에서 맨 위로 버튼의 스타일 편집이 가능합니다. 
설정 항목
스크롤할 때 맨 위로 버튼 보이기
사용 [✔︎] 을 선택하면 화면을 스크롤할 때 맨 위로 버튼 화면 우측 하단에 노출됩니다.
종류
맨 위로 버튼의 버튼 유형을 지정할 수 있습니다.
​
한글
'맨위로' 라는 문구가 출력됩니다.

영어
'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

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

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

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

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

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

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

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. 이제 변경된 템플릿을 사용하실 수 있습니다.
페이지와 메뉴
콘텐츠 구성 요소
Last modified 3mo ago