Page Builder 3부: 카탈로그 컨텐츠

다음에서 관리자 사이드바, 이동 Content > Elements>Pages.

다음 찾기 단순 페이지 첫 번째 연습에서 만들고 두 번째 연습에서 수정한 후에 Edit 다음에서 Action ​열.

확장 다음 Content 섹션 및 클릭 Edit with Page Builder 또는 콘텐츠 미리 보기 영역 내부에 있습니다.

다음에서 Page Builder 패널 아래 Layout, 드래그​ 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 테마를 사용하면 제품 설명이 세부 사항 탭에 표시됩니다.

다음에서 Page Builder 패널 아래 Layout, 드래그​ 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 비디오 디스플레이용 픽셀 단위.

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

클릭 Save 설정을 저장하고 Page Builder 작업 영역.

{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 ​목록에 설정된 속성을 두 번 클릭하여 편집 모드로 엽니다.

다음에서 지정되지 않은 속성 목록에서 만든 새 속성을 찾아 각 속성을 Groups ​열, 아래​ Content.

에서 속성의 위치 Groups 열은 페이지에 표시되는 위치를 결정합니다.

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

클릭 Save 속성 세트 목록으로 돌아갑니다.

메시지가 표시되면 Cache Management 페이지 맨 위에 있는 를 연결하고 잘못된 캐시를 새로 고칩니다.

다음에서 관리자 사이드바, 이동 Catalog > Products.

Products 그리드에서 내 제품 편집 모드로 엽니다.

아래로 스크롤하고 확장합니다. 다음 Content 섹션.

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

• 간단한 설명 ​표준 WYSIWYG를 사용하는 편집자.
• 설명, 다음을 표시합니다. 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 페이지 상단에 있는 메시지에 연결하고 잘못된 캐시를 새로 고칩니다.

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

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

아래로 스크롤하여 내 Page Builder 속성 정보.

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

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