Search
🖼️

그룹배너

쇼핑몰 메인페이지를 비롯한 다양한 영역에 이미지와 텍스트를 배치해 보세요.
그룹배너 기능을 이용하면 여러 개의 이미지와 텍스트를 하나의 그룹으로 묶어 원하는 레이아웃으로 배치할 수 있습니다.
이미지 또는 텍스트를 하나만 출력하고 싶다면 보다 간편한 배너 기능을 권장드립니다. 배너

디자인 코드란?

그룹배너는 디자인 코드의 한 종류입니다.
이때 디자인 코드란, 쇼핑몰의 스킨을 구성할 때 사용할 수 있는 치환 코드입니다.
일반적으로 {{$코드명}}의 형태로 제공되며, 이를 스킨에 삽입하면 설정에 따라 인스타그램 피드, 상품 목록, 카테고리 목록, 게시물 목록 등 다양한 화면이 나타납니다.
쇼핑몰에서 직접 만들 수 있는 코드 유형에는 상품목록, 상품분류, 게시물, 게시판 검색, 일반HTML, 이미지, 상품프리뷰, 인스타그램, 그룹배너가 있으며 이중 그룹배너는 관리자 > 디자인 > 디자인 > 그룹배너에서 별도로 관리할 수 있습니다.

그룹배너 등록하기

그룹배너를 통해 출력될 이미지와 텍스트 등의 요소를 등록하고, 등록한 요소를 어떤 모양으로 출력할지 설정합니다.
1.
관리자 > 디자인 > 디자인 > 그룹배너에 접근해 주세요.
2.
오른쪽 위 [등록]을 눌러 주세요.
3.
일반 설정 탭을 눌러 주세요.
4.
코드 설명을 작성해 주세요.
코드 설명은 쇼핑몰에서 사용하는 관리용 명칭이며, 쇼핑몰 운영에 영향을 주지 않습니다.
해당 코드가 어떤 영역에 출력되는지, 어떻게 사용되는 코드인지 추후에도 알아볼 수 있도록 설명을 자세히 작성해 주세요.
5.
노출 기간을 선택해 주세요.
무한 체크박스를 해제하면 기간을 선택할 수 있습니다.
노출 기간이 종료된 코드는 쇼핑몰에 노출되지 않습니다.
6.
사용 여부를 선택해 주세요.
사용 안 함을 선택하면 해당 코드는 쇼핑몰에 노출되지 않습니다.
7.
이미지를 업로드해 주세요.
이미지는 여러 개 등록할 수 있으며 하나의 이미지에는 2 개의 추가 이미지를 함께 업로드할 수 있습니다.
8.
업로드한 이미지별로 링크URL과 링크 연결 방식을 선택해 주세요.
링크URL은 https 부터 시작하도록 기재해 주세요. 프로토콜을 제외하고 입력할 경우, 쇼핑몰 하위 페이지로 인식합니다.
https://wisa.co.kr 을 입력하면 이미지 클릭 시 https://wisa.co.kr 로 이동합니다.
wisa.co.kr 을 입력하면 이미지 클릭 시 {쇼핑몰 도메인}/wisa.co.kr 로 이동합니다.
9.
업로드한 이미지별로 추가 설명을 입력해 주세요.
10.
화면 위 코드 설정 탭을 눌러 주세요.
11.
반복문 상단, 반복문 구문, 반복문 하단 영역에 HTML 코드를 입력해 주세요.
앞서 업로드하고 작성한 이미지와 설명 및 링크들이 어떤 구조로 출력될지 결정하는 단계입니다.
반복문 상단
div 태그 등을 사용하여 그룹배너를 통해 출력될 영역의 틀(컨테이너)를 열어주는 역할을 합니다.
반복문 구문
앞서 업로드하고 작성한 이미지와 설명 및 링크를 호출하는 다양한 치환코드 {{$배너이미지주소}} 등을 사용하여 실제 데이터가 출력되는 구조를 정합니다.
작성한 구조는 이미지 1 개에 적용되며, 출력할 이미지가 여러 개 있을 때는 동일 구조가 이미지 갯수만큼 반복됩니다. 이때의 이미지란 추가 이미지가 아니라 기본 이미지입니다. 추가 이미지는 기본 이미지의 부속 이미지로 취급됩니다.
<a href="{{$링크주소}}"><img src="{{$배너이미지주소}}" alt="{{$추가텍스트}}"></a>
코드를 위와 같이 작성하였을 때 그룹배너 내 업로드된 이미지가 3 개 있을 경우, 실제 쇼핑몰에서는 아래와 같이 출력됩니다.
<a href="{{$링크주소}}"><img src="{{$배너이미지주소}}" alt="{{$추가텍스트}}"></a>
<a href="{{$링크주소}}"><img src="{{$배너이미지주소}}" alt="{{$추가텍스트}}"></a>
<a href="{{$링크주소}}"><img src="{{$배너이미지주소}}" alt="{{$추가텍스트}}"></a>
이때 각각의 링크 주소와 이미지 주소, 텍스트는 이미지별로 달라집니다.
반복문 하단
반복문이 끝난 후 반복문 상단에서 열었던 틀(컨테이너)를 닫아주는 역할을 합니다.
데이터 없음
출력할 이미지가 없어, 반복문 구문이 호출되지 못할 때 대신 출력되는 영역입니다.
아래는 코드 구성 예시입니다.
이는 예시이므로 절대로 그대로 사용하여서는 안됩니다. 코드를 어떤식으로 구성하는지 참고용으로만 봐주시기 바랍니다.
<!-- 반복문 상단 --> <div class="visual"> <div class="swiper-container swiper_visual"> <div class="swiper-wrapper">
HTML
복사
<!-- 반복문 구문 --> <div class="swiper-slide"> <span class="pc"><a href="{{$링크주소}}"><img src="{{$배너이미지주소}}" alt="주배너"></a></span> <span class="tb"><a href="{{$링크주소}}"><img src="{{$추가이미지1주소}}" alt="서브배너"></a></span> <span class="mobile"><a href="{{$링크주소}}"><img src="{{$추가이미지2주소}}" alt="서브배너2"></a></span> <div class="text"> <p>{{$추가텍스트}}</p> </div> </div>
HTML
복사
<!-- 반복문 하단 --> </div> <div class="swiper-pagination num"></div> </div> <div class="arrow"> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <div class="btn_pause"></div> </div> </div>
HTML
복사
12.
출력 페이지를 선택해 주세요.
13.
오른쪽 위 [저장]을 눌러 주세요.

그룹배너 출력하기

그룹배너를 만들었다면 쇼핑몰 스킨에 그룹배너를 호출하는 코드를 삽입하여 실제 쇼핑몰에 노출시킬 수 있습니다.
1.
관리자 > 디자인 > 디자인 > 그룹배너에 접근해 주세요.
2.
미리 만들어둔 그룹배너의 코드를 확인하고 복사해 주세요.
그룹배너의 코드는 {{$사용자리스트(숫자)}} 형태를 하고 있습니다.
3.
관리자 > 디자인 > 디자인 > 스킨에 접근해 주세요.
4.
사용 중인 스킨을 찾아 [디자인 편집]을 눌러 편집창에 진입해 주세요.
5.
왼쪽 사이드바에서 편집할 페이지를 찾아 눌러 주세요.
6.
가운데 HTML 에디터에 미리 복사해 둔 {{$사용자리스트(숫자)}} 코드를 삽입해 주세요.
몇 번째 줄, 어느 위치에 삽입하느냐에 따라 출력되는 모양과 위치가 달라질 수 있으니 유의해 주세요.
7.
가운데 미리보기 화면을 통해 변경 사항을 확인해 주세요.
8.
오른쪽 위 [저장]을 눌러 주세요.

그룹배너 관리하기 - 이미지 및 정보 변경

쇼핑몰 메인 이미지, 대문 이미지, 비주얼 이미지 등 쇼핑몰 컨텐츠에 해당하는 이미지를 변경하거나 혹은 이미지를 눌렀을 때 이동되는 페이지 주소 등 전반적인 정보 변경이 필요하다면 아래의 내용을 참고해 주세요.
1.
관리자 > 디자인 > 디자인 > 그룹배너에 접근해 주세요.
2.
코드 설명 또는 코드 번호를 통해 관리할 그룹배너를 찾아 주세요.
3.
코드 설명, 코드 번호 또는 오른쪽 []를 눌러 그룹배너 수정 화면에 진입해 주세요.
4.
이미지를 변경해 주세요.
이미지에 마우스를 올렸을 때 오른쪽 위에 나타나는 Ⓧ를 눌러 기존 이미지를 삭제할 수 있고, 이미지 목록 오른쪽 [ + ]를 눌러 신규 이미지를 업로드할 수 있습니다.
이미지 아래에서 현재 업로드 되어 있는 이미지의 실제 사이즈를 확인할 수 있습니다. 특이사항이 없다면 기존 이미지와 동일한 사이즈의 이미지로 변경해 주세요.
5.
이미지별 링크 연결 방식과 링크URL을 변경해 주세요.
링크URL은 https 부터 시작하도록 기재해 주세요. 프로토콜을 제외하고 입력할 경우, 쇼핑몰 하위 페이지로 인식합니다.
https://wisa.co.kr 을 입력하면 이미지 클릭 시 https://wisa.co.kr 로 이동합니다.
wisa.co.kr 을 입력하면 이미지 클릭 시 {쇼핑몰 도메인}/wisa.co.kr 로 이동합니다.
6.
오른쪽 위 [저장]을 눌러 주세요.