테마 편집기 기능 개요

테마 편집기를 사용하여 색상과 같은 테마 영역을 맞춤 설정하고 섹션 및 블록으로 테마의 콘텐츠를 관리할 수 있습니다.

테마 편집기 액세스

Shopify 관리자에서 테마 편집기에 액세스할 수 있습니다.

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. 편집하려는 테마 옆의 테마 편집을 클릭합니다.

테마 편집기 레이아웃 섹션

테마 편집기에는 다음 섹션이 있습니다.

• 메뉴 표시줄의 왼쪽에는 섹션, 테마 설정, 앱 임베드 간에 전환할 수 있는 탐색 버튼이 있으며 중앙에는 테마 이름, 시장 및 템플릿 메뉴가 있고 오른쪽에는 맞춤 설정 컨트롤이 있습니다.
• 사이드바에는 현재 보고 있는 템플릿의 모든 콘텐츠가 트리 보기로 표시됩니다. 사이드바에서 섹션 및 블록, 앱 임베드, 설정을 관리할 수 있습니다. 사이드바는 축소할 수 있습니다.
• 미리 보기 창에는 테마가 표시되며 변경 사항이 있으면 자동으로 업데이트됩니다. 모바일 미리 보기를 활성화하거나 미리 보기 검사기를 사용하여 미리 보기 창에서 테마 템플릿의 콘텐츠를 관리할 수 있습니다.

메뉴 모음

메뉴 표시줄에는 탐색, 테마 정보 및 테마 맞춤 설정용 컨트롤이 표시됩니다.

사이드바 탐색

메뉴 표시줄 왼쪽에서 사이드바의 다음 보기 간에 전환할 수 있습니다.

• 현재 템플릿의 섹션 및 블록을 관리하는
• 색상, 서체, 레이아웃 등 테마의 글로벌 설정을 관리하는
• 테마에 임베디드된 앱을 관리하는

사이드바를 숨기고 테마를 전체 너비로 미리 보려면 활성화된 버튼을 다시 클릭하여 선택을 취소합니다. 두 패널이 모두 표시된 경우 활성화된 버튼을 클릭하면 두 패널이 동시에 축소됩니다.

테마 세부 정보, 시장 및 템플릿 메뉴

메뉴 표시줄 중앙에서 다음을 확인할 수 있습니다.

• ​ 테마 이름 및 해당 상태. 게시된 테마에는 라이브 상태 레이블이 표시됩니다. 게시되지 않은 테마에는 초안 상태 레이블이 표시됩니다. 다음 옵션에 액세스하려면 테마 이름을 클릭하십시오.
  • 코드 편집을 사용하여 코드 편집기를 여십시오.
  • 기본 테마 콘텐츠 편집을 사용하여 테마의 기본 문구를 편집하십시오.
  • 를 사용하여 테마 미리 보기 열기
  • 문서 보기를 사용하여 테마 문서를 여십시오.
  • 를 사용하여 테마 편집기에서 사용할 수 있는 모든 키보드 단축키를 검토하십시오.
  • 지원받기를 사용하여 지원을 받으십시오.
• 여러 시장에 맞게 테마를 미리 보고 맞춤 설정할 수 있는 시장 메뉴
• 테마의 여러 페이지 템플릿 간에 탐색할 수 있는 템플릿 메뉴

맞춤 설정 바로 가기

메뉴 모음의 다음 컨트롤을 사용하여 테마를 맞춤 설정하고 변경 사항을 관리할 수 있습니다.

• Sidekick을(를) 활성화 또는 비활성화하여 테마 맞춤 설정을 지원합니다.
• 미리 보기 검사기를 활성화 또는 비활성화합니다.
• 모바일 화면에서 테마를 미리 보려면 미리 보기 버튼을 전환하십시오.
• 실행 취소 및 다시 실행 컨트롤로 현재 맞춤 설정 세션을 관리합니다.
• 저장 버튼을 사용하여 변경 사항을 저장합니다.

다시 실행하거나 실행 취소할 저장되지 않은 맞춤 설정이 없는 경우 해당하는 버튼이 비활성화됩니다.

사이드바

사이드바에는 현재 보고 있는 템플릿의 모든 콘텐츠가 트리 보기로 표시됩니다. 사이드바에서 섹션 및 블록과 테마 설정을 관리할 수 있습니다. 메뉴 표시줄에서 활성화된 탐색 버튼을 다시 클릭하여 끄기로 전환하면 사이드바를 축소할 수 있습니다.

테마에는 다른 설정의 활성화 여부에 따라 사이드바에 표시되는 조건부 설정이 있을 수 있습니다. 예를 들어 테마에 동영상이나 이미지를 추가할 수 있는 설정이 있는 블록이 포함된 경우, 이미지 선택기나 동영상 링크는 미디어 유형으로 이미지를 선택한 후에만 표시되는 조건부 설정일 수 있습니다.

사이드바 모드

테마 편집기에는 화면의 모든 공간을 활용할 수 있는 두 가지 모드가 있습니다.

이중 사이드바 모드는 더 넓은 브라우저 창과 큰 화면에 적합하며 단일 사이드바 모드는 더 좁은 브라우저 창과 작은 화면에 적합합니다. 사이드바 모드는 편집기에서 설정 패널이 표시되는 위치를 결정합니다.

이중 사이드바 모드

브라우저 창 너비가 1,600픽셀 이상인 경우 패널 2개가 표시됩니다. 왼쪽 패널에는 섹션 및 블록이 포함된 페이지 구조가 포함되고, 오른쪽 패널에는 선택한 섹션 또는 블록의 설정이 포함됩니다. 섹션 선택을 취소하여 오른쪽 패널을 축소할 수 있습니다.

큰 화면에서 단일 사이드바 모드로 테마 편집기를 보려면 편집기가 스택 레이아웃으로 전환될 때까지 브라우저 창을 좁게 만드십시오.

단일 사이드바 모드

좁은 화면에서는 편집기에 스택 레이아웃이 사용됩니다. 섹션이나 블록을 클릭하면 설정 패널이 페이지 구조를 덮는 대신 화면 하단에서 위로 슬라이드됩니다. 구분선을 드래그하여 페이지 구조와 설정 간의 분할을 조정하여 항상 둘 다 표시되도록 할 수 있습니다.

테마 미리보기

메뉴 표시줄에서 버튼을 클릭하여 테마의 모바일 레이아웃을 미리 볼 수 있습니다. 데스크톱 미리 보기로 돌아가려면 모바일 버튼을 다시 클릭하십시오.

테마를 전체 너비로 미리 보려면 활성화된 사이드바 탐색 버튼을 클릭하여 사이드바를 축소합니다. 두 패널이 모두 표시된 경우 두 패널이 동시에 축소되어 스토어프론트의 전체 너비 미리 보기가 제공됩니다.

저장되지 않은 변경 사항 실행 취소 및 다시 실행

및 버튼을 사용하여 저장되지 않은 맞춤 설정을 실행 취소하거나 다시 실행할 수 있습니다. 변경 사항을 저장하면 더 이상 다시 실행하거나 실행 취소할 수 없습니다.

테마 편집기에서 키보드 단축키 사용하기

테마 편집기에서 키보드 단축키를 사용하여 탐색하고 작업을 수행할 수 있습니다.