바로가기마케팅서비스 사용자매뉴얼 최종업데이트 2013-08-02 문서버전 1.2
목차 1. 서비스소개및신청 1) 바로가기마케팅서비스란? 2) 서비스신청및적용 3) 서비스활용 2. 디자인설정 ( 구 ) 디자인 1) 바로가기아이콘소개페이지적용 2) 바로가기접속상태아이콘노출 3) 바로가기접속주문혜택노출 3. 디자인설정 - 스마트디자인 1) 바로가기아이콘서비스소개페이지적용 2) 바로가기접속상태아이콘노출 3) 바로가기접속주문혜택노출 2
1. 서비스소개및신청 1) 바로가기마케팅서비스란? 바로가기마케팅서비스는 PC 바탕화면에설치된아이콘이미지및문구를실시간으로변경해, 이벤트및정보를신속하게전달하는마케팅서비스입니다. 1 2 3 1 어드민부가서비스 > 제휴부가서비스 > 바로가기마케팅서비스 > 마케팅운영관리페이지에서바로가기아이콘이미지및문구를변경할수있습니다. 2 변경내용을저장하면실시간으로각컴퓨터내에설치된아이콘이미지및문구가변경됩니다. ( 상황에따라적용되기까지수분이걸릴수도있습니다.) 3 실시간으로변경되는아이콘으로구매자의쇼핑몰접속을유도할수있습니다. 3
1. 서비스소개및신청 2) 서비스신청및적용 바로가기마케팅서비스는다음의절차에따라서비스신청및적용을하게됩니다. 1 서비스신청 : 서비스신청은부가서비스 > 제휴부가서비스 > 바로가기마케팅서비스 > 서비스신청페이지내에서진행합니다. [ 서비스신청페이지 ] 4
1. 서비스소개및신청 2) 서비스신청및적용 2 계약서발송 : 바로가기마케팅서비스제공사인 티컴즈에서서비스신청내역확인후상담및계약을진행하게됩니다. 3 서비스승인 : 서비스제공사와계약을완료하게하게되면, 해당쇼핑몰로의접속이가능한 바로가기아이콘 생성및서비스제공사내시스템세팅을진행합니다. 4 서비스세팅및오픈 : 바로가기아이콘이미지 / 문구변경및혜택을설정하고, 쇼핑몰내디자인적용을진행합니다. ( 디자인적용가이드는 디자인설정 페이지참조 ) 바로가기아이콘이미지 / 문구변경은부가서비스 > 제휴부가서비스 > 바로가기마케팅서비스 > 마케팅운영관리페이지에서적용합니다. [ 바로가기아이콘이미지및문구변경페이지 ] 5
1. 서비스소개및신청 2) 서비스신청및적용 바로가기아이콘접속시제공되는혜택설정은프로모션 > 바로가기마케팅서비스 > 바로가기혜택설정페이지에서적용합니다. [ 바로가기아이콘접속시제공되는혜택설정페이지 ] 6
1. 서비스소개및신청 3) 서비스활용 바로가기아이콘은신상품출시, 특가행사, 아이콘전용이벤트등다양한형태의프로모션을운영할수있습니다. 타임세일프로모션 아이콘바로방문시에만적용되는특정시간 특가기획전할인프로모션진행 할인쿠폰발급프로모션 아이콘바로방문시에만적용되는할인쿠폰 프로모션진행 신상품출시프로모션 신상품출시소식을바로가기아이콘으로 신속히전달 아이콘접속특가프로모션 바로가기아이콘접속후주문시혜택적용하여 아이콘접속특가프로모션진행 7
2. 디자인설정 ( 구 ) 디자인 1) 바로가기아이콘소개페이지적용 바로가기아이콘이미지 / 문구변경및아이콘접속에따른혜택설정을완료했다면, 쇼핑몰내에서고객들이아이콘을다운로드받을수있는페이지를적용해야합니다. 다음화면과같이구성된바로가기소개페이지를기본적으로제공하며, 페이지수정은 ( 구 ) 디자인관리 >HTML 디자인설정 > 상점운영관련화면 바로가기 ( 링콘 ) 소개 에서할수있습니다. 8
2. 디자인설정 ( 구 ) 디자인 1) 바로가기아이콘소개페이지적용 앞서소개한바로가기아이콘소개페이지로연결해주는배너또한기본으로제공되고있으며, 다음의순서에따라적용할수있습니다. 1 바로가기 ( 링콘 ) 마케팅배너메인에적용 : 배너를메인에적용하려면, 다음과같이수정해주세요. ( 파란색코드추가 ) <td valign='top'> <div id="r_scroll_area"> <table cellpadding=0 cellspacing=0 border=0> <tr> <td width="{{$rbanner_left}}" rowspan="3"></td> <td height="{{$rbanner_top}}"></td> <tr> <td style="padding-bottom:5px;">{{$a_livelinkon02}}</td> <tr> <td style="padding-bottom:5px;"> {{$a_34}} </td> </table> </div> </td> <tr> <td style="padding-left:10px;"> {{* 최근본상품 *}} {{$a_45}} </td> 구디자인관리 > HTML 디자인설정 > 메인화면 HTML 편집 2 바로가기 ( 링콘 ) 마케팅배너이미지변경 : 배너기본이미지는제공되고있으나, 변경을원하시면 ( 구 ) 디자인관리 > HTML 디자인설정 > 공통모듈리스트 > TOP > 09 바로가기 ( 링콘 ) 마케팅배너에서변경이가능합니다. [ 기본이미지 ] 9
2. 디자인설정 ( 구 ) 디자인 1) 바로가기아이콘소개페이지적용 [ 메인페이지에바로가기안내페이지로이동하는배너적용화면 ] 바로가기아이콘에대한소개를기본으로제공해주는페이지가아닌, 게시판내게시물로등록하고자하는경우에는게시물작성시다음의아이콘다운로드링크주소형식에따라하이퍼링크를연결하면됩니다. http://download.liveicon.co.kr/ectdev/setup_ 쇼핑몰 ID.exe 아이콘다운로드링크주소에문제가생겼을땐, 서비스제공사인 티컴즈담당자에게문의하셔야합니다. 10
2. 디자인설정 ( 구 ) 디자인 2) 바로가기접속상태아이콘노출 [ 바로가기접속상태아이콘적용화면 ] 회원이바로가기아이콘을통해쇼핑몰접속시, 이를알려주는접속상태아이콘디자인적용을하는방법은크게두가지가있습니다. 첫번째는 바로가기 ( 링콘 ) 접속상태모듈 을모든페이지에추가하는방법이고, 두번째는대부분의페이지내에서사용되고있는대표공통모듈내에 바로가기 ( 링콘 ) 접속상태모듈 을추가하는방법입니다. 11
2. 디자인설정 ( 구 ) 디자인 2) 바로가기접속상태아이콘노출 1 모든페이지내에 바로가기 ( 링콘 ) 접속상태모듈 추가하기 모든페이지내원하는위치에 바로가기 ( 링콘 ) 접속상태모듈 인 {{$a_livelinkon01}} 를추가합니다. < 예시 > <td valign='top' width='{{$page_width}}'> {{* top start *}} <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="{{$tab_array.a_16.bgcolor}}"> <tr> <td> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> {{* MODULE a_1 : TOP LOGO $a_1 *}} {{$a_1}} <td>{{$a_livelinkon01}}</td> {{* MODULE a_6 : 환영인사 / 로그아웃 *}} {{$a_6}} </table> </td> {{* 상단메뉴 / 검색창 A 형 (a_32 공통모듈 ) 포함 : 이모듈은반드시사용된다.*}} {{$a_33}} <tr> <td height="7"></td> {{* 상단이미지 *}} {{$a_7}} </table> {{* top end *}} 구디자인관리 > HTML 디자인설정 > 메인화면 HTML 편집 12
2. 디자인설정 ( 구 ) 디자인 2) 바로가기접속상태아이콘노출 2 대표공통모듈내에 바로가기 ( 링콘 ) 접속상태모듈 추가하기 앞서설명한방법은쇼핑몰내모든페이지에모듈을추가하는방법이번거롭다면, 일반적으로대부분의페이지에서사용되는공통모듈내에 바로가기 ( 링콘 ) 접속상태모듈 {{$a_livelinkon01}} 를추가하는방법을추천해드립니다. {{$a_livelinkon01}} 추가가가능하도록처리된공통모듈은총 3 개입니다. - 공통모듈 > TOP > TopLogo {$a_1}} - 공통모듈 > TOP > 상단메뉴 {{$a_6}} - 공통모듈 > TOP > 상단메뉴바 {{$a_33}} 위공통모듈내에 바로가기 ( 링콘 ) 접속상태모듈 을추가하시면, 해당공통모듈이위치한모든페이지내에바로가기접속상태아이콘도함께노출됩니다. < 예시 > {{* a_6 : 상단메뉴 *}} {{$a_livelinkon01}} <td align="right" valign="middle" bgcolor="{{$tab_array.a_6.bgcolor}}" STYLE="color:{{$font_array.a_6.font_color}};font-size:{{$font_array.a_6.font_size}};fontfamily:{{$font_array.a_6.font_type}};"> {{$a_6_u1}} </td> 구디자인관리 > HTML 디자인설정 > 공통모듈 > TOP > 상단메뉴 {{$a_6}} 모듈편집 3 바로가기 ( 링콘 ) 접속상태 이미지는기본으로제공되지만, 변경을원하시면 ( 구 ) 디자인관리 > HTML 디자인설정 > 공통모듈 > TOP > 08 바로가기 ( 링콘 ) 접속상태모듈을편집하면됩니다. 기본제공이미지 13
2. 디자인설정 ( 구 ) 디자인 3) 바로가기접속주문혜택노출 바로가기접속주문에대해혜택을제공한다면, 구매욕구상승을위해혜택내용을장바구니페이지, 주문서작성페이지에노출되게할수있습니다. 다음과같이디자인수정을진행해주세요. < 장바구니페이지내바로가기접속혜택노출 > {{* 장바구니내용들시작 *}} method="post"> <form name="frm_{{$basket_type}}" action="/front/php/basket.php" <input type="hidden" name="checked_product" value=""> <input type=hidden name=command> {{$c_3_u7}} <input type=hidden name=p_id> <input type=hidden name=num_of_prod value="{{$snum_of_prod}}"> <input type=hidden name=basket_type value="{{$basket_type}}"> </form> {{* 장바구니내용들끝 *}} {{$c_3_ulinkonmsg}} {{* 결제버튼및안내문구시작 *}} {{$c_3_u12}} {{* 모두결제버튼및안내문구시작 *}} {{$c_3_u9}} {{* 모두결제버튼및안내문구끝 *}} {{* navercheckout 구매버튼 *}} {{$c_3_u15}} <tr> <td height=10 bgcolor="{{$tab_array.c_3.bgcolor}}"></td> <tr bgcolor="{{$tab_array.c_3.bgcolor}}"> <td> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="20"><img src="{{$img_array.c_3.15.url}}" alt=""></td> <td width="640"><b> 장바구니이용안내 </b></td> 구디자인관리 > HTML 디자인설정 > 주문관련화면 > 장바구니 > 장바구니주문목록 {{$c_3}} 편집 14
2. 디자인설정 ( 구 ) 디자인 3) 바로가기접속주문혜택노출 < 주문서작성페이지내바로가기접속혜택노출 > <tr bgcolor="{{$tab_array.c_3.bgcolor}}"> <td align="right"> {{* 네이버체크아웃 *}} {{$c_3_nco}} </td> <tr bgcolor="{{$tab_array.c_3.bgcolor}}"> <td height="20"> </td> <tr bgcolor="{{$tab_array.c_3.bgcolor}}"> <td height="20"> {{$c_3_u10}} </td> {{$c_3_ulinkonmsg}} </td> <tr bgcolor="{{$tab_array.c_3.bgcolor}}"> <td height="20"></td> <tr bgcolor="{{$tab_array.c_3.bgcolor}}"> <td height="20"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10"><img src="{{$img_array.c_3.9.url}}" ></td> <td width="650"><span class="font14_title"> 주문자정보 </span></td> </table> </td> <tr bgcolor="{{$tab_array.c_3.bgcolor}}"> <td bgcolor="{{$tab_array.c_3.th_fgcolor}}"> <table width="100%" border="0" cellspacing="1" cellpadding="5"> <tr bgcolor="{{$tab_array.c_3.td_bgcolor}}"> <td width="127" align=center class="txt_pro" nowrap bgcolor="{{$tab_array.c_3.th_bgcolor}}"> 성명 <td width="510" bgcolor="{{$tab_array.c_3.td_bgcolor}}"> <input type=text size=15 class="input01" value="{{$addr_info.name}}" name="oname"> </td> 구디자인관리 > HTML 디자인설정 > 주문관련화면 > 주문서작성 > 주문서작성페이지 {$c_3}} 편집 15
2. 디자인설정 ( 구 ) 디자인 3) 바로가기접속주문혜택노출 [ 바로가기접속주문혜택적용화면 ] 16
2. 디자인설정 스마트디자인 1) 바로가기아이콘소개페이지적용 바로가기아이콘이미지 / 문구변경및아이콘접속에따른혜택설정을완료했다면, 쇼핑몰내에서고객들이아이콘을다운로드받을수있는페이지를적용해야합니다. 다음과같이디자인수정을진행해주세요. 1 바로가기아이콘설치안내페이지추가 신규파일추가 /link/livelinkon.html <!--@layout(/layout/basic/layout.html)--> <div module="livelinkon_livelinkon"> <!--@css(/css/module/link/livelinkon.css)--> <p><img src="http://img.echosting.cafe24.com/design/skin/default/link/txt_linkon.jpg" alt="" /></p> <div class="descriptoin"> <h3> 바로가기아이콘설치안내 </h3> <ol> <li> 아이콘을다운받은후바로가기를 PC 에설치하세요.</li> <li>pc 바탕화면에서아이콘으로클릭하세요.</li> <li> 바로가기로정상접속되었는지확인하세요. ( 쇼핑몰상단에 ` 바로가기 ON` 표시확인 )</li> </ol> </div> <a href="{$down_load_url}"><img src="http://img.echosting.cafe24.com/design/skin/default/link/btn_linkon.gif" alt="live Link-On 바로가기설치하기 " /></a> </div> 신규파일추가 /css/module/link/livelinkon.css.xans-livelinkon { position:relative; overflow:hidden; margin:30px 0 0; text-align:center; }.xans-livelinkon p { margin:0 0 20px; }.xans-livelinkon.descriptoin { position:absolute; top:100%; left:100%; width:100%; } 17
2. 디자인설정 스마트디자인 1) 바로가기아이콘소개페이지적용 앞서소개한바로가기아이콘소개페이지로연결해주는배너또한기본으로제공되고있으며, 다음의순서에따라적용할수있습니다. 2 바로가기 ( 링콘 ) 마케팅배너메인에적용 ( 파란색코드추가 ) 기존파일수정 /layout/basic/layout.html, /layout/basic/main.html <p class="banner"> <a href="/livelinkon/livelinkon.html"><img src="http://img.echosting.cafe24.com/design/skin/default/layout/img_banner3.gif" alt="live LINK-ON 바로가기소개 " /></a> <a href="#none"><img src="http://img.echosting.cafe24.com/design/skin/default/layout/img_banner2.jpg" alt="" /></a> </p> 3 바로가기 ( 링콘 ) 마케팅배너이미지변경 : 배너기본이미지는제공되고있으나, 변경을원하시면스마트디자인편집창에서직접수정하셔야합니다. [ 기본이미지 ] 18
2. 디자인설정 스마트디자인 1) 바로가기아이콘소개페이지적용 [ 바로가기아이콘소개화면 ] 19
2. 디자인설정 스마트디자인 2) 바로가기접속상태아이콘노출 바로가기 ( 링콘 ) 접속상태모듈 추가하면, 바로가기접속상태아이콘이노출됩니다. 다음과같이디자인수정을진행해주세요. ( 파란색코드추가, 빨간색코드삭제 ) 기존파일수정 /layout/basic/layout.html, /layout/basic/main.html <div class="inner"> <div class="campaign"> <span module="layout_campaignoff"><img src="http://img.echosting.cafe24.com/design/skin/default/layout/btn_link_off.gif" alt=" 바로가기 OFF"/></span> <span module="layout_campaignon"><img src="http://img.echosting.cafe24.com/design/skin/default/layout/btn_link_on.gif" alt=" 바로가기 ON"/></span> </div> <div module="layout_statelogoff"> <!--@css(/css/module/layout/statelogoff.css)--> <a href="/member/login.html" class="log"> 로그인 </a> <a href="/member/join.html"> 회원가입 </a> <a href="/order/basket.html"> 장바구니 </a> <a href="/myshop/order/list.html"> 주문조회 </a> <a href="/myshop/index.html"> 마이쇼핑 </a> <a href="/board/index.html"> 게시판 </a> </div> 기존파일수정 /layout/basic/css/layout.css #header.inner { float:right; width:700px; margin:7px 0 15px; text-align:right; } #header.inner { float:right; width:750px; margin:7px 0 15px; text-align:right; } /* #header.inner {} 하단에아래코드를추가합니다 */ #header.campaign { display:inline; margin:0 5px 0 0; } #header.campaign img { vertical-align:middle; } 20
2. 디자인설정 스마트디자인 2) 바로가기접속상태아이콘노출 [ 바로가기접속상태아이콘적용화면 ] 21
2. 디자인설정 스마트디자인 3) 바로가기접속주문혜택노출 바로가기접속주문에대해혜택을제공한다면, 구매욕구상승을위해혜택내용을장바구니페이지, 주문서작성페이지에노출되게할수있습니다. 다음과같이디자인수정을진행해주세요. 기존파일수정 ( 장바구니 ): /order/basket.html <!-- <div module="order_dcinfo">...</div> 하단에아래코드를추가합니다 --> <!-- 링콘 --> <div module="order_linkoninfo" class="{$linkon_display display}"> <!--@css(/css/module/order/linkoninfo.css)--> <h3> 회원님은 <span> 바로가기 ( 링콘 ) 접속상태 </span> 입니다.</h3> <ul> <li class="{$mileage_display display}"> 상품별로 <strong>{$set_mileage}% 추가적립 </strong> 받으실수있습니다. <span>(' 상품별적립금 ' 에포함 )</span></li> <li class="{$discount_display display}"> 상품별로 <strong>{$set_discount}% 추가할인 </strong> 받으실수있습니다. <span>(' 추가할인금액 ' 에포함 )</span></li> </ul> </div> 기존파일수정 ( 주문서작성 ): /order/orderform.html <!-- <div class="bankbenefit {$dc_info_display display}">...</div> 하단에아래코드를추가합니다 --> <!-- 링콘 --> <div module="order_linkoninfo" class="{$linkon_display display}"> <!--@css(/css/module/order/linkoninfo.css)--> <h3> 회원님은 <span> 바로가기 ( 링콘 ) 접속상태 </span> 입니다.</h3> <ul> <li class="{$mileage_display display}"> 상품별로 <strong>{$set_mileage}% 추가적립 </strong> 받으실수있습니다. <span>(' 상품별적립금 ' 에포함 )</span></li> <li class="{$discount_display display}"> 상품별로 <strong>{$set_discount}% 추가할인 </strong> 받으실수있습니다. <span>(' 추가할인금액 ' 에포함 )</span></li> </ul> </div> 22
2. 디자인설정 스마트디자인 3) 바로가기접속주문혜택노출 신규파일추가 /css/module/order/linkoninfo.css.xans-order-linkoninfo { margin:30px 0; padding:39px 0 37px 250px; border:1px solid #f0f0f0; backg round:#f6f6f6 url("http://img.echosting.cafe24.com/design/skin/default/order/ico_linkon.gif") no-r epeat 155px 43px; }.xans-order-linkoninfo h3 { color:#464c4e; font-size:15px; }.xans-order-linkoninfo h3 span { color:#62c2f4; }.xans-order-linkoninfo ul { margin:10px 0 0; color:#202020; font-size:11px; }.xans-order-linkoninfo li { padding:7px 0 0 7px; background:url("http://img.echosting.cafe24.com/d esign/skin/default/order/ico_naver_help.gif") no-repeat 0 10px; }.xans-order-linkoninfo li strong { color:#62c2f4; }.xans-order-linkoninfo li span { color:#8f8f91; } 23
2. 디자인설정 스마트디자인 3) 바로가기접속주문혜택노출 [ 바로가기접속주문혜택적용화면 ] 24