첫 번째 Shopify 테마 섹션을 만드는 방법

특히 고객이 자신의 매장을 사용자 정의할 수 있는 기능을 원할 때 고객에게 창의적인 제어 기능을 제공하는 것이 중요합니다. Shopify의 섹션 기능은 Shopify 테마를 개인화할 수 있는 강력한 도구이므로 이를 효율적으로 사용하고 모범 사례를 따르면 클라이언트를 위한 다양한 옵션이 잠금 해제됩니다.

처음부터 Shopify 테마를 구축하거나 고객을 위해 테마를 조정하는 경우 컨텍스트에 따라 달라지는 몇 가지 다른 유형의 섹션을 생성해야 합니다. 또한 고객은 사용자 친화적이고 직관적인 경험을 기대합니다. 즉, 올바른 섹션이 올바른 위치에 있으면 전환에 큰 영향을 미칠 수 있습니다.

이 기사에서는 다양한 유형의 테마 섹션 생성을 시작하는 방법과 이를 사용하는 규칙을 다루어 클라이언트가 스토어를 사용자 지정할 수 있도록 지원합니다. 또한 소스에서 사용 가능한 Dawn 테마의 특정 섹션에 대한 몇 가지 예를 살펴보고 실제 시나리오에서 사용할 수 있는 방법을 정확하게 보여줍니다.

테마 섹션이란 무엇입니까?

높은 수준에서 섹션은 판매자가 사용자 지정할 수 있는 Shopify 테마의 모듈식 구성 요소입니다. 섹션에는 제품 페이지의 기본 요소 또는 슬라이드쇼 구성 요소와 같은 Shopify 스토어의 특정 영역에 대한 콘텐츠 및 설정이 포함되어 있습니다.

이 섹션 내에서 개발자는 텍스트 입력 및 이미지 선택기에서 사용자 정의 HTML 및 메뉴에 이르기까지 다양한 설정 유형에 액세스할 수 있으며 판매자는 테마 편집기에서 사용자 정의하고 콘텐츠로 채울 수 있습니다.

섹션은 테마의 /sections 디렉토리에 포함되며 테마의 레이아웃 파일(예: 머리글 및 바닥글)에 정적으로 포함되거나 테마 편집기에서 모든 템플릿에 동적으로 추가될 수 있습니다. 섹션으로 표시될 수 있는 다양한 구성 요소를 이해하려면 Dawn 테마의 /sections 디렉토리를 탐색할 수 있습니다.

Online Store 2.0이 출시되면서 이제 섹션을 전체 페이지에서 개별 요소에 이르기까지 테마의 모든 다양한 측면을 구성하는 기본 방법으로 사용할 수 있습니다. 이 기사에서 다룰 것처럼 JSON 템플릿에 섹션을 추가하는 기능을 사용하면 다양한 페이지를 쉽게 정렬할 수 있으며 판매자가 테마를 사용자 지정할 때 더욱 향상될 수 있습니다.

템플릿 및 섹션

섹션이 Shopify 테마에서 작동하는 방식을 배우기 위한 전제 조건 중 하나는 Shopify의 테마 템플릿 시스템을 이해하는 것입니다. 온라인 스토어 2.0에서는 각 페이지 유형을 테마의 /templates 디렉터리 내에서 .json 파일로 나타낼 수 있습니다. 개발자는 이러한 JSON 템플릿 파일에 기본적으로 표시될 섹션을 정의하여 각 페이지 유형을 구성할 수 있습니다.

이러한 JSON 템플릿에는 스토어 콘텐츠를 표시하기 위한 마크업 또는 Liquid 개체가 포함되어 있지 않으며 페이지에 기본적으로 어떤 섹션이 어떤 순서로 표시되는지 나타내는 데이터 파일일 뿐입니다.

product.json 템플릿 파일의 기본 예는 다음과 같습니다.

이 경우 제품 페이지는 main-product.liquid 라는 섹션으로 렌더링되며 기본적으로 표시되는 유일한 섹션입니다. 판매자가 이 페이지를 사용자 지정하고 페이지에 더 많은 섹션을 추가하면 product.json 템플릿 파일이 이 정보로 업데이트됩니다. 섹션이 템플릿에 포함되는 방식을 살펴볼 때 이 문서에서 이 프로세스를 더 자세히 살펴보겠습니다.

섹션의 기초

섹션 및 JSON 템플릿을 사용하여 테마를 개발할 때 "기본" 페이지 섹션과 개별 모듈 구성 요소라는 두 가지 범주로 섹션 파일을 구축하는 것을 고려할 수 있습니다.

메인 페이지 섹션

기본 페이지 섹션 내에서 해당 페이지의 모든 기본 콘텐츠를 포함해야 합니다. 예를 들어 제품 페이지의 기본 섹션에 제품을 표시하는 중요한 요소와 제품 제목, 설명, 미디어, 가격, 장바구니에 담기 양식과 같은 관련 속성을 포함합니다.

섹션이 포함된 페이지 템플릿에 따라 섹션 내에서 Liquid 변수 또는 개체에 액세스할 수 있습니다. 즉, product.json 템플릿 내에서 렌더링될 섹션은 product Liquid의 모든 특성에 액세스할 수 있습니다. 페이지가 렌더링되는 제품을 나타내는 개체입니다.

마찬가지로 collection.json 파일에 포함된 섹션은 collection Liquid 개체의 모든 특성에 액세스할 수 있습니다. 모든 섹션은 나타나는 위치에 관계없이 모든 Liquid 전역 개체에 액세스할 수 있습니다.

기본 페이지 섹션에 추가할 마크업 및 페이지별 액체 개체 외에도 {% schema %} 태그 내에서 설정을 만들 수도 있습니다. 이러한 설정은 섹션의 요소를 참조할 수 있으며 테마 편집기에서 판매자가 구성할 수 있습니다.

기본 페이지 섹션에는 한 가지 유형의 페이지에 특정한 마크업이 포함되어 있으므로 연결된 템플릿에만 포함하는 것이 좋습니다. 기본 페이지 섹션이 테마 편집기에서 다른 페이지 유형에 추가되지 않도록 하려면 해당 섹션 스키마 내에 사전 설정을 포함하지 않아야 합니다.

기본 페이지 섹션의 예를 보려면 Dawn의 /sections 디렉토리에 있는 main-product.liquid 파일 또는 제목에 main 접두사가 있는 섹션을 탐색할 수 있습니다. 일반적으로 다른 섹션 유형을 구별하는 데 도움이 되도록 제목에 main 을 포함하여 메인 페이지 섹션의 이름을 지정해야 합니다.

모듈식 섹션

모듈식 섹션은 온라인 상점의 다른 영역에서 재사용할 수 있는 섹션이며 페이지의 주요 요소를 보완합니다. 이러한 섹션 유형의 예로는 추천 컬렉션, 슬라이드쇼 및 뉴스레터 가입 양식이 있습니다.

이러한 섹션은 기본적으로 페이지 템플릿에 추가되는 섹션이 아니라 일반적으로 테마 편집기를 사용하여 판매자가 페이지에 추가합니다. 편집기를 통해 페이지에 섹션을 추가하려면 해당 섹션의 스키마 내에 사전 설정이 포함되어 있어야 합니다. 이러한 사전 설정이 추가되면 판매자가 테마 편집기에서 섹션 추가 를 클릭할 때 섹션이 사용 가능한 옵션이 됩니다.

"기본" 페이지 섹션과 달리 모듈식 섹션에는 일반적으로 Shopify 스토어에서 다양한 페이지 유형과 다양한 컨텍스트에서 재사용할 수 있는 콘텐츠 및 마크업이 포함되어 있습니다. 따라서 개발자는 이러한 섹션 내에서 페이지별 Liquid 개체에 의존하지 않아야 합니다.

그러나 섹션 스키마 내의 templates 특성을 사용하여 특정 페이지 유형에서만 사용할 수 있도록 섹션을 제한할 수 있습니다. 예를 들어 섹션을 제품 및 컬렉션 페이지로만 제한하려는 경우 섹션의 schema 태그 내에 다음 줄을 포함합니다.

 "templates": ["product", "collection"]

templates 속성은 페이지 유형을 나타내는 문자열 목록을 허용합니다.

테마에 포함하려는 기능 또는 클라이언트의 특정 요구 사항에 따라 고유한 기능을 사용할 수 있는 다양한 섹션을 만들 수 있습니다. 모듈식 섹션의 예를 보려면 Dawn에서 사용되는 뉴스레터 섹션 또는 서식 있는 텍스트 섹션을 탐색할 수 있습니다.

섹션 설정

판매자가 액세스할 수 있는 사용자 지정 옵션을 만드는 데 섹션 파일의 설정을 사용하는 방법을 간략하게 살펴봤지만 구성 방법을 알아보기 위해 좀 더 자세히 살펴보겠습니다.

우리가 본 것처럼 설정은 테마 편집기의 UI에서 렌더링해야 하는 설정임을 나타내는 {% schema %} 태그 내부의 섹션 파일 내에 포함됩니다. 이에 대한 매우 간단한 예는 다음과 같은 사용자 지정 텍스트 섹션에서 볼 수 있습니다.

이 예제에는 제목 요소와 단락 요소라는 두 개의 HTML 요소가 있습니다. 이러한 각 요소에는 section.settings Liquid 개체로 만든 동적 콘텐츠가 포함되어 있습니다. 이 섹션 개체를 사용하면 설정의 고유 ID를 참조하여 설정 값을 검색할 수 있습니다.

HTML 및 Liquid 마크업 아래에는 {% schema %} 태그에 포함된 섹션 설정이 있습니다. 각 설정은 개체로 표시되며 여기서 설정 id , 해당 type 및 편집기에 표시되는 방식을 정의할 수 있습니다. Liquid에서 섹션의 설정에 액세스하려면 섹션의 id 를 section.settings 액체 개체에 추가하십시오. 또한 설정 유형과 테마 편집기에 표시되는 방식을 정의합니다.

스키마 태그 설정 내에서:

• id 는 정의되는 Liquid 변수를 나타냅니다.
• type 우리가 생성하는 출력의 종류를 정의합니다.
• label 은 테마 편집기에 표시되는 컨텍스트를 제공합니다.
• default 는 기본값을 할당합니다.

이 예에서는 제목을 위한 text richtext 를 만들었지만 클라이언트 요구 사항에 따라 다양한 출력 유형을 추가할 수 있습니다. 다른 유효한 입력 유형에는 image_picker , radio , video_url 및 font_picker 있습니다.

이 예는 이제 유효한 섹션이지만 테마에서 섹션이 정확히 어디에 표시되는지 결정하는 한 가지 핵심 측면이 누락되었습니다. 나중에 섹션을 포함하는 몇 가지 다른 접근 방식을 살펴보겠지만 지금은 섹션에서 사전 설정을 만들어 테마 편집기를 통해 모든 페이지에 섹션을 추가할 수 있습니다.

사전 설정은 섹션의 기본 구성이며 섹션의 {% schema %} 태그 내에 추가됩니다. 간단한 예에서 사전 설정은 다음과 같습니다.

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

예제에 추가되면 사용자 지정 텍스트 상자 섹션은 다음과 같습니다.

이제 테마 편집기로 이동하고 아무 페이지에서나 섹션 추가 를 선택하면 이 섹션이 사용 가능한 옵션으로 나타납니다. 우리가 만든 섹션 설정은 추가한 레이블 및 기본 텍스트와 함께 오른쪽 사이드바에 표시되며 섹션에 표시될 입력 텍스트 설정을 채울 수 있습니다.

이것은 섹션 설정과 섹션 내에서 생성할 수 있는 변수 간의 관계와 이러한 설정이 테마 편집기에서 렌더링되는 방식을 보여주는 간단한 예입니다. 고급 모델의 경우 Dawn 테마의 서식 있는 텍스트 섹션을 탐색할 수 있습니다.

페이지에 섹션 포함

이미 언급한 것처럼 테마 페이지에 섹션을 포함하는 방법에는 여러 가지가 있습니다. 이러한 각 접근 방식을 개별적으로 살펴보고 적용되는 몇 가지 규칙을 살펴보겠습니다.

1. JSON 템플릿에 섹션 포함

기본 페이지 섹션을 살펴보면 JSON 템플릿 파일이 해당 페이지 유형의 기본 섹션이 되는 "main" 속성을 허용하고 해당 페이지에 대한 모든 중요한 콘텐츠 요소를 포함해야 한다는 것을 알았습니다.

"main" 섹션 외에도 해당 페이지 유형에 기본적으로 표시되는 JSON 템플릿에 다른 섹션을 포함할 수도 있습니다. 예를 들어 제품 JSON 템플릿을 사용하는 경우 "main" 섹션 아래에 새 개체를 추가하여 페이지에 제품 추천 섹션을 포함할 수 있습니다.

이 경우 섹션에 이름을 할당하고, recommendations 를 지정하고 type 속성을 사용하여 /sections 디렉터리에서 포함하려는 파일을 식별합니다.

이 JSON 템플릿은 둘 이상의 섹션을 참조하므로 order 개체 내에서 섹션이 순차적으로 표시되는 방식을 정의해야 합니다. JSON 템플릿에 포함된 모든 섹션에는 기본 순서가 지정되어야 하지만 판매자는 여전히 테마 편집기에서 섹션을 재정렬할 수 있습니다.

JSON 템플릿에 추가된 사전 설정이 없는 섹션은 테마 편집기에서 제거할 수 없지만 판매자가 필요로 하지 않는 경우 숨길 수 있습니다. JSON 템플릿에서 섹션을 정렬하는 방법에 대한 실제 예를 보려면 Dawn 제품 템플릿을 탐색할 수 있습니다.

2. 모든 페이지에 섹션을 옵션으로 포함

사용자 지정 텍스트에서 본 것처럼 schema 설정 내에 presets 이 있는 경우 테마의 모든 페이지에서 섹션을 사용할 수 있습니다.

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

이 접근 방식을 사용하여 포함된 경우 이러한 섹션을 테마 편집기에서 추가, 재배치 및 삭제할 수 있습니다. 이러한 섹션은 templates 속성을 사용하여 특정 페이지로 제한할 수도 있습니다.

이 끌어서 놓기 기능은 사용자 지정 동적 섹션을 만들 때 상점을 개인화하기 위한 다양한 옵션이 잠금 해제됨을 의미합니다. 비디오, 제품 또는 이미지 갤러리를 위한 이동 가능한 섹션을 만들 수 있습니다. 이 방법을 사용하는 섹션의 좋은 예는 Dawn의 뉴스레터 섹션입니다.

3. {% section %} 태그를 사용하여 정적 섹션 추가

유동 section 태그를 사용하면 유동 레이아웃 또는 템플릿 파일의 /sections 디렉토리에서 섹션을 렌더링할 수 있습니다. 이 태그는 다음과 같이 나타날 수 있습니다.

 {% section 'header' %}

이 section 태그를 사용하여 추가된 섹션은 테마 편집기에서 제거하거나 위치를 변경하거나 숨길 수 없습니다. 페이지에서 이 섹션의 위치는 레이아웃 파일 또는 템플릿 내에서 추가된 위치에 따라 잠깁니다.

이 접근 방식은 머리글, 바닥글 및 알림 표시줄과 같이 항상 표시되어야 하는 콘텐츠 및 구성 요소에 가장 일반적으로 사용됩니다. 이에 대한 예를 Dawn에서 보려면 정적 알림 표시줄, 머리글 섹션 및 바닥글 섹션이 section 태그로 추가된 theme.liquid 파일을 확인할 수 있습니다.

창의력 강화

이제 섹션을 만들고 테마에 추가하는 방법을 살펴보았으므로 클라이언트 매장을 위한 끝없는 옵션을 구축할 수 있습니다.

JSON 템플릿으로 작업하면 테마의 모든 페이지에 대한 섹션의 기능이 잠금 해제되어 판매자가 귀하의 지시에 따라 정확히 원하는 방식으로 매장을 구축할 수 있습니다.