Page Builder 연습 3부: 카탈로그 콘텐츠

관리자 사이드바에서 Content > Elements>Pages(으)로 이동합니다.

첫 번째 연습에서 만들고 두 번째 연습에서 수정한 단순 페이지 ​를 찾은 다음 Action ​열에서​ Edit ​을(를) 선택합니다.

Content 섹션에서 를 확장하고 Edit with Page Builder 또는 콘텐츠 미리 보기 영역 내부를 클릭합니다.

Layout ​아래의 Page Builder 패널에서​ Row ​을(를) 단계 맨 위로 드래그합니다.

Page Builder 패널에서 Add Content ​을(를) 확장하고 Products 자리 표시자를 새 행으로 드래그합니다.

{width="600" modal="regular"}

빈 제품 컨테이너 위로 마우스를 가져가면 도구 상자를 표시하고 설정( {width="20"} ) 아이콘을 선택합니다.

{width="600" modal="regular"}

Select Products By ​의 경우 Condition을(를) 선택하십시오.

조건 추가:

• 추가( ) 아이콘을 클릭합니다.

• Product Attribute ​에서​ Category ​을(를) 선택합니다.

  {width="600" modal="regular"}

• 자세히(…) 아이콘을 클릭하여 Category is… 조건 부분을 완료한 다음 선택기( ) 아이콘을 클릭합니다.

  {width="600" modal="regular"}

• 범주 트리에서 여성 > 최상위 범주로 드릴다운한 다음 티 확인란을 선택하십시오.

  {width="600" modal="regular"}

• 확인 표시( ) 아이콘을 클릭합니다.

  해당 카테고리 ID가 필드에 표시되어 조건을 완료합니다.

Number of Products to Display 입력.

기본적으로 목록에는 5개의 제품이 표시됩니다.

필요에 따라 나머지 설정을 완료합니다.

필요한 경우 콘텐츠 추가 - 제품 페이지의 끝에 있는 필드 설명을 참조하여 참조하십시오.

완료되면 Save ​을(를) 클릭하여 설정을 저장하고 Page Builder 작업 영역으로 돌아갑니다.

{width="600" modal="regular"}

스테이지의 오른쪽 위 모서리에서 전체 화면 닫기( {width="20"} ) 아이콘을 클릭합니다.

이 아이콘을 클릭하면 미리보기가 표시된 페이지의 Content ​섹션으로 돌아갑니다.

오른쪽 상단 모서리에서 Save 화살표를 클릭하고 Save & Close ​을(를) 선택합니다.

관리자 사이드바에서 Catalog > Products(으)로 이동합니다.

이 예제에 사용할 수 있는 간단한 제품을 찾아 편집 모드로 엽니다.

아래로 스크롤하여 Content 섹션에서 를 확장합니다.

Description ​옆에 있는​ Edit with Page Builder ​을(를) 클릭합니다.

{width="600" modal="regular"}

이전에 Page Builder 없이 제품 설명을 입력한 경우 현재 설명은 HTML 코드 컨테이너에 HTML으로 표시됩니다. Luma 테마를 사용하면 제품 설명이 세부 사항 탭에 표시됩니다.

Layout ​아래의 Page Builder 패널에서​ Row ​을(를) 스테이지로 드래그하여 HTML 코드 컨테이너 아래에 놓습니다.

행이 올바른 위치에 있을 때 빨간색 지침이 나타나는지 확인합니다.

{width="600" modal="regular"}

Page Builder 패널에서 Media ​을(를) 확장하고 Video 자리 표시자를 새 행으로 드래그합니다.

{width="600" modal="regular"}

빈 비디오 컨테이너 위로 마우스를 가져가면 도구 상자를 표시하고 설정( {width="20"} ) 아이콘을 선택합니다.

{width="500" modal="regular"}

Video URL 입력.

비디오는 YouTube 또는 Vimeo에서 호스팅할 수 있습니다. 이 예제의 비디오는 YouTube의 다음 URL에서 찾을 수 있습니다.

https://www.youtube.com/watch?v=ZpFrNyD4100

{width="500" modal="regular"}

비디오 표시에 사용할 Maximum Width ​을(를) 픽셀 단위로 입력하십시오.

이 옵션을 비워 두면 비디오는 사용 가능한 공간을 채웁니다.

설정을 저장하고 Page Builder 작업 영역으로 돌아가려면 Save ​을(를) 클릭합니다.

{width="600" modal="regular"}

스테이지의 오른쪽 위 모서리에서 전체 화면 닫기( {width="20"} ) 아이콘을 클릭합니다.

이 아이콘을 클릭하면 미리보기가 표시된 페이지의 Content ​섹션으로 돌아갑니다.

오른쪽 상단 모서리에서 Save 화살표를 클릭하고 Save & Close ​을(를) 선택합니다.

관리자 사이드바에서 Catalog > Products(으)로 이동합니다.

오른쪽 상단에서 Add Product ​을(를) 클릭합니다.

다음 속성을 사용하여 제품을 만듭니다.

• ​

  속성 세트: Default

• Product Name: 내 제품

• ​

  SKU: Tutorial

• ​

  Price: 75.00

• ​

  Quantity: 100

• Stock Status: 재고 있음

• ​

  Weight: 1

• Categories: 여성 > 위쪽 > 티

오른쪽 상단 모서리에서 Save 화살표를 클릭하고 Save & Close ​을(를) 선택합니다.

관리자 사이드바에서 Stores > Attributes>Product(으)로 이동합니다.

오른쪽 상단에서 Add New Attribute ​을(를) 클릭합니다.

특성에 Default Label ​을(를) 입력하십시오.

이 예제에서는 레이블에 My Page Builder Attribute을(를) 사용합니다.

Catalog Input Type for Store Owner ​을(를) Page Builder(으)로 설정합니다.

사용자 지정 특성을 만들 때 응용 프로그램에 가장 적합한 편집기를 Page Builder 또는 표준 WYSIWYG Text Editor 중 하나로 지정할 수 있습니다.

{width="600" modal="regular"}

Advanced Attribute Properties 섹션에서 를 확장하고 다음 설정을 만듭니다.

• Attribute Code: 공백 대신 하이픈을 사용하여 속성 코드를 소문자로 입력하십시오. 이 예제에서는 my_page_builder_attribute을(를) 사용합니다.

• Scope: 기본값 Store View을(를) 사용합니다.

• Default Value: 특성의 기본값을 입력하십시오.

• ​

  Unique Value: No

• ​

  Add to Column Options: No

• ​

  Use in Filter Options: Yes

왼쪽의 Attribute Information ​패널에서​ Storefront Properties ​을(를) 선택하고 다음 설정을 만듭니다.

• ​

  Use for Promo Rule Conditions: Yes

• ​

  Visible on Catalog Pages on Storefront: Yes

• ​

  Used in Product Listing: Yes

완료되면 Save Attribute ​을(를) 클릭합니다.

이전 단계를 반복하여 다음과 같이 기본 등록 정보가 동일하지만 텍스트 편집기 입력 유형이 있는 두 번째 속성을 만듭니다.

• Default Label: 내 텍스트 편집기 특성

• Catalog Input Type for Store Owner: 텍스트 편집기

• ​

  속성 코드: my_text_editor_attribute

관리자 사이드바에서 Stores > Attributes>Attribute Set(으)로 이동합니다.

이 예제에서는 default 특성 집합에 새 특성을 임시로 추가합니다. 이 연습이 끝나면 속성 집합에서 속성을 제거하므로 카탈로그에 영향을 주지 않습니다.

목록에서 Default ​특성 집합을 찾아 두 번 클릭하여 편집 모드로 엽니다.

미할당 특성 목록에서 새로 만든 특성을 찾아 Content 아래의 Groups ​열로 끌어 옵니다.

Groups 열의 특성 위치에 따라 페이지에서 특성이 나타나는 위치가 결정됩니다.

{width="600" modal="regular"}

특성 집합 목록으로 돌아가려면 Save ​을(를) 클릭합니다.

메시지가 표시되면 페이지 상단에 있는 Cache Management 링크를 클릭하고 잘못된 캐시를 새로 고칩니다.

관리자 사이드바에서 Catalog > Products(으)로 이동합니다.

제품 그리드에서 내 제품 ​을 찾아 편집 모드로 엽니다.

아래로 스크롤하여 Content 섹션에서 를 확장합니다.

섹션의 맨 위에는 제품 콘텐츠에 대한 두 가지 표준 속성이 있습니다.

• 표준 WYSIWYG editor을 사용하는 간단한 설명.
• Page Builder 미리 보기를 표시하는 설명.

{width="600" modal="regular"}

섹션의 하단으로 스크롤할 때 작성 및 할당한 두 가지 속성이 있습니다.

• 내 Page Builder 특성 ​입니다. Page Builder 미리 보기를 표시합니다.
• 표준 WYSIWYG 편집기를 사용하는 내 텍스트 편집기 특성 ​입니다.

{width="600" modal="regular"}

내 텍스트 편집기 특성 편집기에서 Text Editor Attribute placeholder text을(를) 입력하십시오.

• 오른쪽 상단 모서리에서 Save 화살표를 클릭하고 Save & Close ​을(를) 선택합니다.

내 Page Builder 특성 ​에 대해 Edit with Page Builder ​을(를) 클릭하고 설명 텍스트를 추가하십시오.

• Page Builder 패널에서 Elements ​을(를) 확장하고 Text object ​을(를) 스테이지로 드래그합니다.

• Page Builder attribute placeholder text 입력.

• 스테이지의 오른쪽 위 모서리에서 전체 화면 닫기( {width="20"} ) 아이콘을 클릭합니다.

  {width="600" modal="regular"}

Description(으)로 스크롤하고 Edit with Page Builder ​을(를) 클릭한 다음 이전 단계와 동일한 방법을 사용하여 원하는 텍스트를 추가합니다.

제품 페이지의 오른쪽 상단 모서리에서 Save 화살표를 클릭하고 Save & Close ​을(를) 선택합니다.

메시지가 표시되면 페이지 상단에 있는 메시지의 Cache Management 링크를 클릭하고 잘못된 캐시를 새로 고칩니다.

상점 첫 화면에서 샘플 제품 페이지로 이동합니다.

이 예에서 제품은 여성 > 상단 > 티 아래의 상단 탐색에서 찾을 수 있습니다.

내 페이지 빌더 특성 정보로 스크롤합니다.

제품 페이지에서의 속성 위치는 테마에 의해 결정됩니다. Luma 테마에서 새 속성은 제품 설명 바로 뒤에 있습니다.

{width="600" modal="regular"}