# 새로운 상품 컬렉션 요소 및 SEO 개선사항

스토어 소유자는 이제 요소를 배치하고 특정 컬렉션을 구성하여 스토어가 활성화된 모든 페이지에 표시할 수 있습니다. 이와 함께 스토어 소유자는 컬렉션에 이미지와 SEO 정보를 추가할 수 있어 컬렉션 사용의 전반적인 경험을 향상시킵니다.

## 사용 방법:

* `Payments(결제) → Products(상품) → Collections(컬렉션)`에서 이미지 유무에 관계없이 컬렉션을 구성하고 필요한 세부 정보를 입력하세요. 여기서 이름, 이미지, SEO 제목, SEO 설명 및 핸들을 업데이트할 수 있습니다.
* 스토어의 페이지 빌더로 이동하여 Collection List Element(컬렉션 목록 요소)를 추가하세요. 이는 요소의 Store(스토어) 섹션 아래에 있습니다.
* 이제 플레이스홀더 이름과 이미지가 포함된 3개의 기본 플레이스홀더 컬렉션이 추가된 것을 볼 수 있습니다. 요소를 클릭하면 오른쪽에 설정이 나타나며, 모든 필요한 설정을 구성할 수 있습니다.
* 다른 요소와 마찬가지로 제목, 여백 패딩, 색상, 테두리, 폰트 등의 필드를 구성할 수 있습니다.
* 기본적으로 한 줄에 표시되는 컬렉션 수는 3개입니다. Layout(레이아웃) 탭의 Number of columns(열 수) 필드를 사용하여 데스크톱과 모바일 모두에서 이 숫자를 구성할 수 있습니다. 데스크톱과 모바일의 최대값은 각각 5열과 2열입니다.
* 제목이 필요하지 않은 경우 Text options(텍스트 옵션) 아래의 Headline(헤드라인) 필드를 비워두면 제목이 제거됩니다.
* 표시할 컬렉션 세트를 정의하려면 `Collections(컬렉션)` 그룹 아래에 나열된 컬렉션 중 하나를 클릭하면 컬렉션을 선택할 수 있는 섹션이 표시됩니다. 선택하면 선택된 컬렉션 항목이 빌더에서 컬렉션의 이름과 이미지를 반영합니다. 참고: 실제 컬렉션을 표시하려면 이 단계를 수행해야 합니다. 플레이스홀더 컬렉션은 라이브 사이트에서 어떤 용도로도 사용되지 않습니다.

### 캔버스에서 직접 컬렉션 선택 및 매핑

설정을 빠르게 하기 위해 이제 캔버스에서 직접 Collections List 요소 내부의 항목을 선택할 수 있습니다.

Collections List 요소의 항목을 더블클릭하세요:

* 항목이 실제 컬렉션에 매핑되지 않은 경우, 선택 드로어가 자동으로 열려 컬렉션을 할당할 수 있습니다.
* 항목이 이미 매핑된 경우, 선택된 컬렉션이 명확성을 위해 캔버스에서 강조 표시됩니다.

양방향 동기화: 선택 드로어에서 변경한 내용이 캔버스에 즉시 업데이트되고, 캔버스 선택이 드로어에 반영됩니다.

안정적인 순서: 요소에서 항목을 추가하거나 제거해도 선택 순서는 일관되게 유지됩니다.

* Save(저장)/Publish(발행)를 클릭하여 사이트에서 변경사항을 확인하세요!

## 주요 특징:

* 컬렉션 이미지가 있으면 해당 컬렉션에 대한 이미지가 표시됩니다. 이미지가 없으면 컬렉션 텍스트가 배경과 함께 특정 컬렉션 항목의 중앙에 배치됩니다.
* 업로드된 이미지와 SEO 세부 정보는 컬렉션 필터가 있는 상품 목록 페이지에서 해당 SEO 태그를 추가하는 데 사용됩니다.

![새로운 컬렉션 요소 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026792822/original/VQF6O8V1eSXY9rnRrUXdUN0HF7OOtITbAA.jpeg?1716999271)

![컬렉션 목록 요소 구성](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026792819/original/Pq8GGDKvy6vTf-FU9JvL75-eobPfyghRfQ.jpeg?1716999271)

![컬렉션 레이아웃 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026792820/original/xMJ6gxPmrP9JCFKwDg55h6q_xhTe2dcWhQ.jpeg?1716999271)

![컬렉션 SEO 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155026792821/original/WFkCZxgm3sP_1HrMPa95e70bdc_qRqRBmw.jpeg?1716999271)

***

*원문 최종 수정: Mon, 16 Feb, 2026 at 6:53 AM* *Hyperclass 사용 가이드 — hyperclass.ai*


---

# Agent Instructions: 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://hyperclass.gitbook.io/hyperclass-docs/e-commerce/new-product-collection-element-and-seo-improvements.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.