> For the complete documentation index, see [llms.txt](https://help.qshop.ai/customer_support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.qshop.ai/customer_support/guide/design/editor/contents/product.md).

# 상품

상품의 블록 종류와 설정 방법을 알아봅니다.

## 상품블록이란?

사이트에 등록이 된 상품을 진열하는 목적으로 사용이 되고 있습니다. 목록 형태 슬라이드 형태로 상품을 진열하고, 구매자에게 노출하여 이후의 구매 과정을 진행하게 됩니다.

빠른 설정을 통해 상품이 보여질 진열 갯수를 설정한 후 섹션에 블록을 등록 할 수 있습니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FTRZnSmEIQf3KCu3F1p3L%2F%EB%B8%94%EB%A1%9D_%EC%83%81%ED%92%88%20%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0.png?alt=media&amp;token=64abe25b-db96-46f5-92f9-566ef368cdea" alt=""><figcaption></figcaption></figure>

### 블록 설정 방법

1. 사용하려는 블록을 추가합니다.
2. 퀵 메뉴의 상세설정을 클릭합니다.
3. 아래 상세 설정을 참고하여, 설정을 변경합니다.

{% hint style="info" %}
블록을 더블 클릭하여 상세 설정창을 열 수 있습니다.
{% endhint %}

### 1. 상품 목록

**\[관리자페이지 > 상품]** 페이지를 통해 등록해둔 상품을 진열합니다. \
생성한 카테고리 기준으로 원하는 카테고리 속 상품들을 노출 할 수 있습니다.

#### 상품 목록 블록\_설정 항목

{% tabs %}
{% tab title="기본 설정" %}
목록을 통해 진열할 카테고리 선택 및 진열 방법에 대한 설정을 합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Ffi0uGpRLAQzUD8XPif63%2F%EC%83%81%ED%92%88%EB%AA%A9%EB%A1%9D-%EA%B8%B0%EB%B3%B8.png?alt=media&amp;token=7fcee74b-0cfb-4cbb-8def-2d1c18240806" alt=""><figcaption></figcaption></figure>

| 설정 항목                                                                                                                                                                                                                                                                                                                                             |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>카테고리 선택</strong><br>\[관리자페이지 > 상품] 페이지를 통해 생성한 카테고리를 선택합니다.<br>선택한 카테고리 속 상품들이 모두 진열이 됩니다.</p>                                                                                                                                                                                                                                         |
| <p><strong>상품 진열 방식</strong><br><strong>가로 간격</strong> : 상품의 가로 간격을 설정합니다.<br><strong>세로 간격</strong> : 상품의 세로 간격을 설정합니다.<br><strong>열 개수</strong> : 하나의 열에 진열 될 상품 개수를 설정합니다.<br><strong>행 개수</strong> : 하나의 행에 진열 될 상품 개수를 설정합니다.<br><strong>정렬 기준</strong> : 등록순, 가격순 등 상품이 정렬이 될 기준을 선택합니다.</p><ul><li>간격과 개수는 pc와 모바일 개별 설정이 가능합니다.</li></ul> |
| <p><strong>상품 정보</strong><br><strong>여백</strong> : 상품 정보 바깥 여백을 설정합니다.</p><ul><li>pc와 모바일 개별 설정이 가능</li></ul><p><strong>상품 정보 정렬</strong> : 이름, 가격 등 상품 정보의 가로 정렬을 설정합니다.<br><strong>품절 상품</strong> : 품절 상품의 표시 여부를 선택합니다.</p>                                                                                                                    |

{% endtab %}

{% tab title="구성 설정" %}
목록을 통해 노출할 정보를 선택합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FZmFAM1i9cV643C4y4ApM%2F%EC%83%81%ED%92%88%EB%AA%A9%EB%A1%9D-%EA%B5%AC%EC%84%B1.png?alt=media&amp;token=3aa68ec6-b777-4dec-a16f-1141ddf03b08" alt=""><figcaption></figcaption></figure>

| 설정 항목                                                                                                                                               |
| --------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>상품명</strong> : 상품의 이름을 노출합니다.</p><ul><li>상세 설정을 통해 서체 및 크기 등 글자 속성 설정 가능</li></ul>                                                       |
| <p><strong>가격 및 할인율</strong> : 상품의 가격 및 할인율을 노출합니다.</p><ul><li>상세 설정을 통해 서체 및 크기 등 글자 속성 설정 가능</li><li>판매가/정가/할인율 개별 설정 가능</li></ul>                |
| <p><strong>배송비</strong> : 상품의 배송비를 노출합니다.</p><ul><li>상세 설정을 통해 서체 및 크기 등 글자 속성 설정 가능</li></ul>                                                      |
| <p><strong>평점/리뷰</strong> : 상품의 평점과 리뷰 개수를 노출합니다.</p><ul><li>텍스트 / 아이콘 중 표시 방식 선택 가능</li><li>상세 설정을 통해 서체 및 크기 등 글자 속성 설정 가능</li></ul>              |
| <p><strong>장바구니</strong> : 장바구니 아이콘을 노출합니다.</p><ul><li>상품 정보 또는 이미지 안으로 노출 위치 설정 가능</li><li>상세 설정을 통해 아이콘, 배경 색상 설정 가능</li></ul>                    |
| <p><strong>상품 정렬</strong> : 오른쪽 위에 고정이 되어있으며, 클릭 시 정렬 기준에 따라 상품이 진열이 됩니다.</p><ul><li>상세설정을 통해 노출할 항목 설정 가능</li><li>상세설정을 통해 서체 및 색상 설정 가능</li></ul> |
| <p><strong>상품 이미지</strong> : 상품의 대표 이미지를 노출합니다.</p><ul><li>필수 표시 항목으로 수정 불가</li><li>상세 설정을 통해 표시 비율 및 이미지 여백 설정 가능</li></ul>                        |
| <p><strong>페이지 번호</strong> : 아래 중앙 노출 갯수 이상의 상품이 진열이 되었을 경우 페이지 번호가 생성이 됩니다.</p><ul><li>상세 설정을 통해 서체 및 크기 등 글자 속성 설정 가능</li></ul>                   |
| {% endtab %}                                                                                                                                        |
| {% endtabs %}                                                                                                                                       |

### 2. 상품 슬라이드

특정 카테고리를 선택하여 해당 상품들을 슬라이드 시킬 수 있습니다.

#### 상품 슬라이드  블록\_설정 항목

{% tabs %}
{% tab title="기본 설정" %}
목록을 통해 진열할 카테고리 선택 및 진열 방법에 대한 설정을 합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FsqQ5SteJoOdYDmS6dh1h%2F%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C%20%EA%B8%B0%EB%B3%B8.png?alt=media&amp;token=86fa8a6f-2b18-4461-b799-b4a2daa09a80" alt=""><figcaption></figcaption></figure>

| 설정 항목                                                                                                                                                                                                                                    |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>카테고리 선택</strong><br><strong>\[관리자페이지 > 상품]</strong> 페이지를 통해 생성한 카테고리를 선택합니다.<br>선택한 카테고리 속 상품들이 모두 진열이 됩니다.</p>                                                                                                               |
| <p><strong>상품 진열 방식</strong><br><strong>간격</strong> : 상품의 간격을 설정합니다.<br><strong>열 개수</strong> : 하나의 열에 진열 될 상품 개수를 설정합니다.<br><strong>정렬 기준</strong> : 등록순, 가격순 등 상품이 정렬이 될 기준을 선택합니다.</p><ul><li>간격과 개수는 pc와 모바일 개별 설정이 가능합니다.</li></ul> |
| <p><strong>상품 정보</strong><br><strong>여백</strong> : 상품 정보 바깥 여백을 설정합니다.</p><ul><li>pc와 모바일 개별 설정이 가능</li></ul><p><strong>상품 정보 정렬</strong> : 이름, 가격등 상품 정보의 가로 정렬을 설정합니다.<br><strong>품절상품</strong> : 품절 상품의 표시 여부를 선택합니다.</p>             |
| {% endtab %}                                                                                                                                                                                                                             |

{% tab title="구성 설정" %}
목록을 통해 노출할 정보를 선택합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FTSYLFVQYds0qgedR095J%2F%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C%20%EA%B5%AC%EC%84%B1.png?alt=media&amp;token=8f6b001b-a7a4-447f-881f-896a984648cc" alt=""><figcaption></figcaption></figure>

| 설정 항목                                                                                                                                               |
| --------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>상품명</strong> : 상품의 이름을 노출합니다.</p><ul><li>상세 설정을 통해 서체 및 크기 등 글자 속성 설정 가능</li></ul>                                                       |
| <p><strong>가격 및 할인율</strong> : 상품의 가격 및 할인율을 노출합니다.</p><ul><li>상세 설정을 통해 서체 및 크기 등 글자 속성 설정 가능</li><li>판매가/정가/할인율 개별 설정 가능</li></ul>                |
| <p><strong>배송비</strong> : 상품의 배송비를 노출합니다.</p><ul><li>상세 설정을 통해 서체 및 크기 등 글자 속성 설정 가능</li></ul>                                                      |
| <p><strong>평점/리뷰</strong> : 상품의 평점과 리뷰 개수를 노출합니다.</p><ul><li>텍스트 / 아이콘 중 표시 방식 선택 가능</li><li>상세 설정을 통해 서체 및 크기 등 글자 속성 설정 가능</li></ul>              |
| <p><strong>장바구니</strong> : 장바구니 아이콘을 노출합니다.</p><ul><li>상품 정보 또는 이미지 안으로 노출 위치 설정 가능</li><li>상세 설정을 통해 아이콘, 배경 색상 설정 가능</li></ul>                    |
| <p><strong>상품 정렬</strong> : 오른쪽 위에 고정이 되어있으며, 클릭 시 정렬 기준에 따라 상품이 진열이 됩니다.</p><ul><li>상세설정을 통해 노출할 항목 설정 가능</li><li>상세설정을 통해 서체 및 색상 설정 가능</li></ul> |
| <p><strong>상품 이미지</strong> : 상품의 대표 이미지를 노출합니다.</p><ul><li>필수 표시 항목으로 수정 불가</li><li>상세 설정을 통해 표시 비율 및 이미지 여백 설정 가능</li></ul>                        |
| <p><strong>좌우 화살표</strong> : 슬라이드 좌우에 화살표를 노출합니다.</p><ul><li>상세설정을 통해 아이콘, 배경 색상 설정 가능</li></ul>                                                    |
| {% endtab %}                                                                                                                                        |
| {% endtabs %}                                                                                                                                       |