배너 영역은 쇼핑몰 화면에서 배너가 노출되는 위치를 의미합니다. 운영자가 직접 배너를 추가할 위치를 지정할 수 있으니, 고객의 시선이 자연스럽게 닿는 주요 화면에 배치하는 것이 좋습니다.
카페24 쇼핑몰을 운영 중이라면 모렌비 배너관리자 앱을 이용하시는 분들이 많을 텐데요. 모렌비 배너관리자 앱을 통해 배너에 찰나 플레이어를 등록하는 방법을 소개해 드릴게요.
찰나의 파트너사이기도 한 모렌비는 카페24 이커머스 운영자가 쇼핑몰 디자인 스킨에 배너를 쉽게 적용할 수 있도록 '‘모렌비 배너관리자' 라는 무료 앱을 제공하고 있습니다. 이 앱을 활용하면 이미지 형태의 배너뿐 아니라 찰나의 영상 배너, 슬라이드 배너 등 다양한 형식을 쇼핑몰에 적용할 수 있어요.
1. 찰나 코드 준비
① 배너에 삽입할 영상 링크를 복사합니다.
찰나에 로그인 후 배너에 삽입할 영상 재생 설정을 마친 후 우측 상단의 링크를 복사합니다.
플레이어 설정: 컨트롤바 여부, 자동재생, 반복재생, 동영상 화면 비율 셋팅 가능
2. 모렌비 배너 관리자에서 배너 세팅하기
② 카페24 관리자에서 모렌비 배너관리자 앱을 엽니다.
카페24 사이드바의 [앱] > [마이앱]에서 '모렌비 배너관리자'를 찾은 후 [관리하기]를 클릭해 주세요.
③ 배너에 적용할 스킨 선택 후 배너 영역을 추가합니다.
관리자 탭 상단의 [스킨추가]를 선택하면 스킨 목록이 나타납니다. 이 중 배너를 적용할 스킨을 클릭해주세요.
상단 영역에 추가된 스킨을 선택한 후, 좌측 배너 영역에서 [배너 영역 추가]를 클릭합니다.
💡
④ 배너 영역에 이미지를 등록합니다.
배너 영역을 선택한 후 [배너 추가] 버튼을 클릭하고, 배너 영역에 적용할 이미지를 등록합니다.
⑤ 찰나 영상 링크(URL)를 삽입합니다.
하단의 [동영상 URL 1] 입력란에 찰나 영상 링크를 삽입하세요. 일반적으로 가로 영상의 화면 비율은 16:9, 세로 영상은 9:16으로 설정합니다. 비율을 모른다면 영상의 가로·세로 크기를 그대로 입력해주세요.
3. 쇼핑몰에 배너관리자 설치하기
⑥ 스킨별 설치코드를 복사합니다.
스킨별 메뉴에서 [스킨별 설치코드]를 클릭하면 팝업창이 열립니다. 여기서 설치코드 전체를 복사해주세요.
⑦ 디자인 편집창으로 이동합니다.
카페24 왼쪽 사이드바의 팔레트 모양 디자인 아이콘을 클릭해 [디자인 대시보드] 탭으로 접속한 후, [디자인 편집]을 클릭합니다.
⑧ 공통 레이아웃 파일을 열어 설치 코드를 삽입합니다.
스마트디자인 편집창에서 [전체화면보기]를 선택하고, [레이아웃(layout)] – [기본 레이아웃(basic)] – [공통 레이아웃(layout.html)] 순으로 폴더를 열어주세요.
편집창 하단의 [HTML]을 선택하고, ⑥번에서 복사한 스킨별 설치코드를 붙여넣은 후 [저장]을 클릭합니다. 동일한 방법으로 모바일 스킨에도 배너관리자 설치코드를 넣어주세요.
💡
HTML 코드 적용은 별도의 기술 지식 없이도 그대로 따라 할 수 있도록 되어 있어, PC와 모바일 페이지에 동일하게 설치하면 기기와 관계없이 일관된 배너 화면을 제공할 수 있어요.
4. 쇼핑몰에 배너코드 적용하기
⑨ 배너영역 코드예제를 복사합니다.
모렌비 배너관리자 탭 좌측의 [메인 비주얼] – [배너코드]를 클릭한 후, 배너영역 코드예제 전체를 복사합니다.
⑩ 코드예제를 붙여넣고 이미지 변수를 수정합니다.
스마트디자인 편집창의 [전체화면보기]에서 [쇼핑몰 메인(index.html)] 파일 클릭, 하단의 [HTML]을 선택하고 복사한 코드예제를 붙여넣은 후 상단의 [저장]을 클릭합니다. 이때 코드 마지막에 있는 이미지 변수 {#imgTag_1}를 {#imgTag_1_or_video_1}로 변경해야 영상 배너가 정상적으로 노출됩니다.
💡
찰나는 쇼핑몰 디자인에 맞춰 배너 스타일을 커스터마이징할 수 있는 옵션도 제공하니, 브랜드 개성에 맞는 디자인으로 조정해 사용해보세요.
Share article