완성된 HTML 카페24에 적용하는 방법

적용 · 약 4분 분량

기획전을 다 만들었다면 이제 실제 쇼핑몰에 올릴 차례입니다. 카페24는 에디터의 HTML 모드를 지원하므로, 복사한 코드를 붙여넣기만 하면 됩니다.

1. 코드 복사하기

에디터 상단의 코드 보기 버튼을 누르면 두 가지 형태의 코드가 제공됩니다. 기존 페이지 안에 일부만 넣을 때는 DIV 코드, 기획전 전체를 한 페이지로 만들 때는 Full Page HTML을 복사합니다.

2. 카페24 관리자에서 위치 정하기

적용할 수 있는 대표적인 위치는 다음과 같습니다.

• 기획전 관리 — [쇼핑몰 설정 → 디자인/플러스앱 또는 프로모션의 기획전] 영역에서 새 기획전을 만들고 본문에 삽입
• 게시판 이벤트 글 — 이벤트 게시판 글쓰기에서 HTML 모드로 전환 후 삽입
• 메인/상세 추가 영역 — 디자인 편집에서 자유 HTML 영역에 삽입

3. HTML 모드로 붙여넣기

카페24 에디터(스마트 디자인 에디터)에서 글을 쓸 때, 반드시 HTML 편집 모드로 전환한 뒤 붙여넣어야 합니다. 일반 모드에 그대로 넣으면 코드가 글자 그대로 노출되거나 태그가 깨질 수 있습니다.

4. 이미지가 안 보일 때

붙여넣은 뒤 이미지가 깨진다면 대부분 이미지 주소가 외부 임시 링크이기 때문입니다. 다음을 확인하세요.

• 이미지를 카페24 웹FTP 또는 이미지 호스팅에 먼저 업로드
• 업로드된 정식 이미지 URL로 블록의 이미지 주소를 교체한 뒤 다시 코드 추출
• HTTPS 주소인지 확인 (HTTP 이미지면 일부 브라우저에서 차단)

5. 저장 후 미리보기

저장한 뒤 실제 쇼핑몰 주소로 접속해 데스크탑과 모바일에서 모두 확인합니다. 레이아웃이 모바일에서 깨진다면 ④ 반응형 만들기 글을 참고하세요.

← 가이드 목록으로 돌아가기