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

# 메이크샵 가이드

본 문서는 메이크샵 호스팅 서비스를 이용하는 자사몰에서 모듈의 전체기능을 적용하는 방법을 가이드합니다.

<figure><img src="/files/7TIipi2ORa7e1lYhKelj" alt=""><figcaption></figcaption></figure>

1. 관리툴에서 [`전시모듈 코드를 복사`](/livesolution/guide-for-sellers/display-module-management.md#codecpoy)해 주세요.&#x20;
2. 메이크샵 관리자 페이지 > 디자인 편집창에 진입하여 모듈 삽입 위치를 확인해 주세요.
3. 디자인 편집 영역에 복사한 전시모듈 코드를 붙여넣어 주세요.
4. 편집사항을 저장하고, 자사몰에 적용된 내용을 확인합니다.

<figure><img src="/files/2CPPLqLDMrWWCWH8noLK" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">**`Step 1`**</mark>**&#x20; 메이크샵 쇼핑몰 관리자 로그인**

메이크샵 쇼핑몰 관리자 로그인 페이지에 진입하여 로그인 혹은 회원가입을 진행합니다.&#x20;

<figure><img src="/files/31R5y9smvlbTtaA8DEI2" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">**`Step 2`**</mark>**&#x20; 디자인 스킨 진입**

상단 GNB 메뉴에서 개별 디자인 클릭 > 디자인스킨관리 진입

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

### <mark style="color:blue;">**`Step 3`**</mark>**&#x20; 디자인 편집하기 진입**

디자인 편집하기 버튼 클릭 > 개별 디자인 편집창 열기

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

### <mark style="color:blue;">**`Step 4`**</mark>**&#x20; HTML 편집 영역에 코드 붙여넣기**

{% hint style="warning" %}
전시 모듈은 총 네 가지 케이스로 붙여 넣기가 가능합니다. 원하는 케이스에 맞는 적용 방법을 확인해 주세요.

1. [방송 목록 모듈만 붙여넣기](/livesolution/guide-for-sellers/display-module-guide.md#only-broadcastlist)
2. [전체 목록 모듈만 붙여넣기](/livesolution/guide-for-sellers/display-module-guide.md#only-livelist)
3. [방송 목록 모듈 + 전체 목록 모듈 붙여넣기](/livesolution/guide-for-sellers/display-module-guide.md#broadcastlist-and-livelist)
4. [방송 목록 모듈 + 전체 목록 모듈 + 예고 페이지 모듈 모두 붙여넣기](/livesolution/guide-for-sellers/display-module-guide.md#all)
   {% endhint %}

{% tabs %}
{% tab title="방송 목록 모듈 적용하기" %}
**삽입 위치 지정하기**

1. 좌측 메뉴 트리에서 모듈을 삽입하고 싶은 화면 클릭하기
2. 우측 디자인 편집 영역에서 모듈 삽입을 원하는 위치 확인하기

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

**코드 설정하기**

3. 우측 디자인 편집 영역에 관리툴에서 복사한 "방송 목록 모듈" 코드 붙여넣기
4. \[저장] 버튼 눌러 저장하기

<figure><img src="/files/62EgkifwS8KzxLwibDQJ" alt=""><figcaption></figcaption></figure>

5. 자사몰 전시페이지에서 정상적으로 노출되는지 확인하기

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

쇼핑몰 메인 페이지에 '방송 목록 모듈'을 넣는 경우, \ <mark style="color:purple;">●</mark> 메인 페이지 화면 클릭 후 > <mark style="color:orange;">●</mark> 메인 페이지 안, <mark style="color:green;">●</mark> 원하는 영역에 복사한 모듈 코드를 붙여 넣어 주세요.

<figure><img src="/files/QNN96UgXP5v6UNhgSCdM" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="전체 목록 모듈 적용하기" %}
**전체 목록 모듈이 노출될 페이지 추가하기**

1. \[페이지 추가] 버튼 클릭
2. 원하는 페이지명 입력 > 방송 목록 모듈이 적용된 화면 지정 > 원하는 디자인 번호 입력

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

**코드 설정하기**

3. 추가된 페이지 확인하고 클릭해서 진입하기
4. 디자인 편집 영역에 관리툴에서 복사한 "전체 목록 모듈" 코드 붙여넣고, 저장하기

<figure><img src="/files/F04v2epefdjKMLgOaWYQ" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="예고 페이지 모듈 적용하기" %}
**예고 페이지 모듈이 노출될 페이지 추가하기**

1. \[페이지 추가] 버튼 클릭
2. 원하는 페이지명 입력 > 방송 목록 모듈이 적용된 화면 지정 > 원하는 디자인 번호 입력

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

**코드 설정하기**

3. 추가된 페이지 확인하고 클릭해서 진입하기
4. 디자인 편집 영역에 관리툴에서 복사한 "예고 페이지 모듈" 코드 붙여넣고, 저장하기

<figure><img src="/files/4h4HQMhJQaHTXXSTrMw7" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

### &#x20;    <mark style="color:red;">코드 적용 시 주의사항</mark>&#x20;

* `'코드'`, `"코드"`와 같이 따옴표가 지워지지 않도록 유의해주세요.&#x20;
* 코드 수정 시 쉼표(,) 및 세미콜론(;)이 지워지지 않도록 유의해주세요.
* 코드에 기재된 externalServiceId와 moduleId가 변경되지 않도록 유의해주세요.