# 새롭게 설치한 스킨에 스크립트 설치하기

### 1. 설치할 스크립트 코드 확인하기

1-1. 썸네일 플레이어 사용을 위한 스크립트 코드는 다음과 같습니다.

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

1-2.  스크립트 코드의 {mall\_id}는 고객님의 쇼핑몰 ID 값이 들어가야 합니다.

1-3. 고객님의 쇼핑몰 ID 는 찰나 서비스 페이지 > 계정 관리 메뉴에서 확인하실 수 있습니다.&#x20;

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

쇼핑몰 ID가 "charlla"일 경우, 스크립트 전체 코드는 다음과 같습니다.

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

### 2. 신규 스킨에 스크립트 설치하기

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

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

2-2. 새롭게 도입하려는 스킨 편집을 위해 "디자인 편집" 버튼을 클릭해서 "스마트 디자인 편집창" 으로 이동해 주세요

<figure><img src="/files/43cGzTANeYUNRAyNKcGL" alt=""><figcaption></figcaption></figure>

Section 1에서 확인한 스크립트 코드를 설치 대상 페이지 HTML영역 최하단에 붙여넣기 합니다.

2-3. 스크립트는 3개 페이지에 설치되어야 합니다.

* **✅ 쇼핑몰 메인 페이지: index.html**

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

* **✅ 쇼핑몰 상품 분류 페이지: list.html**

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

* **✅ 쇼핑몰 상품 검색 페이지: search.html**

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

{% hint style="warning" %}

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

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

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


---

# 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://support.charlla.io/userguide/myproduct/apply-to-new-skin.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.