📺

배너 관리

💡 기능 사용 전 반드시 필독!

💻 배너 관리란?

⚙️ 1. 배너 설정하기 (자동 설치)

접속 경로: [프리미엄 기능 > 배너관리]

🖥️ 3. 여백 추가하는 방법

🪄다른 기능 확인 하기

기능 사용 전 반드시 필독!

커스텀 설정 시 [카페24 디자인 > html 내 코드 삽입] 까지 모두 완료 해주셔야 쇼핑몰 내에서 보여지게 됩니다

직접 설치가 어렵다면? 상담채널을 통해 PC/MO의 설치 희망 위치가 표시 된 이미지를 전달 해주세요! 설치 작업을 도와드려요(3~5 영업일 소요)

카페24로 배너 이미지를 설정 해두셨다면 중복으로 보여질 수 있습니다

기존에 설정 해두었던 배너를 삭제하고 싶으시다면 카페24를 통해 확인 해주세요!

카페24 배너 설정 확인 방법

배너 관리란?

배너 관리 기능으로 편리하게 이미지&동영상을 넣을 수 있어요

배너 이미지를 만들었는데 html이 뭐지? 너무 어려워!

유튜브에 업로드 되어있는 상품 광고 영상을 쇼핑몰에서도 보여 줄 수 없을까?

쇼핑몰에 이미지를 넣고 싶지만 방법이 어려워 고민하고 계신가요?

알파 푸시의 배너 관리 기능을 사용하시면 쇼핑몰 내 원하는 위치에 이미지&동영상을 넣을 수 있어요!

html에 직접 코드를 설치해야하는 어려운 방법은 그만!

이미지&동영상을 첨부만하면 자동으로 등록되고 자유롭게 on/off 할 수 있는 편리한 기능으로

쇼핑몰에 방문한 고객의 눈길을 사로잡는 다양한 콘텐츠를 등록 해보세요

만약 지정된 위치(전체 페이지 최상단, 상세페이지 상/하단)가 아닌 다른 위치에 이미지&동영상을 넣고 싶다면

커스텀 설정 후 코드를 복사하여 직접 설치를 해주세요!

1. 배너 설정하기 (자동 설치)

접속 경로: [프리미엄 > 배너관리]

알파푸시 대시보드 접속 후[프리미엄 기능 > 배너관리]에서 

이미지 또는 동영상을 추가 할 PC/MO의 디자인 스킨을 선택 후 + 배너 만들기를 선택 해주세요

이미 다른 스킨에 설정을 해두셨더라도 다른 스킨에 이미지 또는 동영상을 추가 할 수 있어요

추가 될 배너 종류를 선택 해 설정을 완료 해주세요

•

띠 배너: 쇼핑몰 최상단에서 보여지는 형식 (텍스트만 등록 가능)

•

콘텐츠 배너: 페이지 안에 이미지가 삽입되는 형식 (JPG.PNG 형식의 이미지 파일 또는 이미지 및 동영상의 URL만 설정 가능)

원하시는 배너 종류를 클릭해 설정 방법을 확인 해보세요!

띠배너 설정 상세

콘텐츠 배너 설정 상세

콘텐츠 설정

•

콘텐츠가 여러개일때 1,2,3번의 순서대로 보여지고,  아이콘을 클릭한채로 드래그 시 순서를 바꿀 수 있어요

사용 중 토글을 클릭하면 off로 변경 되고, 비활성화 된 콘텐츠는 더이상 노출되지 않아요

배너정보

•

여러 개의 배너를 설정 해두셨을때, 관리자가 쉽게 구분 할 수 있도록 간단한 정보 및 히스토리를 입력 할 수 있어요

2. 커스텀 설정 (직접 설치)

커스텀 설정 시 [카페24 디자인 > html 내 코드 삽입] 까지 모두 완료 해주셔야 쇼핑몰 내에서 보여지게 됩니다

직접 설치가 어렵다면? 상담채널을 통해 PC/MO의 삽입 희망 위치가 표시 된 이미지를 전달 해주세요! 설치 작업을 도와드려요(3~5 영업일 소요)

접속 경로: [프리미엄 기능 > 배너관리]

커스텀 설정 클릭 후 배너 설정을 완료 해주세요

설정 메뉴는 자동 설치와 동일 합니다

배너 이미지 삽입을 위해 html 삽입 코드를 복사 해주세요

만약 대표 디자인이 아닌 스킨에 설치를 원하시는 경우 디자인 보관함에서 해당 스킨의 디자인을 편집 해주세요

잠깐!

•

반응형 스킨이 아니라면 PC와 모바일 스킨 모두 설치 작업을 해주셔야 합니다

(반응형 스킨은 1개의 스킨 디자인이 화면 너비를 인식해 자동으로 PC/MO 디자인이 전환되는 스킨을 뜻합니다)

•

스마트 디자인 Easy도 html 수정이 가능 합니다

이해를 돕기 위한 예시 이미지로 실제 적용 위치는 다를 수 있습니다

원하는 위치를 찾아 복사해둔 코드를 붙여 넣어주세요

디자인 편집창 좌측 상단의 저장 버튼을 클릭한 뒤 쇼핑몰의 캐시/쿠키 삭제 후 적용 된 모습을 확인 해보세요

미리보기에서 삽입을 원하는 위치 상/하단에 있는 영역을 클릭해보세요

HTML에서 음영 처리 된 영역이 클릭한 영역이므로, 음영 처리 된 박스를 기준으로 위치를 찾을 수 있어요

예시 이미지

3. 여백 추가하는 방법

기본적으로 이미지 삽입 시 기존 디자인을 밀어내고 배너 이미지가 삽입 되는 방식으로 자동 설치 됩니다

다만 쇼핑몰 디자인 구조가 특수한 경우 배너 이미지가 삽입되면서 기존의 쇼핑몰 디자인과 겹쳐질 수 있어요

이때 배너 이미지 하단에 여백을 추가로 삽입해서 기존의 디자인과 겹쳐 보이지 않도록 해주시면 간단하게 해결 됩니다

우측 이미지와 같은 경로에서 콘텐츠 설정 하단에 html을 삽입하는 창에 아래의 코드를 복사해 붙여넣고 저장해주세요! (띠배너 경로 동일)

카페24 디자인에서 별도의 수정을 하지 않으시더라도 알파푸시 내 html 설정이 적용됩니다

<script>document.addEventListener('DOMContentLoaded', () => { postMessageToOrigin('handleCustomBanner', 'header_fixed');});</script>
HTML
복사

설정 완료 후 쇼핑몰의 캐시/쿠키를 삭제 해서 확인 해주시면 되는데, 만약 설정 후에도 이미지가 겹치는 현상이 해결되지 않는 경우

1:1 상담을 통해 전달 해주세요!

동일한 위치에 이미지를 여러 개 등록 해두셨더라도 1개의 콘텐츠에만 여백을 삽입해주세요

다른 기능 확인 하기