섹션 및 블록

테마의 섹션을 사용하여 원하는 온라인 스토어 레이아웃을 만들 수 있습니다. 섹션은 텍스트, 버튼, 단일 이미지, 이미지 콜라주, 링크 등 각각 특정 기능을 가진 다양한 유형의 블록으로 구성됩니다.

섹션과 블록을 사용하면 콘텐츠를 유연하게 정렬할 수 있으며, 코드를 편집하지 않고도 온라인 스토어의 스타일과 분위기를 제어할 수 있습니다. 다음과 같은 맞춤 설정 옵션을 이용할 수 있습니다.

• 템플릿에서 섹션을, 섹션 내에서 블록을 재정렬할 수 있습니다.
• 섹션과 블록에 특정 맞춤 설정을 적용할 수 있습니다.
• 호환되는 섹션과 블록을 연결하여 제품 관리 지침을 추가하는 등 사용자 지정 데이터의 동적 정보를 온라인 스토어에 표시할 수 있습니다. 동적 소스 연결에 대해 자세히 알아보십시오.

테마 편집기에서 사용할 수 있는 섹션과 블록은 테마 및 테마 버전에 따라 다릅니다. 예를 들어 테마에 슬라이드 쇼 섹션에만 추가할 수 있는 슬라이드 블록이 있고, 테마의 모든 섹션에 추가할 수 있는 머리글 텍스트 블록이 있을 수 있습니다. 사용 가능한 옵션에 대한 자세한 내용은 테마 설명서를 참조하십시오.

섹션 및 블록 최대 제한

섹션과 블록에는 다음과 같은 최대 제한이 적용됩니다.

• 각 템플릿에는 최대 25개의 섹션을 포함할 수 있습니다.
• 각 템플릿의 모든 섹션에 걸쳐 최대 1,250개의 블록을 포함할 수 있습니다. 각 섹션에 추가할 수 있는 정확한 블록 수와 각 블록 유형의 수는 섹션 및 블록 소스에 따라 달라지며 테마의 테마 디자이너가 지정합니다. 예를 들어 테마에 이메일 가입 섹션이 있는 경우 이메일 양식 블록을 하나만 추가할 수 있습니다.
• 중첩을 지원하는 블록은 최대 8개 수준의 중첩 블록을 포함할 수 있습니다.

블록 소스

테마 구조 및 설치한 앱에 따라 테마에 다양한 소스의 블록을 허용하는 여러 섹션이 포함될 수 있습니다. 섹션에 블록을 추가하면 해당 섹션에 사용 가능한 모든 블록이 블록 선택기에 표시됩니다. 테마 및 테마 버전에 따라 테마의 섹션에 다음과 같은 유형의 블록을 추가할 수 있습니다.

• 앱 블록은 테마에 기능을 추가하는 블록입니다. 앱 블록을 사용하여 설치된 앱에서 추가한 테마 영역을 테마 페이지의 특정 영역으로 재배치할 수 있습니다.
• 섹션 블록은 특정 섹션 내에 정의된 블록입니다.
• 테마 모듈은 테마 내에 정의된 블록으로, 중첩과 같은 동적 기능을 가질 수 있습니다.

테마에는 섹션 블록을 사용하는 일부 섹션과 테마 모듈을 사용하는 다른 섹션이 포함될 수 있습니다. 단일 섹션은 테마 모듈 또는 섹션 블록을 허용할 수 있지만 두 가지를 혼합하여 사용할 수는 없습니다.

섹션 내 앱 블록의 사용 가능성은 앱의 기능과 섹션에서 앱 블록을 허용하는지 여부에 따라 달라집니다.

섹션 블록

섹션 블록은 특정 섹션용으로 설계된 블록입니다. 섹션에는 섹션 블록 유형이 제한되거나 추가할 수 있는 특정 유형 블록의 수가 제한될 수 있습니다.

섹션 블록이 있는 섹션의 예

예를 들어 테마에 이메일 가입 섹션이 있다고 가정해 보겠습니다. 이 섹션을 사용하여 고객이 뉴스레터를 구독할 수 있도록 뉴스레터 가입 양식을 추가할 수 있습니다. 이메일 가입 섹션을 추가한 후에는 다음 블록을 각각 하나씩 추가할 수 있습니다.

• 이메일 양식 블록
• 머리글 블록
• 소제목 블록

이메일 양식 블록을 추가하고 블록 추가를 클릭하여 다른 블록을 추가하면 블록 선택기에 이메일 양식 블록이 더 이상 옵션으로 표시되지 않습니다. 이러한 제한은 고객의 이메일을 캡처할 때 발생할 수 있는 문제를 방지하고 고객이 이메일 주소를 쉽게 입력할 수 있도록 합니다.

이메일 가입 섹션에 사용 가능한 세 개의 블록을 모두 추가한 경우, 블록 선택기에는 사용 가능한 모든 블록을 사용했다는 메시지가 표시됩니다.

테마 모듈

테마 모듈은 테마 내에 정의된 블록으로, 중첩과 같은 동적 기능을 가질 수 있습니다. 테마 모듈을 허용하는 섹션은 섹션 구조에 따라 다양한 블록을 허용할 수 있습니다. 테마 모듈을 허용하는 섹션에서는 사용 가능한 모든 테마 모듈, 특정 블록 하위 집합 또는 해당 섹션에 고유한 블록만 허용할 수 있습니다. 또한 테마 모듈에는 다음과 같은 동작이 있을 수 있습니다.

• 일부 블록은 중첩을 지원하므로 최대 8개 수준까지 다른 블록 내에 블록을 중첩할 수 있습니다.
• 일부 섹션에는 필수 블록이 있습니다. 이러한 블록은 맞춤 설정하거나 숨길 수는 있지만 재정렬하거나 삭제할 수는 없습니다.
• 일부 블록은 특정 조건이 충족되면 섹션에 자동으로 표시됩니다.

테마 모듈이 있는 섹션의 예

예를 들어 테마에 테마 모듈이 포함된 슬라이드 쇼 섹션이 있습니다.

테마의 슬라이드 쇼 섹션에서 블록 추가를 클릭하면 블록 선택기에서 슬라이드 블록을 선택할 수 있습니다. 다른 블록 유형은 사용할 수 없습니다. 이미지 배너 섹션과 같은 테마의 다른 섹션에 슬라이드 블록을 추가하려고 하면 슬라이드를 사용할 수 없습니다. 이는 제한된 블록의 한 예입니다.

슬라이드 쇼 섹션에 슬라이드 모듈을 추가한 다음 모듈 추가를 클릭하면 머리글, 이미지, 버튼과 같은 다른 모듈을 슬라이드 쇼 섹션의 모든 슬라이드 모듈에 추가할 수 있습니다. 이러한 모듈은 슬라이드 모듈 안에 중첩됩니다. 이는 중첩된 모듈의 한 예입니다.

슬라이드 쇼 섹션에 두 번째 슬라이드 모듈을 추가하면 테마에서 자동으로 슬라이드 쇼 컨트롤 모듈을 추가합니다. 이 모듈에는 사이트 방문자가 클릭하여 슬라이드 간에 이동할 수 있는 버튼이 표시됩니다. 버튼 스타일을 맞춤 설정하거나 컨트롤을 숨길 수는 있지만 모듈을 제거하거나 삭제할 수는 없습니다. 이것은 조건부로 표시되는 필수 모듈의 예입니다.

테마 모듈 호환성

테마 모듈에 액세스하려면 테마에 테마 모듈을 지원하는 섹션이 있어야 합니다. 테마 코드에서 테마가 테마 모듈을 지원하는지 확인할 수 있습니다. liquid 편집기의 사이드바에 blocks 디렉터리가 있으면 테마 모듈을 지원하는 테마를 사용하고 있는 것입니다. 테마 설명서를 확인할 수도 있습니다.

단계:

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

2. 확인하려는 테마 옆의 버튼을 클릭한 다음 코드 편집을 클릭합니다.

3. 사이드바에서 blocks 폴더를 검색합니다.

   

섹션 및 모듈로 테마 템플릿 맞춤 설정

테마 편집기를 열면 기본적으로 스토어의 홈페이지가 로드됩니다. 드롭다운 메뉴를 사용하여 제품, 컬렉션, 페이지 또는 블로그와 같은 다른 템플릿을 선택하거나 템플릿 드롭다운의 검색 창을 사용하여 특정 템플릿을 검색할 수 있습니다. 템플릿을 선택하면 테마 편집기에 로드되며 변경 사항이 편집기에 미리 보기로 표시됩니다.

섹션 추가

온라인 스토어의 모든 페이지에 새 섹션을 추가합니다.

단계:

섹션 편집

섹션 또는 모듈 재정렬

페이지 템플릿에서 섹션 순서를 변경하고 해당 섹션 내에서 모듈을 재정렬할 수 있습니다. 또한 호환 가능한 모듈을 다른 섹션으로 이동할 수 있습니다. 예를 들어 홈페이지에 두 개의 슬라이드 쇼 섹션이 있는 경우 한 슬라이드 쇼에서 다른 슬라이드 쇼로 슬라이드 모듈을 끌 수 있습니다.

모듈 유형이 호환되지 않거나 섹션의 모듈 수가 최대 한도에 도달한 경우 모듈을 다른 섹션으로 이동할 수 없습니다. 섹션이나 모듈을 잘못된 위치로 이동하려고 하면 원래 위치로 돌아갑니다.

미리 보기 검사기를 사용하여 섹션을 재정렬할 수도 있습니다. 테마 편집기에서 미리 보기 검사기 사용에 대해 자세히 알아보세요.

단계:

섹션 또는 블록 복제

섹션 또는 블록을 복제하여 동일한 사본을 생성할 수 있습니다.

블록을 복제하면 새 블록이 동일한 섹션에 추가됩니다. 블록을 새 섹션으로 이동하거나 블록 순서를 변경하려면 블록을 재정렬할 수 있습니다. 또는 블록을 복사한 다음 다른 섹션에 직접 붙여넣을 수도 있습니다.

블록 복사 및 붙여넣기

여러 섹션에서 동일한 블록을 사용하려는 경우 블록을 쉽게 복사하여 다른 섹션에 붙여넣을 수 있습니다. 동일한 섹션 내에서 블록을 복사하여 붙여넣거나, 대신 블록을 복제할 수도 있습니다. 복제된 블록은 원본 블록의 모든 설정과 콘텐츠를 유지합니다.

단계:

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

2. 편집하려는 테마 옆의 테마 편집을 클릭하십시오.

3. 홈페이지에서 블록을 복사하여 붙여넣으려면 직접 선택하거나 홈페이지 드롭다운 메뉴를 사용하여 편집하려는 섹션 또는 블록이 포함된 특정 템플릿을 선택하십시오.

4. 복제하려는 블록을 마우스 오른쪽 버튼으로 클릭한 다음 복사를 클릭하십시오.

5. 동일한 섹션이나 다른 섹션에서 섹션을 마우스 오른쪽 버튼으로 클릭한 다음 붙여넣기를 클릭하십시오.

6. 저장을 클릭합니다.

섹션 또는 블록 숨기기 또는 삭제

섹션 또는 블록 이름 바꾸기

기본적으로 테마 편집기 사이드바 메뉴 및 설정 세부 정보의 섹션 또는 블록 제목은 “컬렉션” 또는 “텍스트”와 같은 블록 또는 섹션 유형으로 설정됩니다.

블록의 경우 블록 설정에 머리글이나 설명과 같은 텍스트 필드가 포함되어 있으면 해당 텍스트가 사이드바 메뉴의 제목에 추가됩니다. 텍스트 필드가 두 개 이상인 경우 콘텐츠가 있는 첫 번째 텍스트 필드가 추가됩니다. 텍스트 필드의 텍스트를 변경하면 업데이트된 텍스트가 포함되도록 블록 제목이 변경됩니다. 섹션 또는 블록 이름은 비워 둘 수 없습니다.

예를 들어 페이지 템플릿에 열 블록이 포함된 다중 열 섹션을 추가하는 경우를 가정해 보겠습니다. 열 블록에는 기본 텍스트가 열인 머리글 설정과 기본 텍스트가 텍스트와 이미지를 함께 사용하여 선택한 제품, 컬렉션 또는 블로그 게시물에 초점을 맞춥니다.인 설명 설정이 모두 포함됩니다. 기본 섹션 제목은 다중 열입니다. 기본 열 블록 제목은 열 - 열입니다. 머리글 섹션에서 텍스트를 제거하면 블록 제목이 열 - 텍스트와 이미지를 함께 사용...으로 업데이트됩니다.

테마 편집기 사이드바 메뉴의 섹션 또는 블록 설정에서 모든 섹션 또는 블록의 이름을 사용자 지정 이름으로 바꿀 수 있습니다.

단계:

블록 작업

블록은 템플릿의 섹션에 콘텐츠를 추가하는 데 사용하는 사용자 지정 가능한 모듈입니다. 블록을 사용하여 텍스트, 이미지, 링크, 버튼 등을 추가할 수 있습니다.

Shopify 테마에는 사용자 지정할 수 있는 섹션과 블록이 있습니다. 일부 섹션에는 고정된 블록 유형이 있어 테마 디자이너가 해당 섹션에 사용할 수 있도록 설정한 블록 중에서만 선택할 수 있습니다.

다른 섹션에서는 모든 블록을 선택할 수 있지만 섹션에 추가할 수 있는 총 블록 수에는 제한이 있습니다. 섹션이 사용 가능한 최대 블록 수에 도달하면 블록 추가 옵션이 회색으로 표시되어 클릭하거나 탭할 수 없습니다.

검색을 사용하여 이름으로 특정 블록을 찾거나 블록 선택기 드롭다운 메뉴에서 블록을 선택할 수 있습니다. 테마의 블록은 블록 선택기에서 카테고리로 정렬될 수 있습니다. 예를 들어 컬렉션 선택기가 있는 블록은 컬렉션 카테고리에, 이미지 및 동영상 블록은 미디어 카테고리에 있을 수 있습니다.

블록 선택기에 블록 미리 보기가 표시되므로, 블록을 추가하기 전에 해당 블록의 표시 방식을 검토할 수 있습니다.

블록 추가

동적 소스와 함께 메타 필드 및 메타 객체 사용

메타 필드와 메타 객체를 사용하여 온라인 스토어에 동적 정보를 표시할 수 있습니다. 메타 필드를 지원하는 테마가 있는 경우 테마 편집기에서 메타 필드를 호환되는 섹션 또는 블록 설정에 연결할 수 있습니다.

예를 들어, 양초를 판매하는 경우 스토어에서 사용 가능한 각 양초의 연소 시간을 표시할 수 있습니다. Shopify 관리자 설정의 사용자 지정 데이터 섹션에서 연소 시간에 대한 제품 메타 필드를 설정한 후 제품 템플릿의 기본 섹션에 텍스트 블록을 추가할 수 있습니다. 텍스트 블록에서 텍스트 설정의 버튼을 클릭하고 연소 시간 메타 필드를 선택합니다. 이제 제품에 연소 시간 정보가 표시됩니다.

Shopify 테마를 사용하는 경우 테마 편집기를 사용하여 대부분의 메타 필드와 메타 객체를 테마에 연결할 수 있습니다. 다른 테마를 사용하거나 테마에서 지원하지 않는 사용자 지정 데이터 유형을 추가하려면 테마 코드를 편집하거나 Shopify 파트너를 고용하여 도움을 받을 수 있습니다. Shopify 파트너 고용에 대해 자세히 알아보십시오.

모든 섹션이나 블록이 동적 소스를 지원하는 것은 아닙니다. 테마 편집기에서 테마의 아키텍처 버전 및 사용 가능한 맞춤 설정 옵션을 확인하여 테마가 동적 소스를 지원하는지 확인하십시오.

동적 소스를 사용할 수 있는 섹션 또는 블록을 추가하여 온라인 스토어에 동적 정보를 표시할 수 있습니다. 동적 소스는 호환되는 리소스(제품, 컬렉션, 페이지, 블로그, 블로그 게시물)를 표시하는 모든 템플릿, 섹션 또는 블록에서 사용할 수 있습니다. 템플릿에서 연결하려면 먼저 메타 필드를 추가해야 합니다. 테마에서 동적 소스와 함께 메타 필드 및 메타 객체를 사용하는 방법에 대한 자세한 내용은 동적 소스를 참조하십시오.

설정 프로세스를 완료한 후 아래 단계에 따라 버튼을 사용하여 테마의 섹션 또는 블록에 동적 소스를 연결하십시오.

단계:

온라인 스토어에 메타 필드 표시 및 온라인 스토어에 메타 객체 표시에 대해 자세히 알아보십시오.

동적 소스 선택기

동적 소스 선택기를 사용하여 테마 편집기에서 올바른 동적 소스를 직접 연결할 수 있습니다. 동적 소스 선택기의 다음과 같은 주요 기능을 검토하십시오.

• 해당하는 경우 다양한 리소스에서 동적 소스를 참조할 수 있습니다. 예를 들어, 제품 리소스와 페이지 리소스 모두에 연결된 블록에 설정을 연결하는 경우 동적 소스 선택기의 드롭다운 메뉴를 사용하여 제품 또는 페이지 리소스와 연결된 메타 필드를 검색할지 여부를 지정할 수 있습니다.
• 동적 소스 선택기에는 필요한 메타 필드를 찾는 데 도움이 되는 검색 및 필터 기능이 있습니다.
• 동적 소스 선택기를 사용하면 카테고리 메타 필드를 선택할 수 있습니다. 이는 제품에 제품 카테고리를 할당할 때 사용할 수 있게 되는 추가 특성입니다. 이러한 메타 필드에 액세스하면 기본 특성 메타 객체의 모든 관련 필드에 동적 소스를 연결할 수 있습니다.