> For the complete documentation index, see [llms.txt](https://help.makeshop.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.makeshop.co.kr/manual/goods/undefined/undefined-3.md).

# 상품 진열 디자인

## 관리자 메뉴 위치

`디자인` > `디자인 관련 기능 설정` > `상품 진열 디자인`

## 메뉴 안내 및 설정 방법

기능  설정 시 별도 디자인 / 코딩 작업 없이 설정을 통해 가상태그가 생성되며, \
개별디자인을 통해 원하는 위치에 넣어주면 상품 진열 디자인이 적용돼요.

{% tabs %}
{% tab title="진열 목록" %}

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

① 등록 버튼&#x20;

② 선택 삭제 - 삭제시 기존 개별디자인이 적용되어 있어도 노출되지 않아요.

③ 타이틀 - 클릭시 수정 페이지로 이동해요.

④ 가상태그 복사&#x20;

⑤ 가상태그 확인 - 클릭시 가상태그를 확인할 수 있습니다. 가상태그에 적힌 번호는 No. 과 동일해요.

⑥ 삭제&#x20;

⑦ 사용여부 - OFF시 쇼핑몰에서 미노출 돼요.
{% endtab %}

{% tab title="진열 등록" %}

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

① : \[1-1]\~\[1-4] 설정에 따라 디자인 샘플을 확인할 수 있어요.

①-① : 디자인 레이아웃 선택&#x20;

①-② : 이미지 배너 사용여부 및 위치를 설정&#x20;

①-③ : 더보기 버튼 사용여부 및 위치 설정&#x20;

①-④ : 타이틀 노출 여부&#x20;

①-⑤ : 서브 타이틀 노출 여부

<figure><img src="/files/9jMGR87RaygdmAvHSoTw" alt=""><figcaption></figcaption></figure>

② 사용여부 \
사용안함 설정시 쇼핑몰에 노출되지 않아요.

③ 기간 설정 \
노출 기간을 설정할 수 있어요. 단, 기간이 지나도 사용여부는 변경되지 않아요.

④ 타이틀\
\[1-4] 타이틀 노출 여부 체크시 노출됩니다. 타이틀 내용 및 폰트 사이즈와 색상을 설정할 수 있어요.

⑤ 서브 타이틀\
\[1-5] 노출 여부 체크시 노출돼요. 서브 타이틀 내용 및 폰트 사이즈와 색상을 설정할 수 있어요.

⑥ 타이틀 정렬\
타이틀과 서브타이틀의 정렬을 설정할 수 있어요. (각각 정렬 설정은 불가)

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

⑦ 상품 정보 노출 옵션

* 진열에 노출 시키고 싶은 정보를 설정할 수 있어요.
* 아이콘, 상품명, 추가 상품명, 소비자가, 판매가, 할인율, 미리보기, 찜하기 버튼, 리뷰 수 노출 가능&#x20;

⑧ 상품 정보 노출 옵션

* ⑦ 에 할인율 선택시 노출되는 설정이에요. 할인율에 대한 계산 기준을 선택할 수 있어요.
* 소비자가격 기준 계산 : (소비자가격 - 할인가격) / 소비자가 \* 100
* 판매가 기준 계산 : (판매가격 - 할인가격) / 판매가격 \* 100 -할인가격이 없을시, 판매가격으로 계산돼요.
* 할인율이 소수점으로 떨어지는 경우, 반올림 처리되며, 할인율이 0원이거나 소수점 0.5 미만은 노출되지 않습니다.&#x20;

⑨ 상품  추가\
진열할 상품을 등록 / 삭제 / 순서 조정 할 수 있어요.

<div align="left"><figure><img src="/files/s8nOqyFYjilNJ2dyTt2I" alt=""><figcaption></figcaption></figure></div>

⑩ PC / 모바일 진열 옵션

* 열 개수 : 열에 보여질 상품 갯수를 설정할 수 있어요.
* 썸네일 이미지 : 썸네일에 노출시킬 이미지를 선택해요.
* 품절 상품 : 품절 상품에 대한 정책을 선택할 수 있어요.&#x20;

⑪ PC 배너 이미지 / 모바일 배너 이미지

* 배너 이미지 및 링크를 첨부할 수 있어요.
* \[1-2] 이미지 사용을 체크해주시면 노출돼요.

⑫ 슬라이드 옵션&#x20;

* 롤링 속도 및 수동 롤링 설정을 할 수 있어요.&#x20;
* \[1-1]에 슬라이드 타입의 디자인을 선택하면 노출돼요. (PC/모바일 동일)&#x20;

⑬ 슬라이드 반복 여부&#x20;

* 슬라이드 반복 여부를 설정할 수 있어요.&#x20;
* \[1-1]에 슬라이드 타입의 디자인을 선택하면 노출되고, PC / 모바일 별로 설정 가능해요.

⑭ 더보기 버튼

* \[1-3] 더보기 사용 체크시 노출돼요.
* 더보기 버튼 텍스트를 직접 입력하고, PC / 모바일 별로 링크를 넣을 수 있어요.

⑮ 미리보기&#x20;

* 미리보기시, 아래 기능은 동작되지 않으므로 참고해 주세요.\
  1\) 상품 클릭시 페이지 이동\
  2\) 위시리스트 버튼 동작 및 카운팅\
  3\) 리뷰수 카운팅 개별디자인 작업후 쇼핑몰에서 확인시 정상 작동돼요.
  {% endtab %}
  {% endtabs %}

## 디자인 작업 방법

메인 :  `디자인` > `디자인 편집하기`  >  `중앙 디자인` > `메인`

상품 분류 :  `디자인` > `디자인 편집하기`  >  `중앙 디자인` > `상품관련` > `상품 분류 페이지`

상품 상세 :  `디자인` > `디자인 편집하기`  >  `중앙 디자인` > `상품관련` > `상품 상세 페이지`

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

① 원하는 위치에 복사한 가상태그를 넣어주세요.

② 저장버튼을 눌러 수정해 주세요.

## 적용 예시

<figure><img src="/files/1YYbgtA3m4J9MjR70ayk" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
참고

* 폰트는 쇼핑몰 body에 적용된 폰트로 적용돼요.
* 상품 정보 내의 폰트 사이즈는 body에 적용된 기본 폰트 사이즈 기준으로 자동 사이즈 조정되어 노출돼요.
* 상품 분류 페이지에 개별디자인 적용시, 각 분류에 해당하는 상품만 노출돼요.
* 해당하는 상품이 없는 분류에서는 미노출되므로 참고해 주세요.
* 세트 상품은 할인율이 지원되지 않아요.
* 가격 대체 문구를 사용하는 상품은 할인율이 노출되지 않아요.
  {% endhint %}