위쥬 로고

쇼핑몰에 팝업창 손쉽게 만들기by NHN godo

  • 댓글
  • 공유하기
NHN고도 쇼핑몰에 팝업창 손쉽게 만들기 NHN godo

웹사이트가 어떠한 내용을 표시하기 위해 갑자기 생성되는 새 창을 팝업창이라 부릅니다.

 

 

보통 이벤트를 하거나, 특정 내용을 보여주고자 할때 사용하게 되는데요~

 

고도에서 제공하는 팝업은 크게 두가지로 나누어 볼수 있습니다.

 

첫번째는 "일반 윈도우 팝업", 두번째는 "레이어 팝업" 입니다

 

 

 

 

 

 

[ 팝업창 만들어보기 ▼ ]

 

 메뉴 : 관리자페이지 > "디자인" >> 팝업창관리

 

 

 


 

>>  기본으로 제공하는 팝업3가지가 있습니다. 이 팝업창들을 "수정" 하셔서 사용하셔도 되고,

     "팝업창만들기" 를 이용하여 새로운 팝업창을 생성하여 사용하셔도 됩니다.

 


 

 

① 팝 업 제 목

    팝업창을 알아볼수 있는 제목을 입력합니다. (ex. 설특집이벤트팝업, 배송안내팝업)

    특수문자를 절대 입력하지마세요!

 

② 팝업파일명

    팝업창을 파일명을 입력합니다. (ex. event1, popup1)

    ※ 영문 또는 숫자만 사용가능합니다, 한글과 특수문자는 입력하지 마세요!

 

③ 출 력 여 부

   "출력"에 선택해야 실제로 팝업창이 노출되게 됩니다.

 

④ 창   위   치

    팝업창이 열리는 위치를 설정합니다.

    브라우저를 기준으로 상단에서의 위치할 픽셀과 왼쪽측면에서의 위치할 픽셀을 입력하시면

    정해진 위치에서 팝업창이 열리게 됩니다.

    ※ 숫자만 입력하세요!

 

⑤ 창   크   기

    팝업창의 가로/세로 사이즈를 정합니다.

    ※ 숫자만 입력하세요!

 

⑥ 특정기간동안 무조건 노출

    특정한 기간내에 팝업창이 뜨도록 설정합니다.

 

⑦ 특정기간내에 특정시간에만 노출

    특정기간동안 특정한 시간에만 팝업창이 뜨도록 설정합니다

 

⑧ 창   타   입

    일반 윈도우 팝업창 / 이동레이어 / 고정레이어 중 원하는 창타입을 선택합니다.

 

⑨ 소스입력부분

 ※ 소스입력하기전에 "기본" 타입을 선택해주세요.

 

 소스입력은 "창타입" 에 따라 아래의 소스를 복사하여 붙여 넣으세요.

 





 

  ▷ 일반윈도우 팝업창 선택시

 

 
  
 
 
오늘 하루 보이지 않음
 

 

 

  ▷ 이동레이어 / 고정레이어 선택시



 
 
 


 
 
 


 
 
 

 
   
 
 

 

 
 
  
 
 
  
 
 

오늘 하루 보이지 않음

 
 

 
     
 

 ※ 검정색으로 강조되어 있는 부분은 실제 내용인 이미지가 입력되어 있는 부분입니다.

 

 

위의 소스 전체를 붙여 넣으셨다면 팝업창의 이미지를 변경해보도록 하겠습니다.

 

 

이미지 생성은 "로고/배너편집기" 를 이용해보세요!

>> "로고/배너 편집기 사용법" 바로보기 http://www.godo.co.kr/shopFunction/logoEditor_info.php

 

 

이미지 준비가 되셨다면 이미지를 업로드 합니다.

 

 메뉴 : 관리자페이지 > "디자인" >> webFTP 이미지관리

 
 

 

아래와 같은 창이 보이신다면 "/data/skin/현재사용중인스킨명/popup" 폴더를 차례로 클릭한뒤, 

 

버튼을 이용하여 이미지를 업로드 합니다.
 

 

 

이미지 업로드후, "주소복사" 버튼을 이용하여 이미지경로를 복사해두세요,

 

 

이제 미리 입력해두었던 위의 팝업창 소스에서

검정색줄로 강조되어 있는 부분의 소스대신 아래와 같은 소스만 입력하시면 끝!!! 팝업창의 내용 이미지가 변경되게 됩니다.
 

  ▷ 일반윈도우 팝업창 선택시

[수정전]

 

[수정후]

 

 

  ▷ 이동레이어 / 고정레이어 선택시

[수정전]

 



 

[수정후]

 

팝업창의 이미지까지 변경하셨다면~ "저장" 하여 팝업창을 완성하세요

 

 

Tip!!

일반 윈도우 팝업에서 내용클릭시 팝업창은 사라지고 해당페이지로 이동하고 싶으시다면

아래의 링크를 참고하여 수정해보세요

 

[팝업창링크] 팝업창에서 클릭했을때 창은 사라지고 해당페이지로 이동하기

http://edu.godo.co.kr/community/bbs_detail.php?id=enamoo_design&sk=title_content&sv=%C6%CB%BE%F7&x=0&y=0&postNo=73




{_popup_title}



 
태그
BOX
NHN godo

더 나은 이커머스 세상을 만듭니다.
NHN고도는 쇼핑몰 솔루션을 포함한 이커머스 영역 전반에 중심이 되어 어제보다 더 나은, 그리고 고객에게 더 많은 가치를 제공할 수 있는 서비스를 만들어가겠습니다.
www.godo.co.kr

본 콘텐츠의 저작권은 저자 또는 제공처에 있으며,
이를 무단 이용하는 경우 저작권법 등에 따라 법적책임을 질 수 있습니다
추천해요0
광고배너
0 닫기
  • BOX
  • 0 / 300