> 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/motion-thumbnail/installation.md). # 쇼핑몰에 스크립트 설치하기 {% hint style="warning" %} * **한 페이지에 연결된 동영상이 너무 많을 경우 로딩이 지연될 수 있습니다. \[카페24 권장 기준 1페이지에 50개]** * **일부 쇼핑몰 스킨에서 동작에 이상이 있을 경우, 채팅 상담으로 문의해 주시면 바로 대응해 드리겠습니다.** {% endhint %} ### 스크립트 셀프 설치하기 모션 썸네일 사용을 위해 스트립트 설치가 필요해요. 1. **\[모션 썸네일]** 메뉴에서 **\[스크립트 설치]** 버튼을 클릭해 주세요. 2. **\[복사하기]** 버튼을 눌러 스크립트 코드를 복사한 뒤, **``** **``** 사이 최하단에 삽입해 주세요.
{% hint style="info" %} #### **``**** ****태그를 쉽게 찾는 방법** HTML 편집 화면에서 **`Ctrl + F`**(Mac은 **`Command + F`**)를 누른 후 **``**를 검색해 주세요. 검색된 **`` 태그 바로 윗줄**에 복사한 스크립트 코드를 붙여 넣으면 됩니다. {% endhint %} ### 스크립트 자동 설치하기 - 카페24 연동 카페24와 연동한 경우 스크립트를 자동으로 설치할 수 있어요. > * ✅ **교체되는 대표 이미지**: 상세 이미지, 목록 이미지, 작은 목록 이미지, 축소 이미지에 적용돼요. > * ✅ **적용 페이지 예시**: 쇼핑몰 메인 페이지와 검색 페이지에 연결한 동영상이 적용돼요. > * ✅ **설치 대상**: 스크립트가 설치될 쇼핑몰 주소를 확인해 주세요. 1. 스크립트 설치 안내 배너의 **\[스크립트 설치→]**를 클릭해주세요.
2. 스크립트 설치 팝업에서 \[스크립트 자동 설치] 버튼을 클릭해 주세요. 3. 설치가 완료되면 \[+ 모션 썸네일 만들기] 버튼을 클릭해 모션 썸네일을 만들어 보세요!
### 스크립트 설치 해제 스크립트를 삭제하려면 다음 과정을 진행해 주세요. 1. **카페24 연동의 경우, \[계정 관리]** 페이지 > 하단 **\[내 쇼핑몰]** 영역 > 스크립트 **\[설치 해제] 버튼**을 클릭하세요.​
2. 직접 스크립트를 설치한 경우, 해당 스크립트는 수동으로 제거해 주세요. {% hint style="info" %} 모션 썸네일 영상 노출을 중단하려면 모션 썸네일을 삭제하거나 연결을 해제해 주세요. {% endhint %} ### 카페24 멀티몰에 스크립트 설치하기 카페24 스크립트 자동 설치는 **대표 쇼핑몰(기본몰) 1개**를 기준으로 지원됩니다. \ 멀티쇼핑몰(멀티몰)을 운영 중이라면, 멀티몰마다 아래 방법으로 스크립트를 **직접** 설치해 주셔야 해요. 1. **\[+모션 썸네일 만들기]** 버튼을 클릭해주세요. 2. **\[스크립트 설치]** 모달에서 스크립트 코드를 복사해 주세요. {% hint style="info" %} 멀티몰용으로 별도 발급되는 스크립트는 없어요. 대표몰에 설치한 것과 **동일한 스크립트**를 그대로 복사해서 사용하시면 됩니다. {% endhint %}
3. 카페24 관리자에 **쇼핑몰 대표 관리자**로 로그인한 뒤, 스크립트를 설치할 멀티몰의 **디자인 관리** 화면으로 이동해 주세요. 4. **\[디자인 편집] > \[\ HTML 수정]**을 클릭해 스마트디자인 편집창을 열어 주세요.
5. 왼쪽 파일 목록에서 **\[전체화면보기] > 레이아웃(layout) > 기본 레이아웃(basic) > 공통 레이아웃(layout.html)**으로 이동해 주세요.
6. 복사한 스크립트를 **``** 또는 **``** 태그 바로 윗줄에 붙여넣어 주세요. {% hint style="info" %} ### **태그를 쉽게 찾는 방법** HTML 수정 화면에서 **`Ctrl + F`**(Mac은 **`Command + F`**)를 누른 후, **``** 또는 **``**를 검색해 주세요. **해당 멀티몰의 모든 페이지에서 공통으로 불러오는 공통 레이아웃(`layout.html`)** 파일에 한 번만 추가하면 멀티몰 전체에 적용됩니다. {% endhint %} 7. 편집창 **왼쪽 위 \[저장]** 버튼을 클릭해 주세요.
8. 적용할 멀티몰이 여러 개라면, 몰마다 2\~6번을 반복해 주세요. 스크립트 설치는 멀티몰 1개당 **1회성 작업**이에요. 한 번 설치하면 이후 상품을 추가할 때 다시 설치하지 않아도 돼요. {% hint style="info" %} **멀티몰은 상품 정보와 이미지도 카페24에서 자동으로 연동되지 않기 때문에,** **스크립트 설치 후 \[+ 새 상품 등록]으로 상품을 직접 등록하고 동영상을 연결해야 해요.** 자세한 방법은 \[[상품과 동영상 연결하기](https://support.charlla.io/userguide/motion-thumbnail/mapping)] 문서를 참고해 주세요. {% 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/motion-thumbnail/installation.md?ask=&goal= ``` `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.