쇼핑몰 메인페이지를 비롯한 영역에 이미지와 텍스트를 배치해 보세요.
배너 기능을 이용하면 이미지 또는 텍스트를 하나씩 배치할 수 있습니다.
여러 개의 이미지와 텍스트를 그룹으로 묶어 다양한 레이아웃으로 출력하고 싶다면 그룹배너 기능을 이용해 주세요.
그룹배너
디자인 코드란?
그룹배너는 디자인 코드의 한 종류입니다.
이때 디자인 코드란, 쇼핑몰의 스킨을 구성할 때 사용할 수 있는 치환 코드입니다.
일반적으로 {{$코드명}}의 형태로 제공되며, 이를 스킨에 삽입하면 설정에 따라 인스타그램 피드, 상품 목록, 카테고리 목록, 게시물 목록 등 다양한 화면이 나타납니다.
쇼핑몰에서 직접 만들 수 있는 코드 유형에는 상품목록, 상품분류, 게시물, 게시판 검색, 일반HTML, 이미지, 상품프리뷰, 인스타그램, 스킨배너가 있으며 이중 스킨배너는 관리자 > 디자인 > 디자인 > 배너에서 별도로 관리할 수 있습니다.
배너 등록하기
배너를 통해 출력할 이미지 또는 텍스트 등의 요소를 등록합니다.
1.
관리자 > 디자인 > 디자인 > 배너에 접근해 주세요.
2.
오른쪽 위 [
등록]을 눌러 주세요.
3.
배너명을 입력해 주세요.
배너명은 쇼핑몰에서 사용하는 관리용 명칭이며, 쇼핑몰 운영에 영향을 주지 않습니다.
해당 코드가 어떤 영역에 출력되는지, 어떻게 사용되는 코드인지 추후에도 알아볼 수 있도록 자세히 작성해 주세요.
4.
노출 기간을 선택해 주세요.
무한 체크박스를 해제하면 기간을 선택할 수 있습니다.
노출 기간이 종료된 코드는 쇼핑몰에 노출되지 않습니다.
5.
링크를 입력해 주세요.
배너를 통해 출력될 이미지 또는 텍스트를 클릭하였을 때 이동될 페이지를 선언합니다.
링크URL은 https 부터 시작하도록 기재해 주세요. 프로토콜을 제외하고 입력할 경우, 쇼핑몰 하위 페이지로 인식합니다.
https://wisa.co.kr 을 입력하면 이미지 클릭 시 https://wisa.co.kr 로 이동합니다.
wisa.co.kr 을 입력하면 이미지 클릭 시 {쇼핑몰 도메인}/wisa.co.kr 로 이동합니다.
6.
배너 타입을 선택해 주세요.
이미지 : 아래 기본 이미지 업로드 영역을 통해 이미지를 업로드할 수 있습니다. 배너 코드를 스킨에 삽입하면 업로드한 이미지가 출력됩니다.
이미지 오버 : 아래 기본 이미지 업로드 영역과 오버 이미지 업로드 영역을 통해 이미지를 업로드할 수 있습니다. 배너 코드를 스킨에 삽입하면 기본 이미지가 출력되고, 이미지에 마우스를 가져다 대면 오버 이미지가 나타납니다. 반응형 스킨에서는 이용할 수 없습니다.
텍스트 : 아래 텍스트 입력 영역을 통해 텍스트를 입력할 수 있습니다. 배너 코드를 스킨에 삽입하면 입력한 글자가 출력됩니다.
7.
오른쪽 위 [
저장]을 눌러 주세요.
배너 출력하기
배너를 만들었다면 쇼핑몰 스킨에 배너를 호출하는 코드를 삽입하여 실제 쇼핑몰에 노출시킬 수 있습니다.
1.
관리자 > 디자인 > 디자인 > 배너에 접근해 주세요.
2.
미리 만들어둔 배너의 코드를 확인하고 복사해 주세요.
배너의 코드는 {{$스킨배너(숫자)}} 형태를 하고 있습니다.
3.
관리자 > 디자인 > 디자인 > 스킨에 접근해 주세요.
4.
사용 중인 스킨을 찾아 [디자인 편집]을 눌러 편집창에 진입해 주세요.
5.
왼쪽 사이드바에서 편집할 페이지를 찾아 눌러 주세요.
6.
가운데 HTML 에디터에 미리 복사해 둔 {{$스킨배너(숫자)}} 코드를 삽입해 주세요.
몇 번째 줄, 어느 위치에 삽입하느냐에 따라 출력되는 모양과 위치가 달라질 수 있으니 유의해 주세요.
7.
가운데 미리보기 화면을 통해 변경 사항을 확인해 주세요.
8.
오른쪽 위 [
저장]을 눌러 주세요.
배너 관리하기
쇼핑몰에 단건으로 출력되고 있는 이미지 또는 텍스트를 변경하거나 혹은 영역을 눌렀을 때 이동되는 페이지 주소를 변경하고 싶다면 아래의 내용을 참고해 주세요.
1.
관리자 > 디자인 > 디자인 > 배너에 접근해 주세요.
2.
배너명 왼쪽 미리보기 이미지를 통해 수정할 배너를 확인해 주세요.
3.
오른쪽 [
]를 눌러 수정 페이지에 진입해 주세요.
4.
링크를 변경해 주세요.’
링크URL은 https 부터 시작하도록 기재해 주세요. 프로토콜을 제외하고 입력할 경우, 쇼핑몰 하위 페이지로 인식합니다.
https://wisa.co.kr 을 입력하면 이미지 클릭 시 https://wisa.co.kr 로 이동합니다.
wisa.co.kr 을 입력하면 이미지 클릭 시 {쇼핑몰 도메인}/wisa.co.kr 로 이동합니다.
5.
이미지와 텍스트를 변경해 주세요.
6.
오른쪽 위 [
저장]을 눌러 주세요.