주 콘텐츠로 건너뛰기

배너/팝업

배너, 팝업은 사이트에 접속하면 나타나는 작은 창이에요.
쇼핑몰 페이지 어디든 표시할 수 있어요.
이목을 끌 수 있어 공지부터 각종 홍보, 행사 안내까지 다양한 곳에 사용되어요.
PC는 팝업, 모바일에서는 팝업 또는 배너로 표시 선택이 가능해요.

PC

  1. [관리자] 디자인 > 배너/팝업 > PC(탭) 으로 이동해 주세요.

  2. 목록에서 '팝업 등록' 버튼을 눌러 주세요.

  3. 진행 여부를 선택하고, 쇼핑몰 디자인은 반드시 현재 대표 디자인을 선택해 주세요.

  4. 팝업 노출 기간을 설정해 주세요.
    설정한 기간 내라도 진행 여부가 대기 또는 종료일 경우 팝업이 노출되지 않아요.

  5. 팝업 노출 위치는 화면 왼쪽 제일 윗부분을 기준으로 픽셀 단위로 설정할 수 있어요.

 

모바일

  1. [관리자] 디자인 > 배너/팝업 > 모바일(탭) 으로 이동해 주세요.

  2. 목록에서 '등록' 버튼을 눌러 주세요.

  3. 팝업 노출 기간을 설정해 주세요.
    설정한 기간 내라도 진행 여부가 대기 또는 종료일 경우 팝업이 노출되지 않아요. 

  4. 이미지를 등록하고, 해당 이미지를 선택할 때 연결될 페이지가 있다면 페이지 주소(URL)를 입력해 주세요.

 

 

Note

반응형 디자인 사용 시

PC 디자인이 반응형이고 모바일 전용 디자인 사용 설정을 '사용안함'으로 선택한 경우, PC 버전의 팝업을 등록하더라도 모바일 쇼핑몰에 표시되지 않아요. 설정 여부는 [관리자] 쇼핑몰 설정 > 사이트 설정 > 쇼핑몰 환경 설정 에서 모바일(탭)을 클릭하면 확인할 수 있어요. 설정을 유지하면서 모바일 쇼핑몰에도 팝업을 표시하려면, '스마트 팝업 관리' 앱을 사용해야 해요.

 

 

Info

스마트 팝업 관리

앱스토어에서 기본 제공되는 앱으로, 간편하게 팝업을 제작할 수 있어요.
[관리자] 앱 > 마이 앱 설치한 앱 목록에서 확인할 수 있어요.

 

쿠폰 알림 사용

특정 쿠폰을 보유한 회원에게만 배너 또는 팝업으로 쿠폰 발급 알림을 줄 수 있는 기능이에요.
해당 기능을 사용하려면 먼저 [관리자] 프로모션 > 쿠폰 관리 > 쿠폰 만들기 > 부가서비스 에서
‘로그인 시 쿠폰발급 알림’을 ‘사용함’으로 선택하고 쿠폰을 등록해 주셔야 해요.

  • PC 쇼핑몰에서 알림을 주려면, PC(탭) > 팝업 등록 > 팝업 표시 설정 > 팝업 표시 위치 설정 > 쿠폰 발급 알림(로그인 후)를 선택해 주세요.
  • 모바일 쇼핑몰에서 알림을 주려면, 모바일(탭) > 등록 > 디자인 > 상세 이미지 > 쿠폰알림 사용을 체크해 주세요. 만약 이미지 표시 설정을 배너로 선택한 경우, 메인 페이지에서만 쿠폰 이미지가 표시되어요.

 

 

Note

반응형 디자인 사용 시

PC 디자인이 반응형이고 모바일 전용 디자인 사용 설정을 '사용안함'으로 선택한 경우, 모바일 쇼핑몰에서 쿠폰 알림 기능을 사용할 수 없어요. 즉, PC 버전의 쿠폰 알림 팝업을 등록하면 PC 쇼핑몰에서만 표시되고 모바일 쇼핑몰에선 표시되지 않아요. '스마트 팝업 관리' 앱에서도 관련 기능은 제공되지 않아요.

 

이미지 설정

팝업 이미지를 2개 이상 등록했을 때 각 이미지를 보여 주는 방식을 선택할 수 있어요.

  • 이미지 스와이프는 이미지를 1개씩 넘겨볼 수 있는 방식이에요.

  • 세로 나열은 이미지를 세로로 모두 나열해 보여 주는 방식이에요.

 

이미지 표시 설정

이미지를 표시하는 형식을 설정할 수 있어요.
배너는 쇼핑몰 제일 윗쪽에 이미지가 노출되는 방식이에요.
팝업 창은 쇼핑몰에 접속하면 이미지가 창으로 띄워지는 방식이에요.

  • 팝업 창의 형식 중에서도 팝업형이 작은 창이 띄워지는 것이에요.
    일반적으로 팝업 창이라 생각되는 형식이죠.

  • 풀스크린형은 이미지가 화면에 꽉 차게 띄워지는 형식이에요.

  • 이미지 크기는 핸드폰 종류에 따라 자동으로 조절되어요.

 

창 닫기 방법

창 닫기 방법에서는 쇼핑몰 고객이 팝업을 끌 수 있게 제공하는 버튼 종류를 설정할 수 있어요.
'닫기' 버튼은 기본으로 나타나고, 그 외에 추가로 나타날 버튼을 선택해 주세요.

  • PC에서는 '창 닫기 디자인 > 상세 디자인 설정' 을 통해 문구를 수정할 수 있어요. 

 

 

Note

  • 팝업 하나를 여러 페이지에 띄우거나 여러 팝업을 한 페이지에 띄울 수 있어요.

  • 한 페이지에 팝업은 최대 5개까지 띄울 수 있어요.

  • 인트로 화면이 설정되어 있으면 인트로 화면에는 팝업을 띄울 수 없어요.

  • 팝업 크기가 작으면 내용이 잘려 보일 수 있어요.
    팝업 크기를 정확하게 확인하고 입력해 주세요.

 

 

Info

직접 만든 팝업에 '닫기' 버튼 추가하기

  • 직접 만든 팝업 선택하기로 팝업 내용을 등록하면 팝업에 '닫기' 버튼을 노출하기 위해서 디자인 소스를 추가해야 해요.

  • [관리자] 디자인 > 디자인 보관함 에서 '디자인 수정하기' 버튼을 눌러 주세요.

  • 스마트디자인 편집 창에서 popup_guide.html 파일을 열어 주세요.
    HTML 영역 제일 아래에 소스 <div module="Popup_footer"P$footer}</div>를 복사해 붙여 넣고 저장해 주세요.

 

연관 콘텐츠

이 페이지가 도움이 되었나요?
현재 콘텐츠