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

# 메이크샵

본 문서에서는 메이크샵 호스팅 서비스를 이용하는 자사몰에서 코드를 몰라도 비교적 쉽게 적용할 수 있는 방법을 가이드합니다. 다만, 간단하게 연동하는만큼 부가적인 커스텀이나 개별 화면에 대한 자사몰 내 이동은 다소 제약됩니다.

모든 기능을 연동하고 싶은 경우, [메이크샵 심화 연동](/livesolution/guide-for-sellers/old-displaymodule/advanced/makeshop.md)을 진행해주세요.

### &#x20;    <mark style="color:blue;">적용 순서</mark>

1. 본 문서의 [코드 블록](#undefined-1)을 클릭하여 복사해주세요.

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FLCvnB9D4Pvw01B1YrhnM%2F%E1%84%8F%E1%85%A1%E1%84%91%E1%85%A624%20%E1%84%80%E1%85%A1%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AB%E1%84%8B%E1%85%A7%E1%86%AB%E1%84%83%E1%85%A9%E1%86%BC%20%3E%20%E1%84%8C%E1%85%A5%E1%86%A8%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%89%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5%20%3E%201.png?alt=media&amp;token=54f8f150-8ba8-48fb-93c9-49b6311f572d" alt=""><figcaption></figcaption></figure>

2. 메이크샵 개별디자인 > 디자인스킨 관리 > 디자인 편집하기에서 필요한 영역에 붙여넣어주세요.

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2Fm0SfIPKs0J02j1H8ddt2%2Fimage.png?alt=media&amp;token=cb2cb1a2-bad0-45d6-ac8f-d4d1b420671a" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2Fl9JqfUkVALxvTfxlJPgI%2Fimage.png?alt=media&amp;token=bab68250-98f1-4cff-b1fb-024919d73f2c" alt=""><figcaption></figcaption></figure>

3. 코드 내 네이버로부터 전달 받으신 외부연동용 서비스 ID `externalServiceId`를 입력해주세요.

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2Ft8NIdc6v4UO94k8PYRlN%2F%E1%84%8F%E1%85%A1%E1%84%91%E1%85%A624%20%E1%84%80%E1%85%A1%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AB%E1%84%8B%E1%85%A7%E1%86%AB%E1%84%83%E1%85%A9%E1%86%BC%20%3E%20%E1%84%8C%E1%85%A5%E1%86%A8%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%89%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5%20%3E%203.png?alt=media&amp;token=48810866-c177-4266-9978-274697b2f46e" alt=""><figcaption></figcaption></figure>

4. 자사몰 스타일과 라이브 모듈의 스타일을 맞추고 싶으신 경우, [모듈 커스텀 설정](/livesolution/guide-for-sellers/old-displaymodule/customize.md) 가이드 문서를 참고하여 영역 좌우 간격, 폰트 크기 등을 조절해주세요.

5. 편집 사항을 저장하여 자사몰에 적용된 내용을 확인합니다.

<figure><img src="https://1894013035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzyFdXBMllxkiLLPLqcT%2Fuploads%2FM0upalAY9cFxXsRS0ool%2Fimage.png?alt=media&amp;token=68490902-1f09-4c2b-912b-96862012c7b7" alt=""><figcaption></figcaption></figure>

### &#x20;    <mark style="color:blue;">적용 케이스별 코드 블록 복사</mark>

적용하고 싶은 케이스에 따라 코드 블록 복사해주세요. \
코드 복사 이후에는 하단 메이크샵 디자인 편집창 적용 가이드대로 진행해주시면 됩니다.

* A. 방송 목록 모듈
  * A1 라이브 방송 목록
  * A2 숏클립 목록
* B. 전체 목록 모듈

{% tabs %}
{% tab title="A1 모듈만 적용" %}

### 라이브 방송 목록 모듈

다음 코드 블록을 복사하신 후, 라이브 목록을 노출하고자 하는 영역에 붙여넣어주세요. (예. 자사몰 메인 페이지 내 원하는 영역)

B목록 없이 적용하는 경우에 대한 코드이며, 이 경우 목록 내 더보기 버튼 클릭시 자사몰 페이지가 아닌 네이버에서 제공하는 기본 목록 페이지로 이동합니다.

{% code title="A1. 라이브 방송 목록 모듈" overflow="wrap" %}

```javascript
<!-- 모듈 로딩 런처 -->
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/0.20.1/index.js"></script>

<!--  모듈 초기화 영역 -->
<div id='broadcast-list'></div>

<script>
  // 모듈 초기화 코드
  lico.launcher({
    name: 'ShoppingLiveBroadcastList',
    module: {
      resourcePath: 'https://im.pstatic.net/live-commerce/products/broadcast-list/latest/real/',
      js: 'index.js',
      css: 'bundle.css'
    },
    moduleConfig: {
      externalServiceId: '', // 전달 받은 ID를 입력해주세요.
      target: document.getElementById('broadcast-list'),
    },
  })
</script>
```

{% endcode %}
{% endtab %}

{% tab title="A2 모듈만 적용" %}

### 숏클립 목록 모듈

다음 코드 블록을 복사하신 후, 숏클립 목록을 노출할 영역에 붙여넣어주세요. (예. 자사몰 메인 페이지 내 원하는 영역)

{% code title="A2. 숏클립 목록 모듈" %}

```javascript
<!-- 모듈 로딩 런처 -->
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/0.20.1/index.js"></script>

<!--  모듈 초기화 영역 -->
<div id='shortclip-list'></div>

<script>
  // 모듈 초기화 코드
  lico.launcher({
    name: 'ShoppingLiveBroadcastList',
    module: {
      resourcePath: 'https://im.pstatic.net/live-commerce/products/broadcast-list/latest/real/',
      js: 'index.js',
      css: 'bundle.css'
    },
    moduleConfig: {
      externalServiceId: '', // 전달 받은 ID를 입력해주세요.
      broadcasts : {displayType : "shortclip"},
      target: document.getElementById('shortclip-list'),
    },
  })
</script>

```

{% endcode %}
{% endtab %}

{% tab title="B모듈만 적용" %}

### 전체 목록 모듈

자사몰에 모든 라이브 및 숏클립 목록을 노출할 신규 페이지를 생성한 후, 다음 코드를 복사하여 붙여넣어주세요.

{% code title="전체 목록 모듈" overflow="wrap" %}

```javascript
<!-- 모듈 로딩 런처 -->
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/0.20.1/index.js"></script>

<!-- 모듈 초기화 영역 -->
<div id="broadcast-list-page"></div>

<script>
  // 모듈 초기화 코드
  lico.launcher({
    name: 'ShoppingLiveBroadcastListPage',
    module: {
      resourcePath: 'https://im.pstatic.net/live-commerce/products/broadcast-page/latest/real/',
      js: 'index.js',
      css: 'bundle.css'
    },
    moduleConfig: {
      externalServiceId: '', // 전달 받은 ID를 입력해주세요.
      header: {
        useFeature: true, // 헤더 노출 여부 (true/false)
        title: {
          text: '전체 라이브', // 헤더명 입력
        },
        backButton: {
          useFeature: true, // 백버튼 노출 여부 (true/false)
        },
      },
      display: {
        standby: { // 예고 영역 설정 
          layout: 'list', // 예고 영역 레이아웃 (list, grid)
        },
        onair: { // 온에어 영역 설정 
          layout: 'highlight', // 온에어 영역 레이아웃 설정 (list, grid, highlight)
        },
        replay: { // 다시보기 영역 설정 
          sortTypes: ['LATEST', 'SALE_AMOUNT'], // 다시보기 필터 설정. 'LATEST'는 미포함하여도 화면에 항상 노출됨 (최우선 노출)
          layout: 'list', // 다시보기 영역 레이아웃 설정 (list, grid)
        },
      },
      target: document.getElementById('broadcast-list-page'),
    }
  })
</script>
```

{% endcode %}
{% endtab %}
{% endtabs %}