# Shopify 웹사이트에 Hyperclass 채팅 위젯 추가하기

## Shopify 웹사이트에 Hyperclass 채팅 위젯 추가하기

웹사이트 방문자와 쉽게 소통하고 고객으로 전환시키는 방법을 찾고 계신가요? Shopify용 Hyperclass 웹챗이 완벽한 솔루션입니다! 이 가이드에서는 Shopify용 Hyperclass 웹챗을 시작하는 단계를 안내해드립니다.

***

## 웹사이트용 웹챗 임베드 코드 가져오기:

Sites(사이트) > Chat Widget(채팅 위젯) > Get Code(코드 가져오기)에서 임베드 코드를 복사하세요.

![채팅 위젯 코드 가져오기](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48297297829/original/oKtzhm7Qaeia1e1Pzl-q2_GbFteEF8ZoBw.gif?1683912268)

###

***

### 다양한 방법으로 Shopify 웹사이트에 커스텀 채팅 위젯을 추가하는 자세한 단계:

* Shopify 계정에 로그인: Shopify 계정으로 이동하여 로그인합니다.
* "Online Store" 섹션으로 이동: Shopify 대시보드에서 "Online Store" 섹션으로 이동합니다.

![Shopify Online Store 섹션](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48297324784/original/4ixY62gc7EwglJ9F0a4bwMoxpQXHH_Xtyw.jpeg?1683924952)

* 웹사이트 테마 편집: 편집하려는 테마를 선택하고 "**Actions**" 버튼을 클릭합니다. 드롭다운 메뉴에서 "**Edit code**"를 선택합니다.

![테마 Actions 버튼](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48297324783/original/7OOpzX5r1cGs_hKuMlyK7PFupzLej25itg.jpeg?1683924952)

![Edit code 선택](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48297324778/original/xDoNGM25Xom69HxzbfsPJM2bIG4oT58Mpw.png?1683924952)

* 테마의 theme.liquid 파일 열기: 파일 목록에서 "**Layout**" 폴더를 선택한 다음 "**theme.liquid**" 파일을 선택합니다.

![theme.liquid 파일 선택](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48297324780/original/WpuHKCkk_K3rGrEMk0fx8m0xINkUuO1K4Q.jpeg?1683924952)

* 임베드 코드 붙여넣기: **theme.liquid** 파일에서 태그를 찾아 그 위에 임베드 코드를 추가합니다.

![임베드 코드 추가](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48297324781/original/bYge5b1X9AAUYrVTDgNZfgmSkr3XM-tnqw.jpeg?1683924952)

* 변경사항 저장: 임베드 코드를 추가한 후 저장 버튼을 클릭합니다.

![저장 버튼 클릭](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48297324782/original/TLDL_HdeWPkxcNvDgXCxByiyh7ZTzjIqLg.jpeg?1683924952)

* 채팅 위젯 확인: 웹사이트로 이동하여 페이지를 새로고침하세요. 이제 채팅 위젯이 웹사이트에 표시됩니다.
* 올바르게 작동하는지 테스트해보시기 바랍니다.

***

*원문 최종 수정: Fri, 2 May, 2025 at 11:15 AM* *Hyperclass 사용 가이드 — hyperclass.ai*


---

# 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://hyperclass.gitbook.io/hyperclass-docs/and-sites/xml-sitemaps/add-highlevel-s-chat-widget-to-your-shopify-website.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.