> 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)을 진행해주세요.
### 적용 순서
1. 본 문서의 [코드 블록](#undefined-1)을 클릭하여 복사해주세요.
2. 메이크샵 개별디자인 > 디자인스킨 관리 > 디자인 편집하기에서 필요한 영역에 붙여넣어주세요.
3. 코드 내 네이버로부터 전달 받으신 외부연동용 서비스 ID `externalServiceId`를 입력해주세요.
4. 자사몰 스타일과 라이브 모듈의 스타일을 맞추고 싶으신 경우, [모듈 커스텀 설정](/livesolution/guide-for-sellers/old-displaymodule/customize.md) 가이드 문서를 참고하여 영역 좌우 간격, 폰트 크기 등을 조절해주세요.
5. 편집 사항을 저장하여 자사몰에 적용된 내용을 확인합니다.
### 적용 케이스별 코드 블록 복사
적용하고 싶은 케이스에 따라 코드 블록 복사해주세요. \
코드 복사 이후에는 하단 메이크샵 디자인 편집창 적용 가이드대로 진행해주시면 됩니다.
* A. 방송 목록 모듈
* A1 라이브 방송 목록
* A2 숏클립 목록
* B. 전체 목록 모듈
{% tabs %}
{% tab title="A1 모듈만 적용" %}
### 라이브 방송 목록 모듈
다음 코드 블록을 복사하신 후, 라이브 목록을 노출하고자 하는 영역에 붙여넣어주세요. (예. 자사몰 메인 페이지 내 원하는 영역)
B목록 없이 적용하는 경우에 대한 코드이며, 이 경우 목록 내 더보기 버튼 클릭시 자사몰 페이지가 아닌 네이버에서 제공하는 기본 목록 페이지로 이동합니다.
{% code title="A1. 라이브 방송 목록 모듈" overflow="wrap" %}
```javascript
```
{% endcode %}
{% endtab %}
{% tab title="A2 모듈만 적용" %}
### 숏클립 목록 모듈
다음 코드 블록을 복사하신 후, 숏클립 목록을 노출할 영역에 붙여넣어주세요. (예. 자사몰 메인 페이지 내 원하는 영역)
{% code title="A2. 숏클립 목록 모듈" %}
```javascript
```
{% endcode %}
{% endtab %}
{% tab title="B모듈만 적용" %}
### 전체 목록 모듈
자사몰에 모든 라이브 및 숏클립 목록을 노출할 신규 페이지를 생성한 후, 다음 코드를 복사하여 붙여넣어주세요.
{% code title="전체 목록 모듈" overflow="wrap" %}
```javascript
```
{% endcode %}
{% endtab %}
{% endtabs %}