테마 편집기를 사용하여 온라인 스토어 맞춤 설정하기
테마 편집기를 사용하여 색상과 같은 테마의 영역을 맞춤 설정하고, 섹션과 블록을 통해 테마의 콘텐츠를 관리할 수 있습니다. 테마 편집기에는 다음과 같은 섹션이 있습니다.
- 메뉴 바는 테마에 대한 추가 정보를 확인하고, 제품 페이지와 같은 테마의 다른 템플릿으로 이동하며, 화면 크기 표시를 조정하고, 맞춤 설정 작업을 관리할 수 있는 도구를 표시합니다.
- 사이드바 메뉴는 현재 사이드바에서 보고 있는 템플릿의 모든 콘텐츠를 트리 뷰 형식으로 표시합니다. 사이드바 메뉴에서 섹션, 블록 및 설정을 관리할 수 있습니다.
- 미리보기 창은 테마를 표시하며, 변경을 할 때마다 자동으로 업데이트됩니다. 메뉴 바에서 다양한 표시 옵션을 선택하여 데스크톱 또는 모바일 레이아웃에서 테마를 미리 볼 수 있습니다. 미리보기 창에서 테마 템플릿의 콘텐츠를 관리하려면 미리보기 검사기를 활성화할 수도 있습니다.
이 페이지의 정보
테마 편집기 액세스
Shopify 관리자에서 테마 편집기에 액세스할 수 있습니다.
Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
편집하려는 테마 옆의 사용자 지정을 클릭합니다.
메뉴 바
메뉴 바에는 테마에 대한 정보, 추가 정보와 테마의 다양한 영역에 액세스할 수 있는 메뉴, 그리고 테마 맞춤 설정을 위한 제어 기능이 포함되어 있습니다.
메뉴 바에는 다음과 같은 추가 정보 및 탐색 옵션이 표시됩니다.
버튼을 사용해 Shopify 관리자로 돌아갑니다.- 테마 이름을 검토합니다.
- 테마 상태를 검토합니다. 게시된 테마에는 실시간 상태 레이블이 표시됩니다. 게시되지 않은 테마에는 초안 상태 레이블이 표시됩니다.
메뉴를 사용하여 다음 추가 옵션에 액세스합니다.
- 
코드 편집을 사용하여 코드 편집기를 엽니다.
- 
기본 테마 콘텐츠 편집을 사용하여 테마의 기본 문구를 편집합니다.
- **
**를 사용하여 테마 미리 보기를 엽니다.
- 
문서 보기를 사용하여 테마의 문서를 엽니다.
- **
**를 사용하여 테마 편집기에서 사용 가능한 모든 키보드 단축키를 검토합니다.
- 
지원 받기를 사용하여 지원을 받습니다.
다음 메뉴를 통해 다양한 템플릿과 마켓 레이아웃에 액세스할 수 있습니다.
메뉴 바에서 다음 제어 기능을 사용하여 테마를 맞춤 설정할 수 있습니다.
- Sidekick을 활성화하거나 비활성화합니다.
- 미리 보기 검사기를 활성화하거나 비활성화합니다.
- 화면 크기 제어를 사용하여 화면 크기를 변경합니다.
- 실행 취소 및 다시 실행 제어를 사용하여 현재 맞춤 설정 세션을 관리합니다.
- 저장 버튼을 사용하여 변경 사항을 저장합니다.
문서 보기, 지원 받기 및 테마 버전 확인하기
메뉴에서 테마 버전, 개발자 정보 등 테마에 대한 사용 가능한 정보와 테마 문서 및 지원 정보 링크를 확인할 수 있습니다.
사용자 지정 관련 지원
테마 변경 관련 지원이 필요한 경우 테마 개발자에게 문의할 수 있습니다.
테마 사용자 지정과 관련하여 사용 가능한 다른 리소스는 테마 지원용 추가 리소스를 참조하십시오.
테마 편집기에서 키보드 단축키 사용
테마 편집기에서 키보드 단축키를 사용하여 탐색하고 작업을 수행할 수 있습니다.
| 범주 | 작업 | Windows의 바로 가기 | macOS의 바로 가기 |
|---|---|---|---|
| 일반 | 실행 취소 |
CTRL + Z
|
⌘ + Z
|
| 다시 실행 |
CTRL + Y
|
⌘ + Y
| |
| 저장 |
CTRL + S
|
⌘ + ⇧ + S
| |
| 모든 단축키 보기 |
CTRL + /
|
⌘ + /
| |
| 툴 | 미리 보기 검사기 |
CTRL + SHIFT + |
|
⌘ + ⇧ + |
|
| 미리 보기 모드 |
⊞ + CTRL + |
|
⌘ + ⌃ + |
| |
| Sidekick |
CTRL + .
|
⌘ + .
| |
| 탐색 | 섹션 |
⊞ + CTRL + Z
|
⌘ + ⌃ + 1
|
| 테마 설정 |
⊞ + CTRL + Z
|
⌘ + ⌃ + 2
| |
| 앱 임베드 |
⊞ + CTRL + Z
|
⌘ + ⌃ + 3
| |
| 섹션 및 블록 | 숨기기 및 표시 |
CTRL + SHIFT + H
|
⌘ + ⇧ + H
|
| 제거 |
SHIFT + ⭠
|
⇧ + ⌫
| |
| 이전 선택 |
SHIFT + ←
|
⇧ + ▲
| |
| 다음 선택 |
SHIFT + →
|
⇧ + ▼
| |
| 선택한 요소 열기 |
SHIFT + ENTER
|
⇧ + ▼
| |
| 모든 섹션 확장 |
CTRL + SHIFT + O
|
⌘ + ⇧ + O
| |
| 모든 섹션 축소 |
CTRL + SHIFT + P
|
⌘ + ⇧ + P
|
템플릿
테마 편집기 상단 표시줄의 페이지 선택기에서 모든 테마 템플릿에 액세스할 수 있습니다.
Online Store 2.0 테마를 사용 중인 경우 새 템플릿 옵션을 클릭하면 페이지 선택기에서 새 템플릿을 바로 생성할 수도 있습니다.
특정 리소스가 포함된 템플릿 미리 보기
스토어의 호환 가능한 리소스를 활용해 템플릿이 어떻게 표시되는지 미리 보기로 확인할 수 있습니다. 예를 들어, 제품 템플릿을 보는 경우 스토어의 모든 제품을 사용하여 테스트할 수 있습니다.
이 경우에도 Shopify 관리자에서 리소스에 템플릿을 할당해야 합니다.
또한 페이지 선택기, 섹션 추가 또는 블록 추가 도구 또는 앱 임베드에서 검색 창을 사용하여 템플릿 및 리소스를 검색할 수도 있습니다.
단계:
Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
편집하려는 테마 옆의 사용자 지정을 클릭합니다.
템플릿 메뉴에서 미리 볼 템플릿을 선택합니다.
사이드바 메뉴의 미리 보기 섹션에서 변경을 클릭합니다.
선택 메뉴에서 미리 보려는 리소스를 선택합니다.
미리 보기 검사기
미리 보기 검사기를 사용하면 미리 보기 창에서 섹션과 블록으로 바로 이동하여 해당 설정을 더 빠르고 직관적으로 찾을 수 있습니다. 또한, 미리 보기 검사기를 통해 미리 보기 창에서 중복 섹션과 블록을 재정렬하거나 숨길 수 있습니다.
미리 보기 검사기는 모든 무료 Shopify 테마에서 사용할 수 있으며, 기본적으로 활성화됩니다. 
버튼을 클릭하여 편집 세션 중에 미리 보기 검사기를 켜거나 끌 수 있습니다.
미리 보기 검사기가 활성화된 경우 윤곽선이 있는 요소를 클릭하여 해당 설정을 열 수 있습니다. 모바일 장치에서 미리 보기 검사기가 활성화된 경우 아무 요소나 클릭하여 해당 설정을 선택할 수 있습니다. 선택한 해당 설정을 통해 하단 시트를 열어 편집할 수 있습니다.
미리 보기 검사기에서는 미리 보기 창의 섹션과 블록 주변에 다음 두 가지 윤곽선 중 하나가 표시됩니다.
- 파란색 실선은 활성화된 섹션을 의미합니다. 사이드바 메뉴에서 해당하는 설정이 회색으로 강조 표시됩니다.
- 파란색 점선은 섹션에 연결된 블록을 의미합니다. 미리 보기 창에서 항목을 클릭하면 해당 블록이나 섹션의 설정이 열립니다.
미리 보기 창에서 웹사이트의 아무 부분이나 클릭하면 사이드바에 해당 설정이 로드됩니다. 모바일 장치에서 두 번 탭하면 고객처럼 사이트를 탐색할 수 있습니다.
미리 보기 검사기에서 섹션 및 블록 추가
미리 보기 검사기를 사용하면 미리 보기 창에서 바로 테마에 섹션과 블록을 추가할 수 있습니다. Shopify 앱에서 미리 보기 검사기를 사용하려면 섹션을 길게 눌러 관리합니다.
| 툴 | 설명 |
|---|---|
| 섹션 추가 | 선택한 섹션의 상단과 하단에 섹션 추가 버튼이 표시됩니다. 섹션 추가 버튼을 클릭하면 선택한 섹션의 위쪽이나 아래쪽에 새 섹션이 삽입됩니다. |
| 블록 추가 | 기존 블록 위에 마우스를 올리면 블록 추가 버튼이 나타납니다. 블록을 추가하려면  버튼 위로 커서를 가져갑니다. 선택한 섹션에 추가할 수 있는 테마와 앱 블록이 포함된 팝업 메뉴가 나타납니다. 추가하려는 블록을 클릭합니다. 오른쪽 사이드바에 새 블록의 설정 창이 로드됩니다.
|
미리 보기 검사기 도구
미리 보기 검사기를 사용하면 테마 편집기에서 섹션과 블록을 이동하거나, 숨기거나, 복제하거나, 삭제할 수 있습니다.
| 툴 | 작업 | 설명 |
|---|---|---|
 | 이전 위치로 이동 | 이 버튼을 클릭하여 미리 보기 검사기의 화살표 아이콘을 사용하면 섹션이나 블록을 다음 위치나 이전 위치로 이동할 수 있습니다. 선택한 섹션이 페이지 상단에 있으면 버튼이 회색으로 비활성화됩니다. 마찬가지로, 선택한 섹션이 페이지 하단에 있으면  버튼을 사용할 수 없습니다. |
| 다음 위치로 이동 | |
 | 섹션 또는 블록 복제 | 이 버튼을 클릭하여 섹션 또는 블록과 해당 콘텐츠를 복제합니다. |
 | 섹션 또는 블록 숨기기 | 섹션이나 블록을 숨기려면 이 버튼을 클릭합니다. 섹션이나 블록이 숨겨진 상태에서는 미리 보기 검사기에서 다시 보이도록 설정할 수 없습니다. 메뉴 바에서  버튼을 클릭하거나, 사이드바 메뉴에서 섹션이나 블록 옆에 있는 버튼을 클릭하여 다시 표시할 수 있습니다. |
 | 섹션 또는 블록 삭제 | 이 버튼을 클릭하면 미리 보기 검사기에서 선택한 섹션이나 블록이 삭제됩니다. |
테마 편집기에서 다양한 화면 크기로 보기
테마 편집기에서 다양한 화면 크기를 볼 수 있습니다. 테마 편집기를 데스크톱, 모바일 또는 전체 화면 크기로 변경하여 테마 편집이 다양한 화면 크기에 최적화되었는지 확인하고, 데스크톱 및 모바일의 대체 레이아웃을 확인할 수 있습니다. 화면 크기를 변경하려면 메뉴 바에서 다음 버튼을 클릭하세요.
- 데스크톱의 경우
버튼을 클릭하세요. - 모바일의 경우
버튼을 클릭하세요. - 전체 화면을 보려면
버튼을 클릭하세요.
작업 실행 취소 및 다시 실행
및 
버튼을 사용하여 저장되지 않은 맞춤 설정을 실행 취소하거나 다시 실행할 수 있습니다. 변경 사항을 저장한 후에는 더 이상 다시 실행하거나 실행 취소할 수 없습니다.
다시 실행, 실행 취소 또는 둘 다를 실행할, 저장되지 않은 맞춤 설정이 없으면 해당 버튼은 회색으로 표시됩니다.
사이드바 메뉴
사이드바 메뉴는 현재 사이드바에서 보고 있는 템플릿의 모든 콘텐츠를 트리 뷰 형식으로 표시합니다. 사이드바 메뉴에서 섹션, 블록 및 설정을 관리할 수 있습니다.
사이드바 모드
테마 편집기에는 화면의 모든 공간을 활용할 수 있는 두 가지 모드가 있습니다.
이중 사이드바 모드 는 넓은 브라우저 창과 대형 화면에서 사용되며, 단일 사이드바 모드 는 브라우저 창이 좁고 작은 화면에서 사용됩니다. 사이드바 모드에 따라 편집기에서 설정 패널의 위치가 결정됩니다.
이중 사이드바 모드
화면 폭이 1600픽셀보다 크고 브라우저 창이 전체 크기로 열려 있거나 최소 1600픽셀로 확장된 경우 사이드바가 두 개로 표시됩니다. 왼쪽 사이드바에는 탐색 패널이 포함되고 오른쪽 사이드바에는 설정 패널이 포함됩니다.
큰 화면에서 테마 편집기를 단일 사이드바 모드로 사용하려면 설정 패널이 탐색 사이드바 상단으로 이동하거나 아예 보이지 않을 때까지 브라우저 창 크기를 축소하세요.
단일 사이드바 모드
폭이 좁은 브라우저에는 테마 미리 보기를 위한 공간을 절약하기 위해 하나의 사이드바만 있습니다. 섹션 또는 블록을 클릭하여 편집할 때는 설정 패널이 사이드바의 탐색 패널 위에 열립니다.
섹션 및 블록
섹션 및 블록 목록에서 페이지 섹션에 대한 모든 블록이 기본으로 표시됩니다.
머리글이나 바닥글을 이루는 부분은 기본적으로 축소됩니다. 섹션 이름 옆에 있는 
버튼을 클릭하여 해당 콘텐츠를 표시할 수 있습니다.
섹션 그룹
섹션은 테마의 모든 페이지 템플릿에서 다음과 같은 영역으로 그룹화됩니다.
- 머리글 영역에는 머리글, 공지 표시줄, 모든 앱 또는 사용자 지정 Liquid가 포함됩니다.
- 템플릿 영역에는 페이지의 본문을 구성하는 섹션이 포함됩니다. 예를 들어 템플릿 섹션에는 블로그 게시물, 콜라주, 컬렉션 목록 또는 사용자 지정 Liquid가 포함될 수 있습니다.
- 바닥글 영역에는 바닥글, 이메일 가입, 모든 앱 또는 사용자 지정 Liquid가 포함됩니다.
머리글과 바닥글은 온라인 스토어의 모든 페이지에서 공유됩니다. 예를 들어 머리글에 사용자 지정 Liquid 블록을 추가하면 해당 사용자 지정 Liquid가 모든 제품 페이지, 홈페이지 및 기타 페이지에 표시됩니다.
섹션과 블록 펼치기 및 접기
버튼을 사용하여 섹션 노드를 펼치면 해당 블록을 볼 수 있으며, 
버튼을 사용하여 섹션 노드를 접으면 블록을 숨길 수 있습니다. 섹션 또는 블록을 클릭하여 해당 설정을 볼 수 있습니다.
섹션 및 블록 이동
버튼을 사용하여 섹션이나 블록을 클릭한 다음 사용 가능한 다른 위치에 끌어다 놓으면 페이지의 한 영역에서 다른 영역으로 섹션이나 블록을 이동할 수 있습니다.
섹션이나 블록을 허용되지 않는 영역으로 이동하려고 하면 원래 위치로 다시 돌아갑니다.
섹션 및 블록 제거
다음 두 가지 방법 중 하나를 사용하여 템플릿에서 섹션이나 블록을 제거할 수 있습니다.
섹션 이름 옆으로 커서를 이동한 다음
버튼을 클릭하세요. 
섹션 이름을 클릭한 후, 섹션 설정 세부 정보에서 섹션 제거를 클릭하세요.
단계:
Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
편집하려는 테마 옆의 사용자 지정을 클릭합니다.
테마 편집기 사이드바에서 제거할 섹션이나 블록을 클릭합니다.
섹션 제거 또는 블록 제거를 클릭합니다.
저장을 클릭합니다. 게시되어 있는 테마를 편집 중인 경우 게시를 클릭하면 변경 사항이 저장되고 스토어에 라이브로 게시됩니다.
섹션 및 블록 숨김
버튼을 사용하면 섹션이나 블록을 숨길 수 있습니다.
