> 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="/files/rkXEdkW2BD5jihrfKaYD" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<figure><img src="/files/1UQvLB8f7bhrTGRoZYiC" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}

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

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

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

<figure><img src="/files/qeyWC9aRRkkb5EViXNhY" 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="/files/jXbgpWMfZexIXmnBLwqP" 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="/pages/1ZbZKJfxk15SbxCDfkbT">/pages/1ZbZKJfxk15SbxCDfkbT</a></td><td><a href="/pages/oF5HWFjkDHludXzl440d">/pages/oF5HWFjkDHludXzl440d</a></td></tr><tr><td><strong>고도몰</strong></td><td>고도몰 디자인 관리에서 모듈 적용 방법을 가이드합니다.</td><td></td><td><a href="/pages/jJEswFG5rTztzFUFWokl">/pages/jJEswFG5rTztzFUFWokl</a></td><td><a href="/pages/gHrDrXx83ODBTze0Lj5F">/pages/gHrDrXx83ODBTze0Lj5F</a></td></tr><tr><td><strong>메이크샵</strong></td><td>메이크샵 디자인 편집에 모듈 적용 방법을 가이드합니다.</td><td></td><td><a href="/pages/NTYnEorWeGIkRTCkq4bU">/pages/NTYnEorWeGIkRTCkq4bU</a></td><td><a href="/pages/0xg2dbvIIwj4qJLj6RVt">/pages/0xg2dbvIIwj4qJLj6RVt</a></td></tr><tr><td><strong>아임웹</strong></td><td>아임웹 디자인모드에서 모듈 적용 방법을 가이드합니다.</td><td></td><td><a href="/pages/m3acouzRXxHBhw4F7BaQ">/pages/m3acouzRXxHBhw4F7BaQ</a></td><td><a href="/pages/HMhH06L7Bc6q8zLV0dDS">/pages/HMhH06L7Bc6q8zLV0dDS</a></td></tr></tbody></table>

.