> For the complete documentation index, see [llms.txt](https://nsl-solution.gitbook.io/livesolution/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nsl-solution.gitbook.io/livesolution/guide-for-sellers/display-module-guide.md).

# 자사몰 전시모듈 삽입 가이드

## 기본적인 프로세스 이해하기 <a href="#modulecopy-process" id="modulecopy-process"></a>

자사몰에 전시모듈 삽입은 기본적으로 아래와 같은 프로세스로 진행됩니다.

> **관리툴에서 편집한 전시모듈의 코드 복사해서 → 자사몰 HTML 디자인 편집창에 붙여넣고 → 자사몰 전시 페이지에서 확인하기 → 자유롭게 편집하기**

## <mark style="color:blue;">**`Step 1`**</mark>**&#x20; 관리툴에서 모듈 편집하고 코드 복사하기**

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FwhG8DIXTrGzcSW9FQp3Q%2Fimage.png?alt=media&amp;token=6c8bf40d-66d9-4fd2-b9c9-b088b57d9295" alt=""><figcaption></figcaption></figure>

모듈 편집과 코드 복사에 대한 상세 내용은 [전시 모듈 관리 메뉴](broken://pages/Gx3skefidcbw0f2NgBzN) 알아보기에서 확인해 주세요.

## <mark style="color:blue;">**`Step 2`**</mark>**&#x20; 자사몰에 전시모듈 붙여넣기**

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FgcJNLwBC4p7kn1lxssRw%2Fimage.png?alt=media&amp;token=3aa8dfd7-8f85-4fc6-874a-dad0e65d9de0" alt=""><figcaption></figcaption></figure>

전시 모듈을 자사몰에 붙여넣는 방법으로는 일부 모듈만 붙여넣는 방법과, 세 가지 모듈을 전부 붙여넣는 방법이 있습니다. 자사몰의 상황에 따라 맞는 방법을 선택해주세요. **처음부터 끝까지 가이드에 맞게 적용해주셔야 자사몰에서 정상적으로 노출됩니다.**

{% hint style="warning" %}
전시 모듈에는 "자사몰 동시 송출"로 설정된 라이브와 "자사몰 노출"로 설정된 숏클립만 노출됩니다.\
라이브솔루션을 처음 연동하셨다면, 관리툴에서 라이브와 숏클립을 자사몰에도 노출될 수 있도록 설정을 변경해주세요.\
\- **관리툴 > 라이브 수정**에서 "자사몰 동시송출" 설정을 "송출함"으로 변경해 주세요. \
\- **관리툴 > 숏클립 수정**에서 "자사몰 노출" 설정을 "노출함"으로 변경해 주세요.
{% endhint %}

### **1. 방송 목록 모듈만 적용하기** <a href="#only-broadcastlist" id="only-broadcastlist"></a>

방송 목록 모듈만 자사몰 페이지에 붙여넣어 주세요. 나머지 페이지들은 네이버 쇼핑라이브 페이지로 연결됩니다.

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2F2dxsqUXNl2i4uPeX2xBU%2Fimage.png?alt=media&amp;token=5ab5c4f5-391f-4d11-ac33-33ec2a64fee3" alt=""><figcaption></figcaption></figure>

### **2. 전체 목록 모듈만 적용하기** <a href="#only-livelist" id="only-livelist"></a>

전체 목록 모듈만 자사몰 페이지에 붙여넣어 주세요. 나머지 페이지들은 네이버 쇼핑라이브 페이지로 연결됩니다.

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FHToX888e2X5k3f0vybAW%2Fimage.png?alt=media&amp;token=b008b979-8d08-4523-be48-d09b2d42fc72" alt=""><figcaption></figcaption></figure>

### **3. 방송 목록 모듈과 전체 목록 모듈만 적용하기** <a href="#broadcastlist-and-livelist" id="broadcastlist-and-livelist"></a>

방송 목록 모듈과 전체 목록 모듈을 자사몰 페이지에 붙여넣어 주세요. 나머지 페이지들은 네이버 쇼핑라이브 페이지로 연결됩니다.

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2Fmkr61IeY2bn5uMEbmZDB%2Fimage.png?alt=media&amp;token=b2d2587f-9eb2-4b77-b88e-3c1b62d1b22f" alt=""><figcaption></figcaption></figure>

### **4. 모듈 전부 적용하기** <a href="#all" id="all"></a>

방송 목록 모듈과 전체 목록 모듈, 예고 페이지 모듈을 모두 자사몰에 붙여넣는 방법입니다.

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FnEhUYfaJsGWOw0bYyUkh%2Fimage.png?alt=media&amp;token=aca90dda-b906-46cb-a1d8-7de1c7babb29" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}

#### 코드 적용 시 주의사항

* 코드 수정 시 `'코드'`, `"코드"`와 같이 따옴표가 지워지지 않도록 유의해주세요. 코드 수정이 필요한 경우 따옴표 안의 값만 변경합니다.&#x20;
* 코드 수정 시 쉼표(,) 및 세미콜론(;)이 지워지지 않도록 유의해주세요.
* **만약 위와 같은 케이스로 잘못 적용되어 원인 파악이 어려운 경우, 코드를 다시 복사하여 처음부터 시도해주세요.**
  {% endhint %}

## <mark style="color:blue;">**`Step 3`**</mark>**&#x20; 자사몰 전시페이지에서 적용 확인하기**

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2Fh6GPFqF5EYZ8TaWHqH00%2Fimage.png?alt=media&amp;token=6a616b2d-f813-4f14-81ba-621923ff3ae5" alt=""><figcaption></figcaption></figure>

가이드에 따라 전시 모듈 코드 붙여넣기를 완료하였다면, 자사몰 전시페이지로 이동하여 전시모듈이 정상적으로 노출되는지 꼭 확인해 주세요.

{% hint style="danger" %}
**전시모듈 코드를 삽입했는데, 보이지 않아요!**

코드를 복사&붙여넣는 과정에서 코드 일부가 누락되었거나, 가이드와 달리 적용되었을 수 있습니다.

<mark style="color:red;">기존에 삽입했던 전시모듈 코드를 삭제</mark>하고 가이드에 따라 <mark style="color:red;">처음부터 다시 전시 모듈 코드를 붙여넣기를 권장</mark>드립니다.
{% endhint %}

## <mark style="color:blue;">**`Step 4`**</mark>**&#x20; 자유롭게 모듈 편집하기**

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2F0A1rZ79XAQudBo73GugL%2Fimage.png?alt=media&amp;token=7727614e-0c5a-48a4-ae26-d6edb090be0a" alt=""><figcaption></figcaption></figure>

전시모듈이 자사몰 페이지에 정상적으로 삽입 되었다면, 해당 모듈은 더이상 가이드에 따라 붙여넣는 작업을 할 필요가 없습니다. 삽입된 모듈을 관리툴 > 솔루션 > 전시 모듈 관리 에서 자유롭게 편집하세요. 편집한 내용은 그대로 자사몰 전시페이지에 삽입된 전시모듈까지 한 번에 반영됩니다.&#x20;

{% hint style="danger" %}
자사몰 삽입 완료된 전시모듈만 관리툴 모듈편집 내용이 그대로 반영됩니다.

가이드에 따라 자사몰에 삽입하지 않은 전시모듈은 모듈을 편집하여도 적용되지 않으니 주의해 주세요.
{% endhint %}

## 플랫폼별 적용 가이드 <a href="#guidelist" id="guidelist"></a>

사용율이 높은 호스팅사 네 곳에 대하여 가이드를 제공하며, 아래 포함되지 않는 호스팅사의 가이드는 제공하지 않습니다.

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-type="content-ref"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>카페24</strong></td><td>카페24 스마트에디터에서 모듈 적용 방법을 가이드합니다.</td><td></td><td><a href="/livesolution/guide-for-sellers/old-displaymodule/simple/cafe24.md">카페24</a></td><td><a href="/livesolution/guide-for-sellers/display-module-guide/cafe24.md">카페24 가이드</a></td></tr><tr><td><strong>고도몰</strong></td><td>고도몰 디자인 관리에서 모듈 적용 방법을 가이드합니다.</td><td></td><td><a href="/livesolution/guide-for-sellers/old-displaymodule/simple/godo.md">고도몰</a></td><td><a href="/livesolution/guide-for-sellers/display-module-guide/godomall.md">고도몰 가이드</a></td></tr><tr><td><strong>메이크샵</strong></td><td>메이크샵 디자인 편집에 모듈 적용 방법을 가이드합니다.</td><td></td><td><a href="/livesolution/guide-for-sellers/old-displaymodule/simple/makeshop.md">메이크샵</a></td><td><a href="/livesolution/guide-for-sellers/display-module-guide/makeshop.md">메이크샵 가이드</a></td></tr><tr><td><strong>아임웹</strong></td><td>아임웹 디자인모드에서 모듈 적용 방법을 가이드합니다.</td><td></td><td><a href="/livesolution/guide-for-sellers/old-displaymodule/advanced/imweb.md">아임웹 심화 연동</a></td><td><a href="/livesolution/guide-for-sellers/display-module-guide/imweb.md">아임웹 가이드</a></td></tr></tbody></table>

.
