# 디스플레이 및 디자인 관리하기



# 일반 디스플레이(일반위젯)

> ## 일반위젯 사용예시

<p class="callout info">1. 메인슬라이드</p>

위젯코드 : ma-main-slider

\- 관리자 페이지

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/VMcimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/VMcimage.png)

\- 사용자 페이지

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/luTimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/luTimage.png)

<p class="callout info">**2. 메인 홍보 문구**</p>

위젯코드 : mb-main-text

1\. 관리자 페이지

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/gSiimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/gSiimage.png)

2\. 사용자 페이지

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/6JOimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/6JOimage.png)

<p class="callout info">3. 쇼츠 영상 출력</p>

위젯코드 : ma-sub-slider

1\. 관리자 페이지

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/SrYimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/SrYimage.png)

2\. 사용자페이지

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/sehimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/sehimage.png)

---

> ## 일반위젯 추가하기 (커스텀위젯)

1\. 위젯코드 박스를 클릭하여 직접입력을 선택합니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/jWHimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/jWHimage.png)

2\. 위젯코드를 입력합니다. 사이트 관리자가 구분하기 쉬운 코드로 입력하는 것이 좋습니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/yntimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/yntimage.png)

3\. 언어구분, 기기구분, 일자 등을 선택합니다.

4\. 위젯명을 입력합니다. 위젯명 또한 사이트 관리자가 구분하기 쉽도록 입력하는 것이 좋습니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/Iwtimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/Iwtimage.png)

5\. 디자이너 참조용 미디어크기를 작성합니다. 웹디자이너 혹은 웹퍼블리셔가 작업시 참조할 해당 위젯의 사이즈를 입력합니다.(참조)

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/JPbimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/JPbimage.png)

6\. 우측 상단 저장버튼을 클릭합니다.

7\. 위젯 컨텐츠(내용) 추가 버튼을 클릭하여 위젯 콘텐츠를 추가합니다. 하단 리스트에 빈 컨텐츠가 추가됩니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/2Oiimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/2Oiimage.png)

8\. 미디어연결 버튼을 클릭하여 해당 위젯에서 보여줄 이미지를 업로드합니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/j4Gimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/j4Gimage.png)

9\. 해당 위젯 클릭시 이동되는 페이지링크를 입력합니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/FRZimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/FRZimage.png)

10\. 이미지 하단에 추가될 해당 위젯의 설명을 입력합니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/5Riimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/5Riimage.png)

11\. 표시누락 체크박스를 클릭하면 여러가지 컨텐츠중 체크된 것만 누락시킬 수 있습니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/72Gimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/72Gimage.png)

12\. 컨텐츠 입력이 완료되면 우측에 저장버튼을 눌러 저장합니다.

\* 저장버튼 클릭시 자동으로 빈 컨텐츠가 1개 더 추가됩니다. 더이상 추가하고 싶지 않다면 우측 상단의 저장버튼을 눌러 저장합니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/YW5image.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/YW5image.png)

이제 커스텀 위젯 생성이 완료되었습니다.

> ## 일반위젯 수정하기

1\. 우측 상단의 녹색 폴더 버튼을 클릭하여 위젯을 조회합니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/IrIimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/IrIimage.png)

2\. 위젯을 검색하거나 원하는 위젯을 클릭합니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/e3limage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/e3limage.png)

3\. 선택한 위젯이 지정되었습니다. 수정하려는 부분을 다시 입력합니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/LC1image.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/LC1image.png)

3\. 하단부 수정시 -&gt; 하단부 저장 버튼 -&gt; 우측 상단 저장버튼 -&gt; 최종반영

상단부 수정시 -&gt; 우측 상단 저장버튼 -&gt; 최종반영

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/D2eimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/D2eimage.png)

# 품목 디스플레이(품목위젯)

> ### 품목위젯 사용예시

<table border="1" id="bkmrk-new-%EC%8B%A0%EC%83%81%ED%92%88-best-%EC%9D%B8%EA%B8%B0%EC%83%81%ED%92%88-re" style="border-collapse: collapse; width: 100.028%; height: 149.392px;"><colgroup><col style="width: 49.8718%;"></col><col style="width: 49.8718%;"></col></colgroup><tbody><tr style="height: 29.8785px;"><td style="height: 29.8785px;">new</td><td style="height: 29.8785px;">신상품</td></tr><tr style="height: 29.8785px;"><td style="height: 29.8785px;">best</td><td style="height: 29.8785px;">인기상품</td></tr><tr style="height: 29.8785px;"><td style="height: 29.8785px;">recommended</td><td style="height: 29.8785px;">추천상품</td></tr><tr style="height: 29.8785px;"><td style="height: 29.8785px;">event</td><td style="height: 29.8785px;">이벤트상품</td></tr><tr style="height: 29.8785px;"><td style="height: 29.8785px;">기타</td><td style="height: 29.8785px;">커스터마이징(기획상품 등등)</td></tr></tbody></table>

<div id="bkmrk-">[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-08/scaled-1680-/3kSimage.png)](https://manual.dabory.com/uploads/images/gallery/2024-08/3kSimage.png)</div>[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-08/scaled-1680-/Lpuimage.png)](https://manual.dabory.com/uploads/images/gallery/2024-08/Lpuimage.png)

---

> ###  3. 품목위젯 등록하기

 (1). 우측 상단의 저장버튼 좌측 녹색폴더 버튼을 클릭합니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-08/scaled-1680-/WJIimage.png)](https://manual.dabory.com/uploads/images/gallery/2024-08/WJIimage.png)

---

(2). 품목분류조회 모달창에서 등록학 품목위젯번호를 클릭합니다. new를 예제로 진행하겠습니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-08/scaled-1680-/1tmimage.png)](https://manual.dabory.com/uploads/images/gallery/2024-08/1tmimage.png)

---

(3). 품목분류 이름을 작성합니다. 관리자가 인식하기 쉬운 이름으로 네이밍합니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-08/scaled-1680-/51Eimage.png)](https://manual.dabory.com/uploads/images/gallery/2024-08/51Eimage.png)

(4). 위젯추가 버튼을 클릭하면 하단에 품목을 입력할 수 있는 칸이 생깁니다.

---

(5). 품목코드 입력창에 마우스 커서를 클릭하고 키보드의 enter 키를 누릅니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-08/scaled-1680-/wkgimage.png)](https://manual.dabory.com/uploads/images/gallery/2024-08/wkgimage.png)

---

(6). 등록된 품목리스트 중 품목위젯에 등록할 아이템을 선택합니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-08/scaled-1680-/XdAimage.png)](https://manual.dabory.com/uploads/images/gallery/2024-08/XdAimage.png)

---

(7). 우측에 저장버튼을 눌러 저장합니다.

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-08/scaled-1680-/kZPimage.png)](https://manual.dabory.com/uploads/images/gallery/2024-08/kZPimage.png)

# 타임 세일 디스플레이