> 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="/files/qLix4HJc5MXIxAd1jJWi" alt=""><figcaption></figcaption></figure>

### 블록 설정 방법

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

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

### 1. 상품 목록

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

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

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

<figure><img src="/files/VzfBlhwBaEWwCPFo5ShJ" 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="/files/zpi3nqlHXgUX1CXmoMb4" 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="/files/2mbEaTMg5a97MvnTtQN2" 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="/files/fwFb9mBeBZpsO5z30iFK" 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 %}                                                                                                                                       |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.qshop.ai/customer_support/guide/design/editor/contents/product.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.