> For the complete documentation index, see [llms.txt](https://docs.archisketch.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.archisketch.com/guide/dev-kr/builder/shopby/model-viewer-embed.md).

# 2.3. 샵바이: 모델 뷰어 삽입하기(Embed)

## 샵바이(Shop by): 모델 뷰어 삽입 방법

**샵바이 관리자 > 상품 관리** 상세 페이지에서 아키스케치 모델 뷰어를 삽입할 수 있습니다. 자세한 내용은 아래의 각 목차를 확인해주세요.

{% embed url="<https://cylinder.archisketch.com/?id=X1MNWceF0DE919CAF004414>" %}

## 임베드(Embed)란?

**임베드**(embed)는 다른 웹사이트나 애플리케이션에서 특정 콘텐츠를 가져와서 자신의 웹페이지에 삽입하는 방법을 말합니다. 샵바이(Shop by)에서는 이미지, 동영상 등 다양한 콘텐츠를 외부 웹사이트나 블로그에 삽입할 수 있습니다.

{% hint style="info" %}
📘 참조: 아키스케치 모델 뷰어 임베드 링크 획득 방법

**모델 뷰어 임베드 링크 획득 방법**은 [4.3. 모델 뷰어: 공유/임베드](/guide/dev-kr/contents/model-viewer/share-embed.md) 페이지에서 확인하실 수 있습니다.
{% endhint %}

## 제품 상세 에디터를 활용하여 임베드(Embed)하기

샵바이 **제품 상세 에디터**를 활용하여 모델 뷰어를 웹사이트나 상품 페이지에 손쉽게 임베드할 수 있습니다. 아래 단계별 안내에 따라 직접 작성 에디터를 사용하여 모델 뷰어를 임베드해 보세요.

{% stepper %}
{% step %}

### 1. 샵바이 관리자 로그인 및 상품 관리 페이지로 이동.

**샵바이 관리자 대시보드**에서 **상품 관리 > 상품 정보 조회/수정**(또는 **상품 등록**) 메뉴 버튼을 클릭하여 이동해주세요. 그 후, 상품 목록 페이지에서 모델 뷰어를 임베드하려는 상품을 선택합니다.

![](/files/CnuJtio9jIlKh9KX1Upp)
{% endstep %}

{% step %}

### 2. 상품 상세 페이지 편집

상품 상세 페이지에서 **상품 상세 탭**으로 이동한 후, **코드 보기 버튼**을 클릭해주세요.\
\&#xNAN;*(\* 상품 상세 탭 편집기 상태가 **"사용함"**&#xC73C;로 설정되어 있어야 임베딩이 가능합니다.)*

![](/files/RGzlu5i0MM2YHj2bZggo)
{% endstep %}

{% step %}

### 3. < iframe > 태그 삽입

**코드 보기** 버튼 클릭 후, 등장한 **HTML 입력란**에 **아키스케치 모델 뷰어 임베드 링크**를 넣어주세요. 넣은 후, 다시 **코드 보기** 버튼을 클릭하시면, **삽입된 모델 뷰어**를 확인 할 수 있습니다.

{% hint style="info" %}
📘 참조: 아키스케치 모델 뷰어 임베드 링크 획득 방법

**모델 뷰어 임베드 링크 획득 방법**은 [4.3. 모델 뷰어: 공유/임베드](/guide/dev-kr/contents/model-viewer/share-embed.md) 페이지에서 확인하실 수 있습니다.
{% endhint %}

![](/files/xrpWQVxTOuw98fLZfCyK)

상품 상세 영역 > HTML 뷰어

![](/files/IuKfmWZS7q0rSZDc0wio)

**코드 보기**를 다시 클릭하시면, 적용된 모델 뷰어를 확인 할 수 있습니다.
{% endstep %}

{% step %}

### 4. 수정된 제품 데이터 저장

**모델 뷰어** 삽입 작업을 완료하셨다면, **\[저장]** 버튼을 클릭하여, 제품을 수정해주세요.
{% endstep %}
{% endstepper %}