> For the complete documentation index, see [llms.txt](https://support.charlla.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.charlla.io/userguide/myproduct/cafe24.md).

# \[Cafe24] 상품 상세 페이지 대표이미지 영역에 찰나 영상 사용하기

{% hint style="warning" %}

* <mark style="color:orange;">**Cafe24 기반 쇼핑몰의 상세 페이지 상품 대표이미지 영역에 찰나 썸네일 플레이어를 적용하는 방법입니다.**</mark>
* <mark style="color:orange;">**일부 쇼핑몰 스킨에서 동작에 이상이 있을 경우, 채팅 상담으로 문의해 주시면 바로 대응해 드리겠습니다.**</mark>&#x20;
  {% endhint %}

Cafe24 기반 쇼핑몰의 상품 상세(메인) 페이지에서 썸네일 플레이어를 사용하는 방법을 안내합니다.

#### 1. 찰나 썸네일 플레이어 스크립트 확인 <a href="#id-1" id="id-1"></a>

```
<!--찰나 썸네일 플레이어 스크립트 시작-->
<script src="https://console.charlla.io/thumbnail-content/cafe24/{쇼핑몰ID}/script"></script>
<!--찰나 썸네일 플레이어 스크립트 끝-->
```

* 쇼핑몰 ID는 찰나 서비스 페이지 > 계정관리 메뉴에서 확인하실 수 있습니다.

<figure><img src="/files/PEiCounRqws6fOdww8Yz" alt=""><figcaption></figcaption></figure>

### 2. 레이아웃 파일에 스크립트 설치하기

2-1. Cafe24 관리자 페이지에서 디자인 페이지로 이동하세요.

2-2. 현재 사용중인 디자인 스킨 코드 수정을 위해 "디자인 편집" 버튼을 클릭해서 "스마트 디자인 편집창" 으로 이동해 주세요

<figure><img src="/files/MDdkqOMbli3AcSyTnMV4" alt=""><figcaption></figcaption></figure>

2-2-1. "스마트디자인 Easy" 창이 뜰 실행될 경우, 좌측 하단에 "\</> HTML 수정" 버튼을 클릭하면 "스마트 디자인 편집창"으로 진입할 수 있습니다.

<figure><img src="/files/f8CLn2SuL0OunRmVY6Lv" alt=""><figcaption></figcaption></figure>

2-3. 스크립트는 레이아웃 > 기본 레이아웃 > 공통 레이아웃(layout.html)에 설치되어야 합니다.

* **✅ 쇼핑몰 공통 레이아웃 페이지: 공통 레이아웃(layout.html)**

<figure><img src="/files/UurCScX6GLlSSYZLnZgY" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}

* <mark style="color:orange;">**유료 스킨의 경우, 스킨을 제작한 에이전시에서 기본 경로/파일명을 사용하지 않고 별도 파일명을 사용했을 경우에는, 설치 대상 파일이 달라질 수 있습니다.**</mark>
* <mark style="color:orange;">**실제 파일 설치 경로를 정확히 확인하기 위해서는 스킨 제작 에이전시에 문의해 주세요.**</mark>
  {% endhint %}

2-4. 스크립트 코드는 \</head> 바로 윗줄, 혹은 \</body> 바로 윗줄에 붙여넣기 해주세요.

2-5. 코드 붙여넣기를 완료한 후, "저장" 버튼을 클릭해서 변경 사항을 저장합니다.

스크립트 설치가 정상적으로 완료된 이후에는 기존 찰나 서비스 페이지 "내 상품" 메뉴에서 숏폼 영상과 연결한 상품들의 상세 페이지 대표 이미지 영역에 숏폼 영상이 표시됩니다.


---

# 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, and the optional `goal` query parameter:

```
GET https://support.charlla.io/userguide/myproduct/cafe24.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.