> 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/widget/playorder.md).

# 재생순서

### 재생순서

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FOSSDBNNb3Qa8w8XqwQtS%2F1.png?alt=media&amp;token=9b577a6d-2e0a-417f-99c3-5906f1ee93e2" alt=""><figcaption></figcaption></figure>

1. \[+ 추가] 버튼을 클릭해 동영상을 위젯에 추가할 수 있어요.
슬라이드 위젯의 경우 상품도 함께 추가할 수 있어요.
2. 항목을 추가일 오래된 순 / 최신 순으로 정렬할 수 있으며, 직접 순서를 변경하면 커스텀 정렬로 표시돼요.
3. 동영상 항목은 상품 배너가 연결된 경우에만 위젯에서 재생돼요. 비활성화된 동영상은 위젯에서 재생되지 않아요.
4. 항목을 드래그 앤 드롭하여 재생 순서를 변경할 수 있어요.
5. 현재 설정 중인 위젯의 미리보기 화면이 표시돼요. 미리보기는 실제 위젯 크기의 75% 비율로 제공돼요.

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FsoLFqcabEsB4iwXKsKHf%2F2.png?alt=media&amp;token=05cf9a38-4b3e-46dc-950b-59cb624297ae" alt=""><figcaption></figcaption></figure>

6. 항목을 선택해 맨 위·맨 아래로 이동하거나 재생 순서에서 제외할 수 있어요.

{% hint style="info" %}
슬라이드 위젯 재생 순서

슬라이드 위젯은 토글 on/off로 상품 배너 표시 여부를 설정할 수 있어요. 동영상이나 상품 아이템을 클릭하면 해당 상세페이지로 이동해요.
{% endhint %}

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FKNqp7UNLg6LPLAZBCT4h%2F%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C%EC%9C%84%EC%A0%AF%20%EC%9E%AC%EC%83%9D%EC%88%9C%EC%84%9C.png?alt=media&amp;token=3897d5f7-0e08-4032-b1cd-1dda0063a18f" alt=""><figcaption></figcaption></figure>

### 재생순서에서 상품 배너 연결하기

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FfmWZbl5NKtfaFDM8iG5h%2F1.png?alt=media&amp;token=86e9a3fb-413c-46ab-afdf-e65a9d9167e9" alt=""><figcaption></figcaption></figure>

1. 항목을 선택하면 해당 동영상의 샵플레이어 설정 사이드바가 열려요.
2. 샵플레이어에 표시될 동영상 설명을 입력할 수 있어요.
3. 위젯에 연결할 수 있는 상품 리스트가 표시돼요.
4. \[+새 상품 등록] 버튼을 눌러 신규 상품을 등록할 수 있어요. 등록한 상품은 바로 연결 가능한 상품 목록에 추가돼요.
5. 상품 아이템을 배너로 연결하거나, 상품 정보를 수정·삭제할 수 있어요.

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FVZx45rVCKS49NkbdDFjv%2F2.png?alt=media&amp;token=0485d8e5-4d5f-49ba-b919-d07a53080cde" alt=""><figcaption></figcaption></figure>

6. 연결 가능한 상품에서 **\[+ 배너 연결]**&#xC744; 클릭하면 해당 상품이 연결된 상품 배너에 추가되고, 샵플레이어에 즉시 반영돼요.

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FUqlPpvM2jYa1zXPnUWZk%2F3.png?alt=media&amp;token=b5588321-f66a-4cca-9522-74c8112a198f" alt=""><figcaption></figcaption></figure>

7. 연결 가능한 상품에서 **\[수정]**&#xC744; 클릭하면 상품 정보 수정 모달이 열려요. 상품 정보를 수정해 저장하면, 해당 상품이 연결된 모든 샵플레이어의 상품 배너에 자동으로 반영돼요.

### 재생순서에서 상품 배너 연결하기 (카페24 연동)

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2F4lJgk6JBKtyUmf5J9S05%2F1.png?alt=media&amp;token=0c088ea5-4fad-4f47-89da-f0df949891b4" alt=""><figcaption></figcaption></figure>

1. 카페24에서 연동된 상품은 수정하거나 삭제할 수 없어요. 상품 정보 변경은 카페24 관리자에서 진행해 주세요.

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FByvTVdg37VRYLmf3vMyL%2F2.png?alt=media&amp;token=f606e899-b8a0-4699-88ff-ee0a7b70eb7d" alt=""><figcaption></figcaption></figure>

2. 카페24 상품 정보가 최신 버전으로 반영되지 않았을 경우 **\[새로고침]** 버튼을 클릭해 업데이트 해주세요.

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FGOEGQRaYnqovwlVFjynT%2F3.png?alt=media&amp;token=4ab4ef18-593c-49e4-8adb-17adbe77cb61" alt=""><figcaption></figcaption></figure>

3. 카페24 상품 연동이 만료된 경우 **\[다시 연동하기 >]** 버튼을 클릭해 재연동해 주세요.

### 히어로 배너 위젯 (메인 상단 배너) 모바일 영상 등록하기&#x20;

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2Fw5E5Ka1cXQC4ox9cYqbk%2Fimage.png?alt=media&amp;token=c2285de9-b900-4259-8164-7ff32b9722f4" alt=""><figcaption></figcaption></figure>

1. 모바일 영상을 별도로 등록하지 않으면 PC 영상이 모바일 화면에 맞춰 반응형으로 노출돼요.
2. PC와 모바일에 서로 다른 영상을 등록한 경우, **로드 수는 각 영상별로 별도 집계돼요.**
3. 이미지는 PC·모바일 구분 없이 동일하게 노출돼요.

{% hint style="info" %}
PC에서는 가로형 영상을, 모바일에서는 세로형 영상을 활용하면 화면에 맞는 영상 배너를 더 효과적으로 활용할 수 있어요.
{% endhint %}


---

# 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/widget/playorder.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.