섹션 및 블록
테마는 섹션을 사용하여 적합한 레이아웃을 생성합니다. 대부분의 섹션은 머리글, 텍스트, 단일 이미지, 이미지 콜라주 또는 링크와 같은 특정 기능을 제공하는 블록으로 구성됩니다. 템플릿에서 섹션과 블록을 사용하면 스토어 콘텐츠를 정렬하는 방식에 더 많은 유연성을 제공하므로 코드를 편집하지 않고도 온라인 스토어의 룩앤필을 제어할 수 있습니다. 각 템플릿은 최대 25개의 섹션을 포함할 수 있습니다.
각 섹션에는 추가할 수 있는 다양한 특정 블록이 있습니다. 섹션마다 최대 50개의 블록을 추가할 수 있습니다. 사용 가능한 섹션과 블록은 테마에 따라 다를 수 있습니다. 사용 가능한 옵션에 대한 자세한 내용은 테마 문서를 참조하십시오.
일부 섹션에는 추가할 수 있는 블록 수 제한 또는 특정 유형의 블록 수 제한이 있습니다. 예를 들어 텍스트 포함 이미지 섹션에는 테마 디자이너가 테마에 지정한 블록만 표시할 수 있습니다. 무료 Shopify 테마인 Dawn에 다음 블록 중 하나만 추가할 수 있습니다.
- 제목
- 단락
- 버튼
이미지를 포함하도록 설정을 편집하여 섹션을 추가로 사용자 지정하고 고객이 온라인 스토어를 방문할 때 정렬, 크기, 배경 색상 및 먼저 로드할 항목을 선택할 수 있습니다.
스토어 레이아웃에 추가하는 섹션에 필요한 설정이나 옵션이 포함되지 않는 경우 테마 코드를 편집하거나 테마 개발자에게 지원을 문의할 수 있습니다.
섹션 및 블록으로 테마 템플릿 사용자 지정
테마 편집기를 열면 스토어의 홈페이지는 기본적으로 로드됩니다. 드롭다운 메뉴를 사용하여 다른 템플릿을 선택하거나 템플릿 드롭다운의 검색 표시줄을 사용하여 특정 페이지 유형을 검색할 수 있습니다. 템플릿을 선택하면 테마 편집기로 로드되며, 변경한 모든 변경 사항은 적용할 때 편집기에서 미리 볼 수 있습니다.
섹션 추가
온라인 스토어의 모든 페이지에 새 섹션을 추가합니다.
단계:
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
- 드롭다운 메뉴에서 템플릿을 선택합니다.
- + 섹션 추가를 클릭하고 목록에서 새 섹션을 선택하거나 검색 창에서 특정 용어를 검색합니다.
- 새 섹션을 클릭하여 섹션 내 블록을 편집합니다.
- 선택 사항: 섹션 옆에 있는
⋮⋮아이콘을 클릭하고 끌어서 페이지의 섹션을 재배치합니다. - 저장을 클릭합니다.
- Shopify 앱에서 … 버튼을 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 모든 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- 드롭다운 메뉴에서 템플릿을 선택합니다.
- + 섹션 추가를 클릭하고 목록에서 새 섹션을 선택하거나 검색 창에서 특정 용어를 검색합니다.
- 새 섹션을 클릭하여 섹션 내 블록을 편집합니다.
- 선택 사항: 섹션 옆에 있는
⋮⋮아이콘을 클릭하고 끌어서 페이지의 섹션을 재배치합니다. - 저장을 클릭합니다.
- Shopify 앱에서 … 버튼을 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 모든 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- 드롭다운 메뉴에서 템플릿을 선택합니다.
- + 섹션 추가를 클릭하고 목록에서 새 섹션을 선택하거나 검색 창에서 특정 용어를 검색합니다.
- 새 섹션을 클릭하여 섹션 내 블록을 편집합니다.
- 선택 사항: 섹션 옆에 있는
⋮⋮아이콘을 클릭하고 끌어서 페이지의 섹션을 재배치합니다. - 저장을 클릭합니다.
섹션 편집
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
- 드롭다운 메뉴에서 편집할 섹션이 포함된 템플릿을 선택합니다.
- 섹션을 클릭하여 콘텐츠를 미리 보기 창에 로드하고 사용 가능한 옵션에 액세스합니다.
- 선택 사항: 개별 블록을 클릭하여 섹션 내 블록을 편집합니다.
- 저장을 클릭합니다.
- Shopify 앱에서 … 버튼을 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 모든 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- 드롭다운 메뉴에서 편집할 섹션이 포함된 템플릿을 선택합니다.
- 섹션을 클릭하여 콘텐츠를 미리 보기 창에 로드하고 사용 가능한 옵션에 액세스합니다.
- 선택 사항: 개별 블록을 클릭하여 섹션 내 블록을 편집합니다.
- 저장을 클릭합니다.
- Shopify 앱에서 … 버튼을 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 모든 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- 드롭다운 메뉴에서 편집할 섹션이 포함된 템플릿을 선택합니다.
- 섹션을 클릭하여 콘텐츠를 미리 보기 창에 로드하고 사용 가능한 옵션에 액세스합니다.
- 선택 사항: 개별 블록을 클릭하여 섹션 내 블록을 편집합니다.
- 저장을 클릭합니다.
섹션 또는 블록 복제
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
- 드롭다운 메뉴에서 복제하려는 섹션이나 블록이 포함된 템플릿을 선택합니다.
- 복제하려는 섹션이나 블록을 클릭합니다.
- 사이드바에서 섹션 이름 옆에 있는
...버튼을 클릭한 다음 복제를 클릭합니다. - 저장을 클릭합니다.
- Shopify 앱에서 … 버튼을 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 모든 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- 드롭다운 메뉴에서 복제하려는 섹션이나 블록이 포함된 템플릿을 선택합니다.
- 복제하려는 섹션이나 블록을 클릭합니다.
- 사이드바에서 섹션 이름 옆에 있는
...버튼을 클릭한 다음 복제를 클릭합니다. - 저장을 클릭합니다.
- Shopify 앱에서 … 버튼을 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 모든 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- 드롭다운 메뉴에서 복제하려는 섹션이나 블록이 포함된 템플릿을 선택합니다.
- 복제하려는 섹션이나 블록을 클릭합니다.
- 사이드바에서 섹션 이름 옆에 있는
...버튼을 클릭한 다음 복제를 클릭합니다. - 저장을 클릭합니다.
섹션 또는 블록 제거
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
- 드롭다운 메뉴에서 편집할 섹션이 포함된 템플릿을 선택합니다.
- 섹션을 클릭하여 콘텐츠를 미리 보기 창에 로드하고 사용 가능한 옵션에 액세스합니다.
- 눈 아이콘을 클릭하여 섹션 또는 블록을 숨기거나 숨김 해제합니다.
- 제거를 클릭하여 블록 또는 섹션을 삭제합니다.
- Shopify 앱에서 … 버튼을 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 모든 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- 드롭다운 메뉴에서 편집할 섹션이 포함된 템플릿을 선택합니다.
- 섹션을 클릭하여 콘텐츠를 미리 보기 창에 로드하고 사용 가능한 옵션에 액세스합니다.
- 눈 아이콘을 클릭하여 섹션 또는 블록을 숨기거나 숨김 해제합니다.
- 제거를 클릭하여 블록 또는 섹션을 삭제합니다.
- Shopify 앱에서 … 버튼을 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 모든 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- 드롭다운 메뉴에서 편집할 섹션이 포함된 템플릿을 선택합니다.
- 섹션을 클릭하여 콘텐츠를 미리 보기 창에 로드하고 사용 가능한 옵션에 액세스합니다.
- 눈 아이콘을 클릭하여 섹션 또는 블록을 숨기거나 숨김 해제합니다.
- 제거를 클릭하여 블록 또는 섹션을 삭제합니다.
일부 섹션에는 고정 블록 유형 및 제한이 있습니다. 특정 섹션이나 블록에 제한이 있는 경우 인터페이스에는 사용 가능한 X개 블록 중 X개를 사용했음이 표시됩니다. 최대 블록 수를 사용했다면 기존 블록을 삭제하기 전까지는 블록을 더 추가할 수 없습니다.
블록 작업
블록은 페이지 템플릿 내 섹션을 구성하는 사용자 지정 가능한 모듈입니다. 블록을 사용하여 텍스트, 이미지, 링크, 버튼 등을 추가할 수 있습니다.
Shopify 테마에는 사용자 지정할 수 있는 섹션과 블록이 있습니다. 일부 섹션에는 고정 블록 유형이 있어서 테마 디자이너가 해당 섹션에서 사용 가능한 블록만 선택할 수 있습니다. 다른 섹션에서는 블록을 선택할 수 있지만 섹션에 추가할 수 있는 총 블록 수는 제한됩니다. 섹션이 사용 가능한 최대 블록 수에 도달하면 한계에 도달했다는 메시지가 표시되고 + 블록 추가 옵션은 기존 블록이 제거될 때까지 회색으로 표시됩니다.
블록 추가
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
- 드롭다운 메뉴에서 편집할 섹션이 포함된 템플릿을 선택합니다.
- 섹션을 클릭하여 콘텐츠를 미리 보기 창에 로드하고 사용 가능한 옵션에 액세스합니다.
- + 블록 추가를 클릭하고 새 블록을 선택하거나 검색 창을 클릭하여 검색어를 입력합니다.
- 저장을 클릭합니다.
- Shopify 앱에서 … 버튼을 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 모든 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- 드롭다운 메뉴에서 편집할 섹션이 포함된 템플릿을 선택합니다.
- 섹션을 클릭하여 콘텐츠를 미리 보기 창에 로드하고 사용 가능한 옵션에 액세스합니다.
- + 블록 추가를 클릭하고 새 블록을 선택하거나 검색 창을 클릭하여 검색어를 입력합니다.
- 저장을 클릭합니다.
- Shopify 앱에서 … 버튼을 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 모든 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- 드롭다운 메뉴에서 편집할 섹션이 포함된 템플릿을 선택합니다.
- 섹션을 클릭하여 콘텐츠를 미리 보기 창에 로드하고 사용 가능한 옵션에 액세스합니다.
- + 블록 추가를 클릭하고 새 블록을 선택하거나 검색 창을 클릭하여 검색어를 입력합니다.
- 저장을 클릭합니다.
동적 소스로 메타 필드 및 메타 객체 사용
메타 필드 및 메타 객체를 사용하면 온라인 스토어에 동적 정보를 표시할 수 있습니다. 메타 필드를 지원하는 테마가 있는 경우 테마 편집기에서 메타 필드를 섹션이나 블록에 연결할 수 있습니다.
예를 들어, 양초 판매자가 사용 가능한 각 유형의 양초에 대한 연소 시간을 표시하려는 경우, 판매자는 연소 시간의 제품 메타 필드를 설정한 후 제품 템플릿에 연소 시간에 대한 블록을 추가한 다음, 제품 메타 필드에 연결할 수 있습니다. 연소 시간을 나열하는 페이지에 컬렉션 메타 필드를 설정하고 나면 판매자가 컬렉션 템플릿에 블록을 추가하여 컬렉션 메타 필드에 연결할 수 있습니다.
다이나믹 소스를 사용할 수 있는 섹션이나 블록을 추가하여 온라인 스토어에 동적 정보를 표시할 수 있습니다. 동적 소스는 호환 리소스(제품, 컬렉션, 페이지, 블로그 및 블로그 게시물)를 표시하는 템플릿, 섹션 또는 블록에서 사용할 수 있습니다. 템플릿에서 연결하기 전에 메타 필드를 추가해야 합니다. 테마에서 동적 소스를 통해 메타 필드 및 메타 객체 사용에 대한 자세한 내용은 다이나믹 소스를 참조하세요.
설정 프로세스를 완료한 후 다음 단계를 수행하여 동적 소스를 테마의 블록 또는 설정에 연결합니다.
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 클릭합니다.
- 드롭다운 메뉴에서 편집할 섹션이 포함된 템플릿을 선택합니다.
- 기존 섹션을 클릭하여 콘텐츠를 미리 보기 창에 로드하고 사용 가능한 옵션에 액세스하거나 + 섹션 추가를 클릭합니다.
- 동적 소스 버튼을 클릭한 다음 동적 소스를 연결합니다.
- 저장을 클릭합니다.
- Shopify 앱에서 … 버튼을 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 모든 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- 드롭다운 메뉴에서 편집할 섹션이 포함된 템플릿을 선택합니다.
- 기존 섹션을 클릭하여 콘텐츠를 미리 보기 창에 로드하고 사용 가능한 옵션에 액세스하거나 + 섹션 추가를 클릭합니다.
- 동적 소스 버튼을 클릭한 다음 동적 소스를 연결합니다.
- 저장을 클릭합니다.
- Shopify 앱에서 … 버튼을 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 모든 테마 관리를 탭합니다.
- 편집하려는 테마를 찾은 다음 사용자 지정을 탭합니다.
- 편집을 탭합니다.
- 드롭다운 메뉴에서 편집할 섹션이 포함된 템플릿을 선택합니다.
- 기존 섹션을 클릭하여 콘텐츠를 미리 보기 창에 로드하고 사용 가능한 옵션에 액세스하거나 + 섹션 추가를 클릭합니다.
- 동적 소스 버튼을 클릭한 다음 동적 소스를 연결합니다.
- 저장을 클릭합니다.
동적 소스 선택기
동적 소스 선택기를 사용하여 온라인 스토어 편집기에서 올바른 동적 소스를 직접 쉽게 연결할 수 있습니다. 선택기의 몇 가지 주요 기능은 다음과 같습니다.
- 해당하는 경우 다양한 리소스에서 동적 소스를 참조할 수 있습니다. 예를 들어 제품 리소스와 페이지 리소스에 연결된 블록에 설정을 연결하는 경우, 제품 또는 페이지 리소스와 관련된 메타 필드를 검색할지 지정할 수 있습니다. 이 드롭다운은 동적 소스 선택기 상단에 있습니다.
- 검색 및 필터링: 동적 소스 선택기에서는 필요한 메타 필드를 빠르게 찾을 수 있도록 검색 및 필터 기능을 제공합니다.
- 범주 메타 필드 선택: 선택기로 범주 메타 필드를 선택할 수 있습니다. 제품에 제품 범주를 할당할 때 사용할 수 있게 되는 추가 속성이 있습니다. 이러한 메타 필드에 액세스하면 동적 소스를 기본 속성 메타 객체에 있는 모든 관련 필드에 연결할 수 있습니다.