# 내 상품

{% hint style="warning" %}

* <mark style="color:orange;">**한 페이지에 연결된 동영상이 너무 많을 경우 로딩이 지연될 수 있습니다. \[카페24 권장 기준 1페이지에 50개]**</mark>
* <mark style="color:orange;">**일부 쇼핑몰 스킨에서 동작에 이상이 있을 경우, 채팅 상담으로 문의해 주시면 바로 대응해 드리겠습니다.**</mark>
  {% endhint %}

### 1. 스크립트 설치하기

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

1-1. 상단 메뉴에서 **‘내 상품’** 탭을 클릭하세요.

1-2. 대표이미지를 숏폼으로 변경하려면 스크립트 설치가 필요합니다. 상단 배너에서 **\[스크립트 설치]** 버튼을 클릭해주세요.  스크립트가 <mark style="color:red;">**설치되지 않은 고객의**</mark> 경우, 주의 배너가 표시됩니다.

1-3. 스크립트 설치 팝업에서  **\[썸네일 스크립트 설치]** 버튼을 클릭하세요.

* ✅ **교체되는 대표 이미지 목록** : 4개의 대표이미지 중 목록, 작은목록 이미지가 변경됩니다.
* ✅ **적용 페이지 예시**: 쇼핑몰의 메인페이지, 검색 페이지에 연결한 숏폼이 적용됩니다.
* ✅ **설치 대상 / 예시:** 스크립트가 설치될 쇼핑몰 주소와 코드를 확인하세요.

1-4. 설치가 완료되면 팝업이 변경되며 아래와 같은 안내 메시지가 표시됩니다. \[**썸네일 영상 연결 시작하기]** 버튼을 클릭하세요.

2. ### 동영상 연결하기

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

2-1. ‘내 상품’ 목록에서 **\[+ 영상 연결]** 버튼을 클릭하세요.

2-2. 사이드바가 펼쳐지고 \[**동영상 선택]** 팝업이 표시됩니다.

2-3. 연결할 영상 선택

* 원하는 썸네일 영상을 클릭하여 선택합니다.
* 상단 검색창에서 영상명을 직접 검색할 수도 있습니다.

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

2-4. 하단의 **\[저장]** 버튼으로 선택을 완료해주세요. 팝업에서 저장해도 아직 실제 페이지에 반영되지 않아요.

{% hint style="warning" %} <mark style="color:orange;">**썸네일이 등록되지 않은 상품에는 영상 연결이 불가능합니다. 대표이미지가 등록되지 않은채로 영상 연결을 클릭하면 하단 안내 메시가 표시되니 참고해 주세요.**</mark>
{% endhint %}

<figure><img src="/files/4rmEPnYrmMMKmg1yPaK9" alt=""><figcaption></figcaption></figure>

### 3. 미리보기 및 썸네일 영상 저장

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

대표 이미지에 적용할 영상을 선택했다면, 쇼핑몰에 적용하기 전, 썸네일 영상을 미리 확인할 수 있어요.&#x20;

3-1. (1번)상단의 미리보기 옵션에서 **2:3, 4:5, 정방형** 중 하나를 선택하세요.\
선택한 비율에 따라 썸네일 영상이 쇼핑몰에서 어떤 형태로 노출될지 실시간으로 확인할 수 있어요.

📌 찰나에서 제공하는 미리보기 화면으로, 실제 쇼핑몰에서는 다르게 보일 수 있어요.

3-2. 반드시 썸네일 정보 선택한 영상을 **\[저장 및 업데이트]**&#xD558;세요.

* 2번 **\[저장 및 업데이트]** 버튼을 클릭하면, **카페24 메인, 검색 페이지** 등에 실제로 대표 이미지 대신 숏폼 영상이 표시됩니다.
* **적용 범위** : <mark style="color:purple;">**카페24로 제작한 쇼핑몰에의 메인, 검색 페이지에서만**</mark> 연결한 숏폼이 표시됩니다. 모든 페이지에 적용되지 않아요. 찰나에서 만든 예시 페이지에서 상품 목록에 숏폼이 적용된 모습을 미리 확인해 보세요.

  * [메인페이지](https://pomelife.cafe24.com/)
  * [검색페이지](https://pomelife.cafe24.com/product/search.html?banner_action=\&keyword=%EC%83%98%ED%94%8C%EC%83%81%ED%92%88+2)

  <div data-gb-custom-block data-tag="hint" data-style="warning" class="hint hint-warning"><p><mark style="color:orange;"><strong>한 페이지에 영상이 많을 경우, 동영상 로딩이 지연될 수 있습니다.</strong></mark></p></div>

### 4. 동영상 변경 및 상품 정보

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

4-1. **썸네일 영상 정보 영역**

* **썸네일 영상 선택 :** 연결된 썸네일 영상이 표시되며, **마우스를 올리면 \[동영상 변경]과 \[삭제] 버튼이 표시됩니다.** 기존에 연결된 영상을 수정하거나 연결을 해제 하세요.&#x20;
* 동영상 변경 : 썸네일 영상 선택에 마우스 hover > 동영상 변경 버튼 클릭 > 동영상 선택 > 저장 버튼
* 동영상 연결 해제 : 썸네일 영상 선택에 마우스 hover > 삭제 버튼 > 저장 버튼

4-2. **상품 정보 영역**

* 카페24에서 입력한 상품의 대표 이미지, 상품명, 상품코드, 가격 정보가 표시돼요.
* 상품 정보를 **카페24 관리자 페이지에서 변경한 경우**, 상품 정보 옆 **\[새로고침]** 버튼을 눌러 변경사항을 반영할 수 있어요.

{% hint style="warning" %} <mark style="color:orange;">**카페24 상품 목록에서 대표이미지를 변경하는 경우, 기존에 연결된 찰나 영상도 자동으로 해제됩니다. 대표 이미지가 바뀌었다면, 반드시 새로 연결을 진행해주세요.**</mark>
{% endhint %}

### 5. 썸네일 동영상 연결이 끊기는 경우

5-1. 카페24 상품 목록에서 대표이미지를 변경하는 경우, 기존에 연결된 찰나 영상도 자동으로 해제됩니다. 대표 이미지를 변경할 때마다 다시 연결이 필요합니다.

5-2. 썸네일로 사용 중인 동영상을 찰나 라이브러리에서 삭제 했을 때 상품 연결도 해제됩니다.

### 6. 스크립트 설치 해제

스크립트를 삭제하려면 다음 과정을 진행해 주세요.

**\[계정 관리]** 페이지 > 하단 **\[내 쇼핑몰]** 영역 > 스크립트 **\[설치 해제] 버튼**을 클릭하세요.

<figure><img src="/files/Qux4Yn0VUzo2CTGgyJqT" alt="" width="375"><figcaption></figcaption></figure>


---

# 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.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.