# 배너

* 내 쇼핑몰 원하는 배너 영역에 영상을 추가할 수 있어요.

<figure><img src="https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_676ca94cf5c14452b9c4bd00ebe84947/commerce_service/%EB%94%94%EC%9E%90%EC%9D%B8%EC%84%BC%ED%84%B0/freeskin_charlla/freeskin_charlla_banner.png" alt=""><figcaption><p>고도몰 무료스킨 > 비키</p></figcaption></figure>

### ● PC

* 찰나 > 라이브러리에서 추가하려는 영상을 선택해요.
* 동영상 채우기 옵션을 OFF 해요.
* 영상이 추가될 배너 사이즈에 맞게 사이즈 크기를 입력해요.
* \[저장 및 업데이트]를 클릭해 변경된 내용을 저장해요.

<figure><img src="https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_676ca94cf5c14452b9c4bd00ebe84947/commerce_service/%EB%94%94%EC%9E%90%EC%9D%B8%EC%84%BC%ED%84%B0/freeskin_charlla/freeskin_charlla18-1.png" alt=""><figcaption><p>찰나 > 라이브러리</p></figcaption></figure>

* 추가하려는 영상의 디스플레이어 코드에서 '비디오 태그' 옵션을 선택 후 복사해요.

<figure><img src="https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_676ca94cf5c14452b9c4bd00ebe84947/commerce_service/%EB%94%94%EC%9E%90%EC%9D%B8%EC%84%BC%ED%84%B0/freeskin_charlla/freeskin_charlla18-2.png" alt=""><figcaption><p>찰나 > 라이브러리 > 디스플레이어 복사</p></figcaption></figure>

* 고도몰 어드민 > 디자인 > 디자인 설정 > 디자인 스킨 레이아웃 설정 페이지에 접속해요.
* 페이지 왼쪽 아래 '메인' 왼쪽 + 버튼을 클릭 후 '쇼핑몰 메인본문'을 클릭해요.

<figure><img src="https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_676ca94cf5c14452b9c4bd00ebe84947/commerce_service/%EB%94%94%EC%9E%90%EC%9D%B8%EC%84%BC%ED%84%B0/freeskin_charlla/freeskin_charlla10.png" alt=""><figcaption><p>고도몰 어드민 > 디자인 > 디자인 설정 > 디자인 스킨 레이아웃 설정 페이지</p></figcaption></figure>

* 메인 본문 '\<div class="main\_visual">' 내용을 찰나에서 복사한 디스플레이어 코드로 수정해요.

<figure><img src="https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_676ca94cf5c14452b9c4bd00ebe84947/commerce_service/%EB%94%94%EC%9E%90%EC%9D%B8%EC%84%BC%ED%84%B0/freeskin_charlla/freeskin_charlla18.png" alt=""><figcaption><p>고도몰 어드민 > 디자인 > 디자인 설정 > 디자인 스킨 레이아웃 설정 > 메인 > 쇼핑몰 메인본문</p></figcaption></figure>

* 코드 수정 후 \[디자인 페이지 저장] 버튼을 클릭해요.

<figure><img src="https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_676ca94cf5c14452b9c4bd00ebe84947/commerce_service/%EB%94%94%EC%9E%90%EC%9D%B8%EC%84%BC%ED%84%B0/freeskin_charlla/freeskin_charlla12.png" alt=""><figcaption><p>고도몰 어드민 > 디자인 > 디자인 설정 > 디자인 스킨 레이아웃 설정</p></figcaption></figure>

### ● 모바일

* 찰나 > 라이브러리에서  추가하려는 영상의 디스플레이어 코드를 복사해요.

<figure><img src="https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_676ca94cf5c14452b9c4bd00ebe84947/commerce_service/%EB%94%94%EC%9E%90%EC%9D%B8%EC%84%BC%ED%84%B0/freeskin_charlla/freeskin_charlla09.png" alt=""><figcaption><p>찰나 > 라이브러리</p></figcaption></figure>

* 고도몰 어드민 > 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 페이지에 접속해요.
* 페이지 왼쪽 아래 '메인' 왼쪽 + 버튼을 클릭 후 '쇼핑몰 메인본문'을 클릭해요.

<figure><img src="https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_676ca94cf5c14452b9c4bd00ebe84947/commerce_service/%EB%94%94%EC%9E%90%EC%9D%B8%EC%84%BC%ED%84%B0/freeskin_charlla/freeskin_charlla14.png" alt=""><figcaption><p>고도몰 어드민 > 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 페이지</p></figcaption></figure>

* 메인 본문 > 메인 배너 '\<div class="video-section">' 내용을 찰나에서 복사한 디스플레이어 코드로 수정해요.

<figure><img src="https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_676ca94cf5c14452b9c4bd00ebe84947/commerce_service/%EB%94%94%EC%9E%90%EC%9D%B8%EC%84%BC%ED%84%B0/freeskin_charlla/freeskin_charlla17.png" alt=""><figcaption><p>고도몰 어드민 > 모바일샵 > 모바일샵 디자인 관리 > 메인 > 쇼핑몰 메인본문</p></figcaption></figure>

* 코드 수정 후 \[디자인 페이지 저장] 버튼을 클릭해요.

<figure><img src="https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_676ca94cf5c14452b9c4bd00ebe84947/commerce_service/%EB%94%94%EC%9E%90%EC%9D%B8%EC%84%BC%ED%84%B0/freeskin_charlla/freeskin_charlla16.png" alt=""><figcaption><p>고도몰 어드민 > 모바일샵 > 디자인 페이지 수정</p></figcaption></figure>

{% hint style="success" %}

1. 쇼핑몰 메인본문 상단 '최근 저장 내역 보기'에서 이전에 저장된 내용들을 확인할 수 있어요.
2. 쇼핑몰 메인본문 하단 '편집된 소스와 원본 소스 비교'에서 원본 소스와 수정된 소스 내용을 비교해서 볼 수 있어요.
   {% endhint %}


---

# 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://godomall-help.nhn-commerce.com/beginner/design/video/shop/banner.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.