제품 페이지에 팝업 사이즈 차트 추가하기

메타 필드를 사용하면 Shopify 관리자에서 일반적으로 포착되지 않는 특수 정보를 저장하여 Shopify 스토어의 기능과 디자인을 사용자 지정할 수 있습니다. 메타 필드는 Shopify 관리자 내부용으로 사용하거나 온라인 스토어에 표시할 수도 있습니다.

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

제품 페이지에 추가할 수 있는 팝업 정보의 몇 가지 예는 다음과 같습니다.

사이즈 차트
관리 지침
조립 설명서
제품 사양
자주 묻는 질문

이 4단계 튜토리얼에서는 페이지 참조 메타 필드 소개, 페이지 참조를 위한 제품 메타 필드 생성, 온라인 스토어용 제품 페이지 템플릿 생성, 새 페이지 추가, 특정 제품에서 페이지 참조, 특정 제품에 제품 페이지 템플릿 적용에 대해 설명합니다. 이 튜토리얼을 사용하여 팝업에 원하는 콘텐츠를 만들 수 있습니다. 이 튜토리얼 전체에서 사이즈 차트 예시를 사용합니다.

이 튜토리얼을 사용하려면 동적 소스를 지원하는 테마가 필요합니다. 빈티지 테마를 사용 중이거나 테마에서 지원하지 않는 메타 필드 유형을 추가하려는 경우 테마 코드를 편집하거나 Shopify 파트너를 고용할 수 있습니다.

이 페이지의 내용

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

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

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

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

단계:

데스크톱

Shopify 관리자에서 설정 > 메타 필드 및 메타 개체로 이동합니다.
메타 필드 정의 섹션에서 제품을 클릭합니다.
정의 추가를 클릭합니다.
이름 필드에 사이즈 차트를 입력합니다.
⊕ 유형 선택을 클릭합니다.
드롭다운 메뉴에서 페이지를 선택합니다. 기본적으로 한 페이지가 선택됩니다.
저장을 클릭합니다.

모바일

Shopify 앱에서 을(를) 탭한 후 설정을 탭합니다.
스토어 설정 섹션에서 메타필드 및 메타객체를 탭합니다.
메타 필드 정의 섹션에서 제품을 탭합니다.
+를 탭합니다.
이름 필드에 사이즈 차트를 입력합니다.
+ 유형 선택을 탭합니다.
드롭다운 메뉴에서 페이지를 탭하여 선택합니다. 기본적으로 한 페이지가 선택됩니다.
저장 또는 ✓를 탭합니다.

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

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

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

단계:

데스크톱

Shopify 관리자에서 **온라인 스토어** > **테마**로 이동합니다.
사용자 지정할 테마 옆에 있는 **테마 편집**을 클릭합니다.
편집기 상단의 **홈페이지** 드롭다운 메뉴에서 **제품**을 클릭한 다음 **⊕ 템플릿 생성**을 클릭하여 새 템플릿을 생성하고 사용자 지정합니다.
섹션 탐색 사이드바에서 **템플릿** > **제품 정보** 블록으로 이동한 다음 **⊕ 블록 추가**를 클릭합니다.
**팝업**을 클릭합니다.
**링크 레이블** 필드에 사이즈 차트를 입력합니다. 이 텍스트는 고객이 팝업 페이지 콘텐츠를 보기 위해 클릭하는 텍스트입니다.
**페이지** 옆의 동적 소스 아이콘을 클릭한 다음, 생성한 페이지 참조 메타 필드를 클릭하여 선택합니다.
저장을 클릭합니다.

모바일

Shopify 앱에서 아이콘을 탭합니다.
판매 채널 섹션에서 온라인 스토어 > 모든 테마 관리를 탭합니다.
사용자 지정할 테마의 **테마 편집**을 탭합니다.
편집기 상단의 **홈페이지** 드롭다운 메뉴에서 **제품**을 탭한 다음 **⊕ 템플릿 생성**을 탭하여 새 템플릿을 생성하고 사용자 지정합니다.
섹션 탐색 사이드바에서 **템플릿** > **제품 정보** 블록으로 이동한 다음 **⊕ 블록 추가**를 탭합니다.
**팝업**을 탭합니다.
**링크 레이블** 필드에 사이즈 차트를 입력합니다. 이 텍스트는 고객이 팝업 페이지 콘텐츠를 보기 위해 클릭하는 텍스트입니다.
**페이지** 옆의 동적 소스 아이콘을 탭한 다음, 생성한 페이지 참조 메타 필드를 탭하여 선택합니다.
저장 또는 ✓를 탭합니다.

3단계: 사이즈 차트가 포함된 페이지 추가

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

단계:

데스크톱

Shopify 관리자에서 **온라인 스토어** > **페이지**로 이동합니다.
**페이지 추가**를 클릭합니다.
**제목** 필드에 사이즈 차트를 입력한 다음 **콘텐츠**에 사이즈 차트 정보를 추가합니다.
**공개 상태** 섹션에서 페이지를 **표시**로 설정합니다.
저장을 클릭합니다.

모바일

Shopify 앱에서 아이콘을 탭합니다.
**판매 채널** 섹션에서 **온라인 스토어** > **페이지**를 탭합니다.
**페이지 추가**를 탭합니다.
**제목** 필드에 사이즈 차트를 입력한 다음 **콘텐츠**에 사이즈 차트 정보를 추가합니다.
**공개 상태** 섹션에서 페이지를 **표시**로 설정합니다.
저장 또는 ✓를 탭합니다.

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

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

특정 제품에 페이지 참조를 추가하면 해당 페이지의 정보가 그 제품에만 표시됩니다. 제품 템플릿을 사용하는 제품의 페이지 참조를 비워 둘 경우, 링크 텍스트는 계속 링크로 표시되지만 팝업에는 페이지 참조가 없어 비어 있게 되므로 고객에게 혼란을 줄 수 있습니다. 의류나 신발처럼 사이즈 차트가 있는 특정 제품 유형에는 별도의 제품 페이지 템플릿을 사용하고, 아동용 장난감이나 주얼리, 기타 액세서리 같은 다른 제품 유형에는 다른 제품 템플릿을 사용하는 것이 좋습니다.

템플릿에 대해 자세히 알아보십시오.

단계:

데스크톱

Shopify 관리자에서 **제품**으로 이동합니다.
페이지 참조를 추가할 제품을 클릭합니다.
**제품 메타 필드** 섹션에서 사이즈 차트 페이지 참조를 클릭한 다음, **페이지 선택**을 클릭하고 사이즈 차트 페이지를 선택합니다.
**테마 템플릿** 섹션에서 2단계에서 생성한 사이즈 차트 제품 페이지 템플릿을 선택합니다.
저장을 클릭합니다.

모바일

Shopify 앱에서 아이콘을 탭합니다.
페이지 참조를 추가할 제품을 탭합니다.
**제품 메타 필드** 섹션에서 사이즈 차트 페이지 참조를 탭한 다음 **페이지 선택**을 탭하고 사이즈 차트 페이지를 선택합니다.
**테마 템플릿** 섹션에서 2단계에서 생성한 사이즈 차트 제품 페이지 템플릿을 선택합니다.
저장 또는 ✓를 탭합니다.

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