> ## Documentation Index
> Fetch the complete documentation index at: https://guide.canape.im/llms.txt
> Use this file to discover all available pages before exploring further.

# 카페24에 공유하기

> 완성된 이벤트는 카페24 게시판 혹은 웹사이트에 클릭 한 번에 쉽게 넣을 수 있어요. 그 방법을 자세히 설명드릴게요.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/D9OmbFBuVVfbPUUf/images/TAwxtRHJp9ITBjN0DCMUjvXIo.avif?fit=max&auto=format&n=D9OmbFBuVVfbPUUf&q=85&s=910a0ca802ebf61d90efa2f3ca757460" alt="TAwxtRHJp9ITBjN0DCMUjvXIo.avif" width="2048" height="819" data-path="images/TAwxtRHJp9ITBjN0DCMUjvXIo.avif" />

## 카나페 이벤트 삽입 가능 영역

| 카테고리 | 페이지         | 데스크톱 | 모바일 |
| :--- | :---------- | :--- | :-- |
| 쇼핑몰  | 메인 페이지      | O    | O   |
| 쇼핑몰  | 마이페이지       | O    | O   |
| 쇼핑몰  | 회원가입 결과 페이지 | O    | O   |
| 상품   | 주문 완료 페이지   | O    | O   |
| 상품   | 상품 상세 페이지   | O    | O   |
| 게시판  | 공지사항        | O    | O   |
| 게시판  | 상품 사용후기     | O    | O   |
| 게시판  | 상품 Q\&A     | O    | O   |
| 게시판  | 자유게시판       | O    | O   |
| 게시판  | 이용안내 FAQ    | O    | O   |
| 게시판  | 1:1 맞춤상담    | O    | O   |
| 게시판  | 상품자유게시판     | O    | O   |
| 게시판  | 자료실         | O    | O   |
| 게시판  | 갤러리         | X    | X   |
| 게시판  | 한줄메모        | X    | X   |
| 팝업   | 팝업          | O    | X   |

## 게시판에 공유하기

1. 메인화면에서 쇼핑몰에 적용하고 싶은 이벤트 카드의 링크 버튼이 있어요. 해당 버튼을 누르면 팝업을 통해 임베드 코드가 나와요. 혹은 이벤트 편집기 우측 상단에 있는 배포 버튼을 누르면 역시 팝업을 통해 임베드 코드가 나와요. `코드 복사` 버튼을 눌러 임베드 코드를 복사해주세요.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/7sSqRIuSlWlXdMjEFBJvbbEaxgs.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=cdb98de24b15269136359dd44f1063ac" alt="7s Sq R Iu Sl Wl Xd Mj EFB Jvbb Eaxgs Avi" width="1600" height="924" data-path="images/7sSqRIuSlWlXdMjEFBJvbbEaxgs.avif" />

2. `관리자` 게시판 > 게시판 관리로 이동한 후, 확인할 게시물이 등록되어 있는 게시판의 '글보기' 버튼을 클릭해 해당 게시판 목록으로 이동해주세요.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/pMpKglMsWeBxRCaxC5WsD42VoY.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=2705a1bc3a1ec7a4c213233bfe790ce5" alt="P Mp Kgl Ms We Bx R Cax C5ws D42vo Y Avi" width="1600" height="924" data-path="images/pMpKglMsWeBxRCaxC5WsD42VoY.avif" />

3. 우측 하단의 '글쓰기' 버튼을 클릭하여 글 작성 페이지로 이동해주세요.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/8n3WPCGpQUJXscNMij70aPKB8AM.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=17c4ffd33dc59224c3efd3ecac7e9945" alt="8n3wpc Gp QUJ Xsc N Mij70a PKB8AM Avi" width="1600" height="924" data-path="images/8n3WPCGpQUJXscNMij70aPKB8AM.avif" />

4. 글 작성 페이지에 글쓰기 영역 위 `[⋮]`을 선택해 노출된 메뉴에서 `[< >]`를 선택하면 자동으로 생성되는 코드들을 모두 지운 후, 복사한 임베드 코드를 붙여 넣어주세요.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/0L884kbWViXtqpX3xnb6rxZ6G28.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=a52ebaf67b69a35cc9055a5f0eec454c" alt="0l884kb W Vi Xtqp X3xnb6rx Z6G28 Avi" width="1600" height="924" data-path="images/0L884kbWViXtqpX3xnb6rxZ6G28.avif" />

5. `등록` 버튼을 눌러 내용을 저장해주세요.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/Wa5Sej1kFLkGmuojfc0yz8updQ.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=a66f4e92d4663b3027145fc3489a1796" alt="Wa5sej1k F Lk Gmuojfc0yz8upd Q Avi" width="1600" height="924" data-path="images/Wa5Sej1kFLkGmuojfc0yz8updQ.avif" />

## 쇼핑몰에 공유하기

쇼핑몰에 공유하기

1. 카페24 쇼핑몰 관리자에 접속합니다.
2. 디자인 (PC/모바일) 메뉴를 클릭합니다.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/F3KnXzxA39lluL6RncThXwo3B9U.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=e57e2c619abe77a2130f228590646383" alt="F3kn Xzx A39llu L6rnc Th Xwo3b9u Avi" width="3840" height="2160" data-path="images/F3KnXzxA39lluL6RncThXwo3B9U.avif" />

3. 대표 디자인의 `디자인 편집` 버튼을 클릭합니다.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/ZOyyxNpAOSO96RfP5m0DKn8qYN8.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=714f1aa44654ccc208d0c93a3c8beb02" alt="Z Oyyx Np Aoso96rf P5m0d Kn8q YN8 Avi" width="3840" height="2160" data-path="images/ZOyyxNpAOSO96RfP5m0DKn8qYN8.avif" />

4. 디자인 페이지 좌측 하단 `</> HTML 수정` 버튼을 클릭합니다.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/EYqlkoulHB8qnxvQyfmMEfVMC0.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=e2659f9277798f394dd474aa6f33340a" alt="E Yqlkoul Hb8qnxv Qyfm M Ef VMC0 Avi" width="3840" height="2160" data-path="images/EYqlkoulHB8qnxvQyfmMEfVMC0.avif" />

5. 이벤트를 넣고 싶은 페이지를 좌측 메뉴에서 찾아 선택합니다.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/5mvH8Xl4p6RaRjLUGfRK6EnFVs.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=95894a4bacd1ba2af3d2a3abb24de1c7" alt="5mv H8xl4p6ra Rj LU Gf Rk6en F Vs Avi" width="3840" height="2160" data-path="images/5mvH8Xl4p6RaRjLUGfRK6EnFVs.avif" />

6. 이벤트를 넣고 싶은 페이지로 이동 후 하단 HTML 에디터에서 현재 페이지의 수정하고 싶은 위치의 요소(텍스트)를 찾습니다. (Ctrl+F, cmd+F를 통해 요소를 검색하면 찾기 쉬워요!)

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/2tOFbkjrkMHktT1LfwN8o8x1KX8.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=ce4e5ff3f24188bb990c26aec365305f" alt="2t O Fbkjrk M Hkt T1lfw N8o8x1kx8 Avi" width="3840" height="2160" data-path="images/2tOFbkjrkMHktT1LfwN8o8x1KX8.avif" />

7. 찾은 HTML 요소 하단에 카나페 임베드 코드를 붙여 넣습니다.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/Lm68IdLpc7JLHpoabmpjT5VEdrw.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=76bd5828a82dfa346e81e1c27001a9db" alt="Lm68id Lpc7jl Hpoabmpj T5V Edrw Avi" width="3840" height="2160" data-path="images/Lm68IdLpc7JLHpoabmpjT5VEdrw.avif" />

8. 붙여 넣은 후 우측 상단의 `모두 저장` 버튼을 클릭합니다.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/9G8wLhiUSJUmX6zr73EpwKImZis.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=3440d1890deac405c026f2ac1c9da00d" alt="9g8w Lhi USJ Um X6zr73epw K Im Zis Avi" width="3840" height="2160" data-path="images/9G8wLhiUSJUmX6zr73EpwKImZis.avif" />

9. 저장 후 실제 쇼핑몰 페이지에 들어가시면 임베드된 이벤트의 모습을 확인할 수 있습니다.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/KxCUEcf9B4us07p6vjJ05lm3Ug.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=cbb60e2fe96ccb56a42f04f91d4f980e" alt="Kx CU Ecf9b4us07p6vj J05lm3ug Avi" width="1920" height="1080" data-path="images/KxCUEcf9B4us07p6vjJ05lm3Ug.avif" />

## 상품 상세 페이지에 공유하기

상품 상세 페이지의 임베드하여 노출 시키는 방법을 알려드려요.

1. 카페24 쇼핑몰 관리자에 접속합니다.
2. 상품 메뉴를 클릭합니다.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/oXHLV9PWuhykn9ghnXWc5ahOtVM.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=9cd82a564c47f89263a85cba49457412" alt="O XHLV9P Wuhykn9ghn X Wc5ah Ot VM Avi" width="3840" height="2160" data-path="images/oXHLV9PWuhykn9ghnXWc5ahOtVM.avif" />

3. 상품 메뉴 클릭 후 `상품 등록`, `상품 목록`을 통해 상품 설정 상세 페이지로 이동합니다.
4. 설정 상세 페이지에서 `상품 상세설명` 섹션을 찾고 코드 수정 버튼을 클릭합니다.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/IexxNyx2Pfn7TSHauj4TJTvVFQA.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=9ccf36f3202b2aed45c4df5611c4219e" alt="Iexx Nyx2pfn7ts Hauj4tj Tv VFQA Avi" width="3840" height="2160" data-path="images/IexxNyx2Pfn7TSHauj4TJTvVFQA.avif" />

5. 배포한 카나페 이벤트의 임베드 코드를 붙여 넣고 다시 한 번 코드 수정 버튼을 클릭해 저장합니다.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/dxljHnrjLCGvIE7GwAmPFcA8SA.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=ae62ecfde3a6654a88e6016bcb0b20d4" alt="Dxlj Hnrj LC Gv Ie7gw Am P Fc A8SA Avi" width="3840" height="2160" data-path="images/dxljHnrjLCGvIE7GwAmPFcA8SA.avif" />

6. 마지막으로 맨 아래 `상품등록`, `상품수정` 버튼을 눌러 팝업을 저장합니다. (미리 보기에서는 이벤트가 노출되지 않아 확인이 어렵습니다.)

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/GioLVZPDh0N2KVqIOLdXLAM.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=f90e41eec9bac39c72d51215f2b9200a" alt="Gio LVZP Dh0n2k Vq IO Ld XLAM Avi" width="3840" height="2160" data-path="images/GioLVZPDh0N2KVqIOLdXLAM.avif" />

7. 등록 또는 수정한 실제 상품 상세 페이지로 이동해 이벤트를 확인합니다.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/uY8UNWRo01t84SNueVaa1g2fE.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=0690b9e487686f393910af68a6ce42b4" alt="U Y8UNW Ro01t84s Nue Vaa1g2f E Avi" width="3840" height="2160" data-path="images/uY8UNWRo01t84SNueVaa1g2fE.avif" />

## 카페24 팝업에 공유하기

카페24 팝업에서 카나페 이벤트를 노출 시키는 방법을 알려 드려요.

<Danger>
  카페24 팝업에 노출 시킬 때 모바일에서는 이벤트 노출이 어렵습니다.
</Danger>

1. 카페24 쇼핑몰 관리자에 접속합니다.
2. 디자인 (PC/모바일) 메뉴를 클릭합니다.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/ZjueUk89CxtiPPbK2cVzAxBYU.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=34410862e5af4c13b242de31bef554b0" alt="Zjue Uk89cxti P Pb K2c Vz Ax BYU Avi" width="3840" height="2160" data-path="images/ZjueUk89CxtiPPbK2cVzAxBYU.avif" />

3. 배너/팝업 메뉴를 클릭합니다.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/3hWhTXjJhZW8ElzL1024EpZ4Ck.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=5ae742759099c774a1969cb32a6016e8" alt="3h Wh T Xj Jh Zw8elz L1024ep Z4ck Avi" width="3840" height="2160" data-path="images/3hWhTXjJhZW8ElzL1024EpZ4Ck.avif" />

4. PC 메뉴에서 `팝업 등록` 버튼을 클릭합니다.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/8CqSLezZnXBeBfpjvsd4MfzC6Lc.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=91f404241908a9372f5909ba3782943f" alt="8cq S Lez Zn X Be Bfpjvsd4mfz C6lc Avi" width="3840" height="2160" data-path="images/8CqSLezZnXBeBfpjvsd4MfzC6Lc.avif" />

5. 팝업 에디터 페이지에서 아래로 스크롤 해 `팝업창 디자인` 섹션을 찾고 코드 수정 버튼을 클릭합니다.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/d9BUBA7tQrPhYYvEm6YJWVhlRdw.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=95ec4c19b901682c4a569278a72f43cb" alt="D9buba7t Qr Ph Y Yv Em6yjw Vhl Rdw Avi" width="3840" height="2160" data-path="images/d9BUBA7tQrPhYYvEm6YJWVhlRdw.avif" />

6. 배포한 카나페 이벤트의 임베드 코드를 붙여 넣고 다시 한 번 코드 수정 버튼을 클릭해 저장합니다.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/4hiveuDcxiV0kfKyxnokP8Igmtg.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=816813681fef9d1e87dc4ff792f9940f" alt="4hiveu Dcxi V0kf Kyxnok P8igmtg Avi" width="3840" height="2160" data-path="images/4hiveuDcxiV0kfKyxnokP8Igmtg.avif" />

7. 마지막으로 맨 아래 `저장` 버튼을 눌러 팝업을 저장합니다. (미리 보기에서는 이벤트가 노출되지 않아 확인이 어렵습니다.)

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/qp673w9RS0xaPLecmKpQPBoH44o.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=ea8654e0a1c08f2cf8d8ac163e047e5c" alt="Qp673w9rs0xa P Lecm Kp QP Bo H44o Avi" width="3840" height="2160" data-path="images/qp673w9RS0xaPLecmKpQPBoH44o.avif" />

8. 아래 이미지와 같이 팝업이 세팅되면 카페24 팝업 세팅이 완료됩니다.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/QYb8I7jFH7C9cvfES7L6iso6P0.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=604121132cb421b0906aaa133ddd5a83" alt="Q Yb8i7j Fh7c9cvf Es7l6iso6p0 Avi" width="3840" height="2160" data-path="images/QYb8I7jFH7C9cvfES7L6iso6P0.avif" />

## 이벤트 위 아래에 이미지 삽입하기

카페24 임베드시에 위 아래에 이미지를 넣고 싶을 경우

1. 일단 코드 보기 버튼 누르고 카나페 코드 붙여넣기

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/mzUDDwIauZOKKvculVzCaBxB5S8.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=3916deaa46dfabc9ac2f1990cf69bc75" alt="Mz UD Dw Iau ZOK Kvcul Vz Ca Bx B5S8 Avi" width="1600" height="924" data-path="images/mzUDDwIauZOKKvculVzCaBxB5S8.avif" />

2. \[\<>] 코드보기 버튼 한 번 더 눌러서 끄기

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/0dp8QcuW5nKHmXsbqvvzK2f07c.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=e57ccab2a259c7888a90b4eefe750070" alt="0dp8qcu W5n K Hm Xsbqvvz K2f07c Avi" width="1600" height="924" data-path="images/0dp8QcuW5nKHmXsbqvvzK2f07c.avif" />

3. 카나페 이벤트 영역 이미지 위 아래 넣고 싶은 위치에 이미지 넣기

<img src="https://mintcdn.com/dodamind-b0c9d0b4/3KMeiYAoPch9PpwM/images/4XuGcsEvuStHdWD5RMSXi8RGnFA.avif?fit=max&auto=format&n=3KMeiYAoPch9PpwM&q=85&s=1a5a0e776dbf4f9520bcff0b414e598e" alt="4xu Gcs Evu St Hd WD5RMS Xi8r Gn FA Avi" width="1600" height="924" data-path="images/4XuGcsEvuStHdWD5RMSXi8RGnFA.avif" />

<Tip>
  카나페 이벤트 영역 표시 이미지를 잡아서 원하는 위치로 끌어주시면 순서 변경도 가능합니다!
</Tip>

<Info>
  카나페로 제작되는 콘텐츠의 기본 가로 너비는 960px이며 만약 기존에 다른 px로 작업해오셨다면 스타일 → 맨 하단에 ‘임베드 가로값 설정’에서 기존에 작업하시던 가로 너비 값을 입력해주세요!
</Info>

## 이벤트 공유가 불가능한 페이지

⚠️ 다음과 같은 페이지 및 기능에서는 카페24 쇼핑몰에 이벤트 업로드가 어려워요!

**1. 카페24 갤러리, 한 줄 메모 게시판 유형**

`< >` 버튼이 없는 에디터에서는 코드 입력이 불가능하여 해당 게시판에서는 임베드 코드를 사용할 수 없어 이벤트 노출이 불가능합니다.

**2. 카페24 기본 팝업 (모바일)**

모바일 팝업 업로드 시 에디터에 `< >` 버튼이 없어 코드를 삽입하는 기능이 없고 이미지만 업로드 가능해 임베드 노출이 불가능합니다.
