> For the complete documentation index, see [llms.txt](https://hyperclass.gitbook.io/hyperclass-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hyperclass.gitbook.io/hyperclass-docs/and-sites/custom-product-details-page-for-e-commerce-stores.md).

# 이커머스 스토어를 위한 커스텀 상품 상세 페이지

## 이커머스 스토어를 위한 커스텀 상품 상세 페이지

Hyperclass의 커스텀 상품 상세 페이지(PDP)를 사용하면 개별 상품을 위한 전용 브랜드 맞춤 페이지를 제작할 수 있어, 더 풍부한 스토리텔링과 높은 전환율을 달성할 수 있습니다. 이미 익숙한 빌더를 사용하여 기본 상품 상세 페이지 경험을 대체하는 PDP를 디자인하고, 할당하고, 관리하세요. 상품 목록 페이지(PLP), 추천 섹션, 직접 링크에서의 라우팅은 자동으로 매핑을 따르며, 필요한 경우 기본 PDP로 안전하게 대체됩니다. 이 가이드는 장점, 설정, 모범 사례를 안내합니다.

***

**목차**

* [이커머스 스토어를 위한 커스텀 상품 상세 페이지란?](#이커머스-스토어를-위한-커스텀-상품-상세-페이지란)
* [이커머스 스토어용 커스텀 상품 상세 페이지의 주요 장점](#이커머스-스토어용-커스텀-상품-상세-페이지의-주요-장점)
* [이커머스 스토어용 커스텀 상품 상세 페이지 설정 방법](#이커머스-스토어용-커스텀-상품-상세-페이지-설정-방법)
* [상품 할당, 재할당 및 관리](#상품-할당-재할당-및-관리)
* [자주 묻는 질문](#자주-묻는-질문)

***

## 이커머스 스토어를 위한 커스텀 상품 상세 페이지란?

커스텀 상품 상세 페이지는 Hyperclass의 사이트(Sites)/스토어 빌더에서 만들고 특정 상품에 매핑하는 전용 상품 페이지입니다. **단일 기본 PDP**에만 의존하지 않고, 스토어 네비게이션은 그대로 유지하면서 상품별로 고유한 레이아웃과 메시지를 제작할 수 있습니다. 상품에 커스텀 PDP가 설정되어 있으면, 쇼핑객이 상품 목록 페이지(PLP), 추천 섹션 또는 링크에서 클릭할 때 해당 커스텀 페이지로 이동합니다.

커스텀 PDP는 상품 수준에서 머천다이징과 브랜드 표현에 대한 제어를 확장합니다. 상품을 맞춤형 페이지와 연결하여 스토어의 표준 플로우를 방해하지 않으면서 고유한 가치 제안, 업셀 및 미디어를 강조할 수 있습니다.

***

### 이커머스 스토어용 커스텀 상품 상세 페이지의 주요 장점

실용적인 이점을 이해하면 언제 커스텀 PDP를 만들지 결정하고 UX와 운영 모두를 개선하는 데 도움이 됩니다.

* **향상된 스토리텔링**: 각 상품에 맞춤형 풍부한 콘텐츠(혜택, 데모, 리뷰, FAQ)를 보여줄 수 있습니다.
* **개인화된 디자인**: 브랜드와 상품 아이덴티티에 맞는 커스텀 레이아웃, 미디어, 요소(Element)를 사용할 수 있습니다.
* **정확한 라우팅**: PLP, 추천 섹션, 상품 링크에서의 클릭이 구성된 경우 커스텀 PDP로 이동합니다.
* **단일 연관**: 각 상품은 한 번에 하나의 커스텀 PDP에만 매핑되며, 페이지를 전환하면 연관이 자동으로 업데이트됩니다.
* **안전 대체**: 커스텀 PDP를 삭제하면 매핑된 상품이 자동으로 기본 PDP로 돌아갑니다.
* **운영 효율성**: 생성 모달 또는 페이지/편집기 설정을 통해 상품을 빠르게 할당/재할당할 수 있습니다.

***

### 이커머스 스토어용 커스텀 상품 상세 페이지 설정 방법

"아이디어"에서 발행되고 테스트된 PDP까지의 전체 체크리스트를 따라하세요. 적절한 설정은 라우팅이나 가시성 문제를 방지합니다.

**사전 요구사항**

* 최소 하나의 상품(Product)이 생성되어 있고(결제(Payments) → 상품(Products)) 온라인 스토어에 포함되어 있어야 합니다.
* 하위 계정에서 사이트(Sites)/스토어 빌더에 대한 접근 권한이 있어야 합니다.
* 편집하려는 스토어/사이트를 확인하세요.

**설정 단계**

1. 사이트(Sites) → 스토어(Stores) → 특정 스토어 선택 → 새 페이지 추가(Add New Page)로 이동합니다.

![커스텀 상품 상세 페이지 생성](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155053144665/original/llJ4GfBjqkrY2MZ9hLy1-Ufh6W_nponsXA.png?1757032287)

2. 커스텀 상품 상세 페이지(Custom Product Details Page)를 활성화합니다. 모달에서 매핑할 상품을 검색/선택하세요.

![상품 할당 모달](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155053144668/original/zpMUbxZ8zYJQuQS7-9kkmeVPIVLpLMoUOg.png?1757032318)

3. PDP 요소(Element)(이미지, 상세 정보, CTA, 관련 상품)를 사용하여 레이아웃을 구축하세요.

편집기를 사용하여 전환율 중심의 상품 페이지를 구축하세요. PDP 요소와 글로벌 텍스트 설정이 여전히 적용되므로, 이미 사용 중인 스토어 구성 요소와 커스텀 PDP 레이아웃을 결합할 수 있습니다.

![페이지 빌더에서 PDP 요소 사용](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155053146469/original/BD4LdQXsYoSK6CzqiKWsEH3KzeuzKBnbPQ.png?1757040289)

**디자인 팁**

* PDP 친화적 요소(이미지, 비디오, 기능, 리뷰, 관련 상품 등)를 드래그해서 넣으세요.
* 텍스트 커스터마이제이션(Text Customization)을 사용하여 PDP 요소 전반에서 레이블과 메시지를 현지화하세요.
* 주요 액션(장바구니 추가/바로 구매)을 페이지 상단에 유지하고, 긴 페이지에서는 CTA를 반복하세요.
* 일관성을 유지하기 위해 상품 페이지 간에 블록/구성 요소를 재사용하세요.

4. 저장(Save) 및 발행(Publish)을 클릭합니다.

**샘플 미리보기:**

![커스텀 PDP 미리보기](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155053146585/original/mPAAgo6go-xmtsKzt4yn13DV_Qw-rUwB8Q.png?1757040891)

***

### 상품 할당, 재할당 및 관리

상품-페이지 매핑은 쇼핑객이 어디에 도착하는지 제어합니다. 초기 매핑 방법, 나중에 매핑 전환 방법, 어떤 상품이 연관되어 있는지 확인하는 방법을 알아보세요.

* **페이지 생성 중**: 할당 모달을 사용하여 상품을 새 커스텀 PDP에 매핑합니다.

![페이지 생성 시 상품 할당](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155053146646/original/KGJ3JqSQgbiH78xAaS-nwmCti7vCc_zlTw.png?1757041252)

* **생성 후(재할당)**: 빌더에서 커스텀 PDP를 열고, 관련 상품 요소나 페이지 설정을 선택한 다음, 설정(Settings) 패널을 사용하여 상품 할당을 업데이트합니다.

![생성 후 상품 재할당](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155053146632/original/R6QcBXtgLnFx6jIYNarXQq8QO4zeDOD6Qw.png?1757041126)

* **단일 연관 규칙**: 상품을 새 커스텀 PDP에 할당하면 이전 연관이 자동으로 제거됩니다.
* **상품 목록 페이지(PLP) 또는 추천 섹션에서의 네비게이션**: 상품 목록이나 추천 섹션에서의 네비게이션은 항상 올바른 PDP(커스텀 또는 기본)로 라우팅됩니다.

***

### 자주 묻는 질문

**Q: 상품을 여러 커스텀 PDP에 할당할 수 있나요?** A: 아니요. 각 상품은 한 번에 하나의 커스텀 PDP에만 연결할 수 있습니다. 새 커스텀 PDP에 할당하면 이전 연관이 제거됩니다.

**Q: 커스텀 PDP를 삭제하면 어떻게 되나요?** A: 연관된 모든 상품이 자동으로 기본 상품 상세 페이지로 돌아갑니다.

**Q: PLP와 추천 섹션에서의 클릭이 커스텀 PDP 매핑을 따르나요?** A: 네. 구성된 경우 커스텀 PDP로, 그렇지 않으면 기본 PDP로 네비게이션됩니다.

**Q: 상품을 다른 커스텀 PDP로 전환하려면 어떻게 하나요?** A: 새 PDP를 열고, 모달 또는 페이지/편집기 설정(Settings)을 통해 상품을 할당하고, 저장(Save) 및 발행(Publish)하세요. 기존 연관은 자동으로 제거됩니다.

**Q: 이것이 SEO나 기존 상품 링크를 변경하나요?** A: 커스텀 PDP는 자체 페이지 URL/슬러그를 사용합니다. 상품이 매핑되면 PLP, 추천 섹션 또는 링크를 통해 상품에 도달하는 쇼핑객은 커스텀 PDP로 라우팅됩니다.

**Q: "관련 상품"과 같은 PDP 요소가 커스텀 PDP에서도 작동하나요?** A: 네. PDP 호환 요소와 텍스트 커스터마이제이션(Text Customization) 설정은 커스텀 PDP 레이아웃에서도 작동합니다.

***

*원문 최종 수정: 2025년 9월 4일* *Hyperclass 사용 가이드 — hyperclass.ai*


---

# 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://hyperclass.gitbook.io/hyperclass-docs/and-sites/custom-product-details-page-for-e-commerce-stores.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.