메타 필드로 제품 페이지에 팝업 추가하기

메타 필드를 사용하면 Shopify Admin에서 일반적으로 캡처되지 않는 특수한 정보를 저장할 수 있도록 하여 Shopify 스토어의 기능과 모양을 사용자 지정할 수 있습니다. 메타 필드는 Shopify Admin에서 내부적으로 사용할 수 있으며 온라인 스토어에 표시되도록 선택할 수도 있습니다.

메타 필드를 사용하면 제품 페이지에 링크를 표시하는 팝업 블록에 페이지 참조를 추가할 수 있습니다. 링크를 클릭하면 페이지 콘텐츠가 표시되는 팝업이 열립니다. 페이지에 서식있는 텍스트 편집기를 사용하여 이미지 및 기타 미디어를 추가할 수 있습니다.

다음은 제품 페이지에 추가할 수 있는 팝업 정보의 예시입니다.

• 사이즈 표
• 관리 지침
• 조립 지침
• 제품 사양
• 자주 묻는 질문

페이지 참조 메타 필드를 소개하는 이 4단계 튜토리얼은 페이지 참조용 제품 메타 필드를 생성하고, 온라인 스토어용 제품 페이지 템플릿을 생성하고, 새 페이지를 추가하고, 특정 제품의 페이지를 참조하며, 특정 제품에 제품 페이지 템플릿을 적용합니다.

Online Store 2.0 테마를 사용 중인 경우 테마 편집기를 이용해 대부분의 메타 필드를 테마에 연결할 수 있습니다. 빈티지 테마를 사용 중이거나 사용 중인 테마에서 지원하지 않는 메타 필드 유형을 추가하려는 경우 테마 코드를 편집하거나 Shopify 파트너를 고용할 수 있습니다.

1단계: 페이지용 제품 메타 필드 생성

시작하려면 제품 페이지에 대한 페이지 참조 메타 필드 정의를 생성해야 합니다. 제품 메타 필드는 특정 페이지로 연결되며 각 제품에 맞게 사용자 지정될 수 있습니다. 동일한 템플릿을 사용하는 제품에 페이지 참조를 추가하지 않은 경우 팝업 링크 텍스트는 내용이 있는 것으로 계속 표시됩니다. 특정 제품에 팝업 링크만 표시하려면 제품 템플릿을 생성하고 관련 제품에만 적용할 수 있습니다.

페이지 참조 메타 필드를 사용하면 다양한 유형의 제품에 페이지를 다르게 생성하여 다양한 제품 정보를 표시할 수 있습니다. 예를 들어, 유아 사이즈 표와 영어 사이즈 표 등의 두 가지 연령대에 대해 사이즈 표 페이지 두 개를 다르게 생성한 다음 유아용 제품에만 유아 사이즈에 대한 페이지 참조를 추가할 수 있습니다.

테마 편집기 내 팝업 블록에 연결하려면 페이지 참조에 대한 메타 필드 정의를 생성해야 합니다. 메타 필드 정의를 생성할 때 상점 액세스가 기본적으로 선택됩니다.

단계:

데스크톱

1. Shopify 관리자에서 설정 > 사용자 지정 데이터로 이동합니다.
2. 메타 필드 정의 섹션에서 제품을 클릭합니다.
3. 정의 추가를 클릭합니다.
4. 이름 필드에서 메타 필드 정의의 이름을 지정합니다. 예를 들어 사이즈 표를 생성하는 경우 정의의 이름을 사이즈 표로 지정할 수 있습니다.
5. ⊕ 유형 선택을 클릭합니다.
6. 드롭다운 메뉴에서 페이지를 선택합니다. 기본적으로 한 페이지가 선택됩니다.
7. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … > 설정을 탭합니다.
2. 사용자 지정 데이터를 탭합니다.
3. 메타 필드 정의 섹션에서 제품을 탭합니다.
4. +를 탭합니다.
5. 정의의 이름을 지정합니다. 예를 들어 사이즈 표를 생성하는 경우 정의의 이름을 사이즈 표로 지정할 수 있습니다.
6. + 유형 선택을 탭합니다.
7. 탭하여 드롭다운 메뉴에서 페이지를 선택합니다. 기본적으로 한 페이지가 선택됩니다.
8. 저장을 탭합니다.

Android

1. Shopify 앱에서 ☰ > 설정을 탭합니다.
2. 사용자 지정 데이터를 탭합니다.
3. 메타 필드 정의 섹션에서 제품을 탭합니다.
4. +를 탭합니다.
5. 정의의 이름을 지정합니다. 예를 들어 사이즈 표를 생성하는 경우 정의의 이름을 사이즈 표로 지정할 수 있습니다.
6. + 유형 선택을 탭합니다.
7. 탭하여 드롭다운 메뉴에서 페이지를 선택합니다. 기본적으로 한 페이지가 선택됩니다.
8. ✓를 탭하여 저장합니다.

2단계: 제품 페이지 템플릿 생성

Online Store 2.0 테마를 사용 중인 경우 테마 편집기를 이용해 페이지 참조를 테마에 연결할 수 있습니다. 빈티지 테마를 사용 중이거나 사용 중인 테마에서 지원하지 않는 메타 필드 유형을 추가하려는 경우 테마 코드를 편집하거나 Shopify 파트너를 고용할 수 있습니다.

섹션 또는 블록을 추가한 다음 동적 소스 아이콘을 클릭하여 메타 필드를 선택할 수 있습니다.

모든 제품에 팝업 블록을 추가하지 않으려면 새 제품 페이지 템플릿을 생성해야 합니다. 이 단계에서는 새 제품 페이지 템플릿을 생성하지만 대신 기존 제품 페이지 템플릿을 선택하여 사용자 지정할 수도 있습니다.

단계:

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
2. 사용자 지정하려는 테마 옆의 사용자 지정을 클릭합니다.
3. 편집기 상단에 있는 홈페이지 드롭다운 메뉴에서 제품을 클릭한 다음 ⊕ 템플릿 생성을 클릭하여 새 템플릿을 생성하고 사용자 지정합니다.
4. 섹션 탐색 사이드바에서 템플릿 > 제품 정보 블록으로 이동한 다음 ⊕ 블록 추가를 클릭합니다.
5. 팝업을 클릭합니다.
6. 링크 레이블을 입력합니다. 이것은 고객이 팝업 페이지 콘텐츠에서 클릭한 내용을 표시하는 텍스트입니다. 예를 들어 팝업 페이지가 사이즈 표인 경우 링크 레이블을 사이즈 표로 지정할 수 있습니다.
7. 페이지 옆에서 동적 소스 아이콘을 클릭한 다음 생성한 페이지 참조 메타 필드를 클릭하여 선택합니다.
8. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … > 온라인 스토어를 탭합니다.
2. 모든 테마 관리를 탭합니다.
3. 사용자 지정하려는 테마 옆의 사용자 지정을 탭합니다.
4. 편집기 상단에 있는 홈페이지 드롭다운 메뉴에서 제품을 탭한 다음 ⊕ 템플릿 생성을 탭하여 새 템플릿을 생성하고 사용자 지정합니다.
5. 섹션 탐색 사이드바에서 템플릿 > 제품 정보 블록으로 이동한 다음 ⊕ 블록 추가를 탭합니다.
6. 팝업을 탭합니다.
7. 링크 레이블을 입력합니다. 이것은 고객이 팝업 페이지 콘텐츠에서 클릭한 내용을 표시하는 텍스트입니다. 예를 들어 팝업 페이지가 사이즈 표인 경우 링크 레이블을 사이즈 표로 지정할 수 있습니다.
8. 페이지 옆에서 동적 소스 아이콘을 탭한 다음 생성한 페이지 참조 메타 필드를 탭하여 선택합니다.
9. 저장을 탭합니다.

Android

1. Shopify 앱에서 ☰ > 온라인 스토어를 탭합니다.
2. 모든 테마 관리를 탭합니다.
3. 사용자 지정하려는 테마 옆의 사용자 지정을 탭합니다.
4. 편집기 상단에 있는 홈페이지 드롭다운 메뉴에서 제품을 탭한 다음 ⊕ 템플릿 생성을 탭하여 새 템플릿을 생성하고 사용자 지정합니다.
5. 섹션 탐색 사이드바에서 템플릿 > 제품 정보 블록으로 이동한 다음 ⊕ 블록 추가를 탭합니다.
6. 팝업을 탭합니다.
7. 링크 레이블을 입력합니다. 이것은 고객이 팝업 페이지 콘텐츠에서 클릭한 내용을 표시하는 텍스트입니다. 예를 들어 팝업 페이지가 사이즈 표인 경우 링크 레이블을 사이즈 표로 지정할 수 있습니다.
8. 페이지 옆에서 동적 소스 아이콘을 탭한 다음 생성한 페이지 참조 메타 필드를 탭하여 선택합니다.
9. ✓를 탭하여 테마를 저장합니다.

3단계: 제품 정보가 포함된 페이지 추가

메타 필드가 참조하는 콘텐츠가 있는 페이지를 생성해야 합니다. 페이지를 이미 생성한 경우 4단계로 건너뛸 수 있습니다.

단계:

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 페이지로 이동합니다.
2. 페이지 추가를 클릭합니다.
3. 페이지의 이름을 지정하고 제품 페이지의 팝업에 표시할 콘텐츠를 생성합니다.
4. 표시 유형 섹션에서 페이지를 표시됨으로 설정합니다.
5. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 … > 온라인 스토어를 탭합니다.
2. 페이지를 탭합니다.
3. 페이지 추가를 탭합니다.
4. 페이지의 이름을 지정하고 제품 페이지의 팝업에 표시할 콘텐츠를 생성합니다.
5. 표시 유형 섹션에서 페이지를 표시됨으로 설정합니다.
6. 저장을 탭합니다.

Android

1. Shopify 앱에서 ☰ > 온라인 스토어를 탭합니다.
2. 페이지를 탭합니다.
3. 페이지 추가를 탭합니다.
4. 페이지의 이름을 지정하고 제품 페이지의 팝업에 표시할 콘텐츠를 생성합니다.
5. 표시 유형 섹션에서 페이지를 표시됨으로 설정합니다.
6. ✓를 탭하여 저장합니다.

메타 필드에서 참조할 페이지를 필요한 수만큼 생성할 수 있습니다. 그러나 제품 메타 필드에서 한 페이지만 연결할 수 있습니다.

4단계: 페이지를 참조하여 특정 제품에 제품 템플릿을 적용

특정 제품에 페이지 참조를 추가하면 해당 페이지의 정보는 해당 제품에만 표시됩니다. 해당 제품 템플릿을 사용하는 제품에 대한 페이지 참조를 비워 두면 링크 텍스트는 계속 링크로 표시됩니다. 그러나 팝업은 페이지 참조 없이 비어 있으며 고객에게 혼동을 줄 수 있습니다. 이 경우 특정 제품 유형에 대해 다른 제품 페이지 템플릿을 사용할 수 있습니다. 예를 들어, 팝업 블록에 사이즈 표 페이지가 있는 의류용 제품 템플릿을 생성한 다음 팝업 블록을 추가할 필요가 없는 가방용 제품 템플릿을 생성할 수 있습니다.

템플릿에 대해 자세히 알아보세요.

단계:

데스크톱

1. Shopify 관리자에서 제품으로 이동합니다.
2. 페이지 참조를 추가할 제품을 클릭합니다.
3. 제품 메타 필드 섹션에서 생성한 페이지 참조 메타 필드를 클릭한 다음 페이지 선택을 클릭합니다.
4. 드롭다운 메뉴에서 생성한 페이지를 선택합니다.
5. 테마 템플릿 섹션에서, 2단계에서 생성한 제품 페이지 템플릿을 선택합니다.
6. 저장을 클릭합니다.

iPhone

1. Shopify 앱에서 제품 > 모든 제품으로 이동합니다.
2. 페이지 참조를 추가할 제품을 탭합니다.
3. 메타 필드 섹션에서 모두 보기를 탭합니다.
4. 생성한 페이지 참조 메타 필드를 탭한 다음 생성한 페이지를 탭하여 선택합니다.
5. 테마 템플릿 섹션에서, 2단계에서 생성한 제품 페이지 템플릿을 선택합니다.
6. 저장을 탭합니다.

Android

1. Shopify 앱에서 제품 > 모든 제품으로 이동합니다.
2. 페이지 참조를 추가할 제품을 탭합니다.
3. 메타 필드 섹션에서 모두 보기를 탭합니다.
4. 생성한 페이지 참조 메타 필드를 탭한 다음 생성한 페이지를 탭하여 선택합니다.
5. 테마 템플릿 섹션에서, 2단계에서 생성한 제품 페이지 템플릿을 선택합니다.
6. ✓를 탭하여 저장합니다.

필요한 제품 수만큼 이 단계를 반복할 수 있습니다.