# 메이크샵 - 추천 적용하기

이 문서에서는 메이크샵 기반의 쇼핑몰에서 추천을 쉽게 적용할 수 있도록 안내하고 있습니다.

## **PC/웹 환경**

### **1. 쇼핑몰에서 추천을 적용할 영역 확인하기**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/8j6ayprbnt/1606796975079/1.png" alt=""><figcaption></figcaption></figure>

1. 쇼핑몰 상품 검색 화면에서 키보드의 F12키를 눌러서 개발자 도구를 엽니다. (설정에 따라 창이 흰색으로 표시될 수 있습니다.)\
   \*또는 크롬 기준으로 설정 > 도구 더보기 > 개발자 도구를 클릭합니다.
2. 개발자 도구에서 요소 선택 아이콘을 클릭합니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/8j6ayprbnt/1606797577020/2.png" alt=""><figcaption></figcaption></figure>

1. contentWrapper 영역을 확인합니다.

<br>

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/8j6ayprbnt/1606797635167/3.png" alt=""><figcaption></figcaption></figure>

1. contentWrap 영역을 확인합니다.

<br>

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/8j6ayprbnt/1606797674225/4.png" alt=""><figcaption></figcaption></figure>

1. content 영역을 확인합니다. 추천을 이 영역 안에 삽입하기 위해 영역의 너비(1100 px)를 확인합니다.<br>

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/8j6ayprbnt/1606797873123/5.png" alt=""><figcaption></figcaption></figure>

1. prdSearch 영역을 확인합니다. 추천을 이 영역의 하단에 삽입할 것이므로 div id(prdSearch)를 기억합니다.

### **2. 추천 만들기**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/8j6ayprbnt/1606902553374/6.png" alt=""><figcaption></figcaption></figure>

1. 확인한 영역의 너비에 맞추어 추천을 생성합니다.

{% hint style="info" %}
화살표 영역을 고려한 추천 너비 설정에 대한 내용은 [추천 에디터 디자인 가이드](/old-admin/ai-recommendation/ai-recommendation-create/design-guide.md)를 확인해 주세요.
{% endhint %}

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/8j6ayprbnt/1705891951045/image.png" alt=""><figcaption></figcaption></figure>

1. 추천 코드를 복사합니다.

{% hint style="info" %}
추천 코드 복사 방법은 [새로운 추천 만들기](/old-admin/ai-recommendation/ai-recommendation-create.md)를 확인해 주세요.
{% endhint %}

### **3. 추천 코드 삽입하기**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/8j6ayprbnt/1606798159787/8.png" alt=""><figcaption></figcaption></figure>

1. 메이크샵의 디자인 에디터를 실행합니다.
2. 상품 검색 결과 화의 소스 코드에서 확인한 영역들의 id를 확인합니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/8j6ayprbnt/1606798220712/9.png" alt=""><figcaption></figcaption></figure>

1. content 영역 안의 prdSearch 영역 하단에 추천을 노출시키기 위해 prdSearch 코드 다음에 추천 코드를 삽입하고 저장합니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/8j6ayprbnt/1606798286409/10.png" alt=""><figcaption></figcaption></figure>

1. 쇼핑몰 상품 검색 결과 화면에서 추천 적용 결과를 확인합니다.

***

## **모바일 환경**

### **1. 쇼핑몰에서 추천을 적용할 영역 확인하기**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/8j6ayprbnt/1606807386895/1.png" alt=""><figcaption></figcaption></figure>

1. 쇼핑몰 상품 검색 화면에서 키보드의 F12키를 눌러서 개발자 도구를 엽니다. (설정에 따라 창이 흰색으로 표시될 수 있습니다.)\
   \*또는 크롬 기준으로 설정 > 도구 더보기 > 개발자 도구를 클릭합니다.
2. 개발자 도구에서 디바이스 툴바 아이콘을 클릭합니다.
3. 새로 고침(F5 키)를 누르면 PC에서 모바일 화면을 확인할 수 있습니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/8j6ayprbnt/1606807518951/2.png" alt=""><figcaption></figcaption></figure>

1. 개발자 도구에서 요소 선택 아이콘을 클릭합니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/8j6ayprbnt/1606807543609/3.png" alt=""><figcaption></figcaption></figure>

1. container 영역을 확인합니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/8j6ayprbnt/1606807615377/5.png" alt=""><figcaption></figcaption></figure>

1. contents 영역을 확인합니다. 추천을 이 영역 안에 삽입하기 위해 div id(contents)를 기억합니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/8j6ayprbnt/1606807670137/4.png" alt=""><figcaption></figcaption></figure>

1. search 영역을 확인합니다. 추천을 이 영역의 하단에 삽입할 것이므로 main id(search)를 기억합니다.

***

### **2.추천 만들기**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/8j6ayprbnt/1606807737020/6.png" alt=""><figcaption></figcaption></figure>

1. 모바일 유형의 추천을 생성합니다.

{% hint style="info" %}
모바일은 추천 상품 영역이 자동으로 전체 너비에 맞춰집니다.<br>
{% endhint %}

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/8j6ayprbnt/1705891965123/image.png" alt=""><figcaption></figcaption></figure>

1. 추천 코드를 복사합니다.

{% hint style="info" %}
추천 코드 복사 방법은 [새로운 추천 만들기](/old-admin/ai-recommendation/ai-recommendation-create.md)를 확인해 주세요.
{% endhint %}

### **3. 추천 코드 삽입하기**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/8j6ayprbnt/1606808299451/8.png" alt=""><figcaption></figcaption></figure>

1. 메이크샵의 모바일 디자인 에디터를 실행합니다.
2. 상품 검색 결과 화면의 소스 코드에서 확인한 영역들의 id를 확인합니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/8j6ayprbnt/1606808367654/9.png" alt=""><figcaption></figcaption></figure>

1. contents 영역 안의 search 영역 하단에 추천을 노출시키기 위해 search 코드 다음에 추천 코드를 삽입하고 저장합니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/8j6ayprbnt/1606808397417/10.png" alt=""><figcaption></figcaption></figure>

1. 모바일 쇼핑몰 상품 검색 결과 화면에서 추천 적용 결과를 확인합니다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.groobee.ai/old-admin/ai-recommendation/shoppingmall/makeshop.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.