콘텐츠 추가 - 제품

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

Add New Block ​을(를) 클릭합니다.

Block Title 및 Identifier ​을(를) 입력하십시오.

블록을 사용할 수 있는 Store View ​을(를) 선택하십시오.

아래로 스크롤하여 Edit with Page Builder 또는 콘텐츠 미리 보기 영역 내부를 클릭하여 Page Builder 작업 영역을 엽니다.

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

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

페이지에 제품 목록이 표시되는 방식을 결정하려면 모양 유형 중 하나를 선택합니다.

{width="300"}

제품 캐러셀을 선택하는 경우 캐러셀 설정도 구성해야 합니다.

Select Products By ​의 경우 제품 선택 방법을 선택하십시오.

범주, SKU 또는 조건별로 제품을 선택할 수 있습니다. 이러한 옵션은 함께 사용할 수 없습니다. 예를 들어 카테고리 옵션을 선택하고 카테고리 선택기를 사용한 다음 조건 옵션으로 전환하여 일부 조건을 추가할 수 없습니다. 이 세 가지 옵션 중 1개 ​에 대해 설정한 내용만 기준으로 제품이 선택됩니다.

• Category - 선택한 범주를 사용하는 제품을 표시하려면 이 옵션을 선택하십시오.

  {width="500"}

  이 옵션을 선택하면 Category 선택기가 제공됩니다. 화살표를 클릭하고 드릴다운하여 표시할 제품 카테고리를 선택합니다. 예를 들어, Commerce 샘플 데이터에서 여성 > 최상위 > 티 ​를 드릴인하고 선택하면 해당 범주에 대한 모든 제품이 표시됩니다.

  {width="500"}

• SKU - 하나 이상의 SKU를 사용하는 제품을 표시하려면 이 옵션을 선택하십시오.

  이 옵션을 선택하면 표시할 SKU의 쉼표로 구분된 목록을 입력해야 하는 Product SKUs 텍스트 상자가 제공됩니다.

  {width="500"}

• Condition - 정의한 하나 이상의 조건에 따라 제품을 표시하려면 이 옵션을 선택합니다.

  이 옵션을 선택하면 제품 선택에 조건을 추가하는 데 사용할 수 있는 도구가 있습니다. 예를 들어 Gender가 Unisex로 설정된 제품만 선택할 수 있습니다.

  {width="500"}

  note note
  NOTE
  카테고리 또는 SKU 옵션을 선택하면 Position의 Sort By 옵션이 제공됩니다. 이 정렬 옵션을 사용하면 제품이 카탈로그에 표시되는 순서와 동일한 순서로 나타납니다.
  범주 옵션의 경우 위치별로 정렬하면 카탈로그에 표시된 순서와 동일한 순서로 제품이 표시됩니다. SKU 옵션의 경우 위치별로 정렬하면 Product SKUs 텍스트 상자에 입력한 순서대로 제품이 표시됩니다.

Sort By ​의 경우 목록의 제품에 대한 정렬 순서를 선택하십시오.

{width="300"}

회전판 또는 눈금에 Number of Products to Display ​을(를) 입력합니다.

값은 1부터 999까지입니다. 기본값은 눈금의 경우 5이고 회전판의 경우 20입니다.

캐러셀 내에 제품이 표시되는 방식을 확인하려면 Carousel Mode ​을(를) 선택하십시오.

이 두 모드 간에 전환하면 다른 회전 메뉴 설정이 유지되며, Infinite Loop 설정은 항상 연속 모드에서 Yes(으)로 설정되며 필드가 비활성화됩니다.

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

필요한 경우 Autoplay 옵션을 Yes(으)로 설정합니다.

자동 재생이 활성화되면 페이지가 로드될 때 캐러셀이 자동으로 스크롤을 시작합니다. 기본 설정(No)을 그대로 두면 고객은 슬라이드 탐색(점 또는 화살표)을 클릭하여 각 슬라이드를 순서대로 표시해야 합니다.

이 기능을 사용하려면 Autoplay Speed ​을(를) 입력하여 각 슬라이드 사이의 지연 시간(밀리초)을 지정하십시오. 기본값은 4000(4초)입니다.

필요한 경우 Infinite Loop 옵션을 Yes(으)로 설정합니다.

무한 루프가 활성화되면 페이지가 열려 있는 동안 슬라이드 쇼가 무기한 재생됩니다. 기본 설정(No)을 벗어나면 슬라이드 쇼는 한 번만 재생됩니다.

필요한 경우 Show Arrows 옵션을 Yes(으)로 설정합니다.

이 옵션을 활성화하면 각 슬라이드의 왼쪽과 오른쪽에 다음 및 이전 탐색 화살표가 포함됩니다. 기본 설정(No)을 그대로 두면 슬라이드에 탐색 화살표가 표시되지 않습니다.

필요한 경우 Show Dots 옵션을 No(으)로 설정합니다.

기본 설정(Yes)으로 설정하면 캐러셀 슬라이더 아래쪽에 탐색 점이 나타납니다. 이 설정을 사용하지 않으면 회전 슬라이더에 탐색 점이 표시되지 않습니다.

상위 컨테이너 내에서 제품 목록의 위치를 제어하려면 Alignment ​을(를) 선택하십시오.

Products 컨테이너의 네 면에 모두 적용되는 Border 스타일을 설정합니다.

None 이외의 테두리 스타일을 설정하는 경우 테두리 표시 옵션을 완료하십시오.

(선택 사항) 컨테이너에 적용할 현재 스타일 시트의 CSS classes 이름을 지정합니다.

여러 클래스 이름은 공백으로 구분합니다.

Margins and Padding ​에 대한 값을 픽셀 단위로 입력하여 제품 컨테이너의 외부 여백과 내부 패딩을 결정합니다.

다이어그램에 해당 값을 입력합니다.