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