테마 편집
테마를 편집하여 온라인 스토어의 콘텐츠, 레이아웃, 입력 체계 및 색상을 사용자 지정할 수 있습니다. 각 테마에는 코드를 편집하지 않고도 스토어의 디자인을 변경할 수 있는 섹션과 설정이 제공됩니다.
이 페이지의 정보
테마 사용자 지정 전 확인 사항
테마 사용자 지정을 준비하려면 다음 권장 작업을 완료하십시오.
- 테마를 복제하여 백업 복사본을 생성합니다. 복사본이 있으면 필요 시 손쉽게 변경 사항을 취소하거나 다시 시작할 수 있습니다.
- 사용 가능한 지원 수준을 파악해 둡니다.
- 이미지 업로드 요구 사항 및 모범 사례를 확인합니다.
테마 편집기
테마 편집기에는 현재 사이드바에서 보고 있는 템플릿의 모든 콘텐츠에 대한 트리 뷰가 표시됩니다. ▸ 펼치기 아이콘을 사용하여 섹션 노드를 펼치면 해당 블록을 볼 수 있으며 ▾ 접기 아이콘을 사용하여 섹션 노드를 접으면 블록을 숨길 수 있습니다. 섹션 또는 블록을 클릭하여 해당 설정을 볼 수 있습니다.
테마 편집기 액세스
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집하려는 테마 옆의 사용자 지정을 클릭합니다.
- 섹션을 클릭합니다.
미리 보기 검사기
미리 보기 검사기는 테마 편집기의 새로운 기능입니다. 이 기능을 사용하면 미리 보기 창에서 섹션과 블록을 직접 탐색하여 해당되는 설정을 빠르고 직관적으로 검색할 수 있습니다. 미리 보기 검사기를 사용하면 미리 보기 창에서 직접 섹션과 블록을 숨기거나 삭제할 수 있고 순서를 변경할 수 있습니다.
미리 보기 검사기는 모든 무료 Shopify 테마에서 사용할 수 있으며, 기본적으로 활성화됩니다. 미리 보기 검사기는 편집 세션 중에 켜거나 끄도록 전환할 수 있습니다.
미리 보기 검사기가 활성화된 경우 윤곽선이 있는 요소를 클릭하여 해당 설정을 열 수 있습니다. 모바일 장치에서 미리 보기 검사기가 활성화된 경우 아무 요소나 클릭하여 해당 설정을 선택할 수 있습니다. 선택한 해당 설정을 통해 하단 시트를 열어 편집할 수 있습니다.
미리 보기 검사기에서는 미리 보기 창의 섹션과 블록 주변에 다음과 같은 두 가지 윤곽선이 표시됩니다.
- 파란색 실선: 활성 섹션입니다. 해당되는 설정이 사이드바에 회색으로 강조 표시됩니다.
- 파란색 점선: 섹션에 연결된 블록입니다. 미리 보기 창에서 항목을 클릭하면 해당 블록이나 섹션의 설정이 열립니다.
미리 보기 창에서 웹사이트의 아무 부분이나 클릭하면 사이드바에 해당 설정이 로드됩니다. 모바일 장치에서 두 번 탭하면 고객처럼 사이트를 탐색할 수 있습니다.
미리 보기 검사기에서 섹션 및 블록 추가
미리 보기 검사기를 사용하는 동안 미리 보기 창에서 섹션과 블록을 직접 테마에 추가할 수 있습니다. 모바일에서는 하단 시트에서 편집 모드를 사용하여 섹션 추가, 복제, 숨기기, 이동 및 삭제를 수행할 수 있습니다.
| 툴 | 설명 |
|---|---|
| 섹션 추가 | 선택한 섹션의 상단과 하단에 섹션 추가 버튼이 표시됩니다. 섹션 추가를 클릭하면 선택한 섹션의 위쪽이나 아래쪽에 새 섹션이 삽입됩니다. |
| 블록 추가 | 기존 블록 위에 마우스를 올리면 블록 추가 버튼이 나타납니다. 블록을 추가하려면 + 아이콘을 클릭합니다. 선택한 섹션에 추가할 수 있는 테마와 앱 블록이 포함된 팝업 메뉴가 나타납니다. 추가하려는 블록을 클릭합니다. 오른쪽 사이드바에 새 블록의 설정 창이 로드됩니다. |
미리 보기 검사기 도구
미리 보기 검사기를 사용하여 테마 편집기에서 섹션과 블록을 이동, 복제, 삭제하거나 숨길 수 있습니다.
| 툴 | 설명 |
|---|---|
| 다음/이전 위치로 이동 | 미리 보기 검사기의 화살표 아이콘을 사용하면 섹션이나 블록을 다음 위치나 이전 위치로 이동할 수 있습니다. 선택한 섹션이 페이지 상단에 있으면 이전 위치로 이동 버튼이 회색으로 비활성화됩니다. 마찬가지로 섹션이 페이지 하단에 있으면 다음 위치로 이동 버튼을 사용할 수 없습니다. |
| 섹션 또는 블록 복제 | 복사 아이콘을 클릭하여 섹션이나 블록 및 그 콘텐츠를 복제합니다. |
| 섹션 또는 블록 숨기기 | 눈 아이콘을 클릭하면 섹션이나 블록을 숨길 수 있습니다. 섹션이나 블록이 숨겨진 상태에서는 미리 보기 검사기에서 다시 보이도록 설정할 수 없습니다. 이 경우에는 홈 바에서 실행 취소 버튼을 클릭하거나, 설정 패널을 닫고 테마 편집기 홈으로 이동하여 사이드바에서 눈 아이콘이 해제되어 있는 숨겨진 섹션이나 블록을 찾으면 됩니다. 이 아이콘을 클릭하면 섹션이나 블록의 숨김이 해제됩니다. |
| 섹션 또는 블록 삭제 | 휴지통 아이콘을 클릭하면 선택한 섹션이나 블록을 미리 보기 검사기에서 삭제할 수 있습니다. |
사이드바 모드
테마 편집기는 화면의 모든 공간을 사용할 수 있는 두 가지 모드를 제공합니다.
이중 사이드바 모드 는 넓은 브라우저 창과 대형 화면에서 사용되며, 단일 사이드바 모드 는 브라우저 창이 좁고 작은 화면에서 사용됩니다. 사이드바 모드에 따라 편집기에서 설정 패널의 위치가 결정됩니다.
이중 사이드바 모드
화면 폭이 1600픽셀보다 크고 브라우저 창이 전체 크기로 열려 있거나 최소 1600픽셀로 확장된 경우 사이드바가 두 개로 표시됩니다. 왼쪽 사이드바에는 탐색 패널이 포함되고 오른쪽 사이드바에는 설정 패널이 포함됩니다.
단일 사이드바 모드
폭이 좁은 브라우저에는 테마 미리 보기를 위한 공간을 절약하기 위해 하나의 사이드바만 있습니다. 섹션 또는 블록을 클릭하여 편집할 때는 설정 패널이 사이드바의 탐색 패널 위에 열립니다.
섹션 그룹
섹션은 모든 페이지 템플릿에서 다음 영역으로 그룹화됩니다:
- 머리글: 여기에는 머리글, 공지 표시줄, 모든 앱 또는 사용자 지정 Liquid가 포함됩니다.
- 템플릿: 여기에는 페이지의 본문을 구성하는 섹션이 포함됩니다. 예를 들어 템플릿 섹션에는 블로그 게시물, 콜라주, 컬렉션 목록 또는 사용자 지정 Liquid가 포함될 수 있습니다.
- 바닥글: 여기에는 바닥글, 이메일 가입, 모든 앱 또는 사용자 지정 Liquid가 포함됩니다.
머리글과 바닥글은 온라인 스토어의 모든 페이지에서 공유됩니다. 예를 들어 머리글에 사용자 지정 Liquid 블록을 추가하면 해당 사용자 지정 Liquid가 모든 제품 페이지, 홈페이지 및 기타 페이지에 표시됩니다. 필요에 따라 섹션을 다시 정렬할 수 있습니다.
섹션 및 블록
섹션 및 블록 목록에서 페이지 섹션에 대한 모든 블록이 기본으로 표시됩니다.
머리글이나 바닥글을 구성하는 섹션은 기본적으로 축소되어 표시되지만, 섹션 이름 옆에 있는 확장 아이콘 ▸을 클릭하면 해당 섹션을 볼 수 있습니다.
섹션 및 블록 이동
⋮⋮ 아이콘을 사용하여 섹션이나 블록을 클릭하고 끌어 사용 가능한 다른 위치에 놓아서 페이지의 한 영역에서 다른 영역으로 섹션이나 블록을 이동할 수 있습니다.
허용되지 않는 섹션이나 블록을 이동하려고 시도하면 섹션이나 블록이 원래 위치로 다시 돌아갑니다.
섹션 제거
각 품목의 설정 화면에서 템플릿의 섹션 또는 블록을 삭제할 수 있습니다. 섹션 제거 버튼은 섹션 설정 하단에 표시됩니다.
단계:
- 테마 편집기 사이드바에서 제거할 섹션이나 블록을 클릭합니다.
- 섹션 제거 또는 블록 제거를 클릭합니다.
- 저장을 클릭합니다. 게시된 테마를 편집 중인 경우 게시를 클릭하면 변경 사항이 저장되고 스토어에 라이브로 게시됩니다.
블록 숨기기
눈 아이콘을 사용하면 섹션이나 블록을 숨길 수 있습니다.
템플릿
테마 편집기 상단 표시줄의 페이지 선택기에서 모든 테마 템플릿에 액세스할 수 있습니다.
Online Store 2.0 테마를 사용 중인 경우 새 템플릿 옵션을 클릭하면 페이지 선택기에서 새 템플릿을 바로 생성할 수도 있습니다.
특정 리소스가 포함된 템플릿 미리 보기
템플릿을 볼 때 스토어의 호환 가능한 리소스가 템플릿 내에서 어떻게 보이는지 미리 볼 수 있습니다. 예를 들어, 제품 템플릿을 보는 경우 스토어의 모든 제품을 사용하여 테스트할 수 있습니다.
단계:
- 테마 편집기의 페이지 선택기에서 미리 보려는 템플릿을 선택합니다.
- 탐색 패널의 미리 보기 섹션에서 변경을 클릭합니다.
- 선택 메뉴에서 미리 보려는 리소스를 선택합니다.
작업 실행 취소 및 다시 실행
실행 취소 및 다시 실행 버튼은 테마 편집기의 오른쪽 상단에 있습니다.
사용자 지정 데이터의 인라인 편집
사용자 지정 데이터를 사용하여 메타 객체 페이지를 작성하는 경우, 관리자로 이동하지 않고도 라인에서 메타 필드와 메타 객체를 직접 편집하여 변경할 수 있습니다. 이 방법은 이미지, 비디오, 색상, 제품, 페이지, 컬렉션, 텍스트 메타 필드에서 사용할 수 있습니다.
단계:
- 메타 객체에 의해 참조되는 테마에서 호환되는 설정을 선택합니다.
- 설정 패널의 메타 객체 항목에서 메타 필드 값을 선택하고 편집합니다.
- 작업을 저장하면 방문 페이지에 정보가 자동으로 업데이트되어 새로 고침됩니다.
문서 보기, 지원 받기 및 테마 버전 확인하기
테마 문서 및 지원 정보 링크는 메뉴 모음의 기타 ⋯ 메뉴에서 확인할 수 있습니다. 이 메뉴에서는 테마 버전 및 작성자 정보도 확인할 수 있습니다.
사용자 지정 관련 지원
테마 변경 관련 지원이 필요한 경우 테마 개발자에게 문의할 수 있습니다.
테마 사용자 지정과 관련하여 사용 가능한 다른 리소스는 테마 지원용 추가 리소스를 참조하십시오.