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

# 카페24 가이드

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

<figure><img src="/files/8GGmSxRtURa4nhuPbh0U" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/4FCxuGdTfqKytyvTAHGB" alt=""><figcaption></figcaption></figure>

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

### <mark style="color:blue;">**`Step 1`**</mark>**&#x20; 카페24 쇼핑몰 관리자 로그인**

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

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

### <mark style="color:blue;">**`Step 2`**</mark>**&#x20; 디자인 템플릿 생성**

<mark style="color:blue;">**2-1**</mark>  새로운 디자인 템플릿 생성\
디자인 (PC/모바일) > 디자인 보관함 > 기본 디자인 추가 혹은 카페24 디자인 센터에서 디자인 템플릿 구입 > 디자인명 입력 및 디자인 템플릿 선택 > 추가 버튼 클릭&#x20;

<figure><img src="/files/3bRQBITPe8OsI3AZBJzd" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**2-2**</mark>  기존에 있던 디자인 템플릿 복사하여 사용\
디자인(PC/모바일) > 디자인 보관함 > 기존 템플릿 선택 > 복사 버튼 클릭 > 복사 디자인명 입력 > 저장 버튼 클릭

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

### <mark style="color:blue;">**`Step 3`**</mark>**&#x20; 디자인 템플릿 편집**

생성된 디자인의 편집 버튼 클릭 > 스마트 디자인 편집창 열기

<figure><img src="/files/HTCgGCOA4O42fNIB9JLu" 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. 우측 미리보기와 HTML 편집 영역에서 모듈 삽입을 원하는 위치 확인하기

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

**코드 설정하기**

3. HTML 편집 영역에 복사한 모듈 코드 붙여넣기
4. \[저장] 버튼 눌러 저장하기

<figure><img src="/files/gUroQYpfhFZtiwzsUTsd" 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/3rTGUHEEtpM57ek2zux3" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

1. \[화면추가] 버튼 클릭
2. 추가되는 화면의 파일명은  `/livelist.html` 입력하여 저장하기

{% hint style="warning" %}
추가하는 화면의 파일명은 반드시 `/livelist.html` 로 입력하여 저장해주세요.

파일명을 변경하여 저장할 경우, 전체 목록 모듈이 정상적으로 동작하지 않습니다.
{% endhint %}

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

**코드 설정하기**

3. 전체화면보기 탭에서 추가된  `/livelist.html` 화면 확인하고 클릭해서 진입하기
4. HTML 편집 영역에 복사한 모듈 코드 붙여넣고, 저장하기

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

{% tab title="예고 페이지 모듈 적용 방법" %}
**예고 페이지 모듈이 노출될 화면 추가하기**&#x20;

1. \[화면추가] 버튼 클릭
2. 추가되는 화면의 파일명은  `/livebridge.html` 입력하여 저장하기

{% hint style="warning" %}
추가하는 화면의 파일명은 반드시 `/livebridge.html` 로 입력하여 저장해주세요.

파일명을 변경하여 저장할 경우, 전체 목록 모듈이 정상적으로 동작하지 않습니다.
{% endhint %}

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

**코드 설정하기**

3. 전체화면보기 탭에서 추가된  `/livebridge.html` 화면 확인하고 클릭해서 진입하기
4. HTML 편집 영역에 복사한 모듈 코드 붙여넣고, 저장하기

<figure><img src="/files/PQ97CO9UXOrytamzyWh2" 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가 변경되지 않도록 유의해주세요.

{% hint style="danger" %}
개별 페이지는 본 가이드에서 약속된 이름으로 생성합니다.\
약속된 이름으로 페이지를 생성하지 않는 경우, 전시 모듈이 정상 동작하지 않습니다.&#x20;

* 전체 목록 모듈의 경우 페이지 파일명 <mark style="color:red;">`/livelist.html`</mark> 으로 생성
* 예고 모듈의 경우 페이지 파일명 <mark style="color:red;">`/livebridge.html`</mark> 으로 생성
  {% endhint %}