바로가기 마케팅 서비스

사용자 매뉴얼

최종 업데이트 2013-08-02

문서 버전 1.2

목차

2

1. 서비스 소개 및 신청

1) 바로가기 마케팅 서비스란?

2) 서비스 신청 및 적용

3) 서비스 활용

2. 디자인 설정 – (구)디자인

1) 바로가기 아이콘 소개 페이지 적용

2) 바로가기 접속 상태 아이콘 노출

3) 바로가기 접속 주문 혜택 노출

3. 디자인 설정 - 스마트디자인

1) 바로가기 아이콘 서비스 소개 페이지 적용

2) 바로가기 접속 상태 아이콘 노출

3) 바로가기 접속 주문 혜택 노출

1. 서비스 소개 및 신청

3

1) 바로가기 마케팅 서비스란?

바로가기 마케팅 서비스는 PC 바탕화면에 설치된 아이콘 이미지 및 문구를 실시간으로 변경해, 이벤트 및 정보를 신속하게 전달하는 마케팅 서비스입니다.

① 어드민 부가서비스 > 제휴부가서비스 > 바로가기 마케팅 서비스 > 마케팅 운영관리 페이지에서 바로가기 아이콘 이미지 및 문구를 변경할 수 있습니다. ② 변경 내용을 저장하면 실시간으로 각 컴퓨터 내에 설치된 아이콘 이미지 및 문구가 변경됩니다. (상황에 따라 적용되기 까지 수 분이 걸릴 수도 있습니다.) ③ 실시간으로 변경되는 아이콘으로 구매자의 쇼핑몰 접속을 유도할 수 있습니다.

1 2

3

1. 서비스 소개 및 신청

4

2) 서비스 신청 및 적용

바로가기 마케팅 서비스는 다음의 절차에 따라 서비스 신청 및 적용을 하게 됩니다.

① 서비스 신청 : 서비스 신청은 부가서비스 > 제휴부가서비스 > 바로가기 마케팅 서비스 > 서비스신청 페이지 내에서 진행합니다.

[서비스 신청 페이지]

1. 서비스 소개 및 신청

5

2) 서비스 신청 및 적용

② 계약서 발송 : 바로가기 마케팅 서비스 제공사인 ㈜티컴즈에서 서비스 신청 내역 확인 후 상담 및 계약을 진행하게 됩니다. ③ 서비스 승인 : 서비스 제공사와 계약을 완료하게 하게 되면, 해당 쇼핑몰로의 접속이 가능한 ‘바로가기 아이콘’ 생성 및 서비스 제공사 내 시스템 세팅을 진행합니다. ④ 서비스 세팅 및 오픈 : 바로가기 아이콘 이미지/문구 변경 및 혜택을 설정하고, 쇼핑몰 내 디자인 적용을 진행합니다. (디자인 적용 가이드는 ‘디자인 설정’ 페이지 참조) 바로가기 아이콘 이미지/문구 변경은 부가서비스 > 제휴부가서비스 > 바로가기 마케팅 서비스 > 마케팅 운영관리 페이지 에서 적용합니다.

[바로가기 아이콘 이미지 및 문구 변경 페이지]

1. 서비스 소개 및 신청

6

2) 서비스 신청 및 적용

[바로가기 아이콘 접속 시 제공되는 혜택 설정 페이지]

바로가기 아이콘 접속 시 제공되는 혜택 설정은 프로모션 > 바로가기 마케팅 서비스 > 바로가기 혜택 설정 페이지 에서 적용합니다.

1. 서비스 소개 및 신청

7

3) 서비스 활용

바로가기 아이콘은 신상품 출시, 특가행사, 아이콘 전용 이벤트 등 다양한 형태의 프로모션을 운영할 수 있습니다.

타임 세일 프로모션

아이콘 바로 방문 시에만 적용되는 특정시간

특가 기획전 할인 프로모션 진행

할인쿠폰 발급 프로모션

아이콘 바로 방문 시에만 적용되는 할인쿠폰

프로모션 진행

신상품 출시 프로모션

신상품 출시 소식을 바로가기 아이콘으로

신속히 전달

아이콘 접속 특가 프로모션

바로가기 아이콘 접속 후 주문 시 혜택 적용하여

아이콘 접속 특가 프로모션 진행

2. 디자인 설정 – (구)디자인

8

1) 바로가기 아이콘 소개 페이지 적용

바로가기 아이콘 이미지/문구 변경 및 아이콘 접속에 따른 혜택 설정을 완료했다면, 쇼핑몰 내에서 고객들이 아이콘을 다운로드 받을 수 있는 페이지를 적용해야 합니다. 다음 화면과 같이 구성된 바로가기 소개 페이지를 기본적으로 제공하며, 페이지 수정은 (구)디자인관리>HTML 디자인설정>상점운영관련화면 ‘바로가기(링콘)소개’ 에서 할 수 있습니다.

2. 디자인 설정 – (구)디자인

9

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> <tr> <td style="padding-bottom:5px;">{{$a_livelinkon02}}</td> </tr> <tr> <td style="padding-bottom:5px;"> {{$a_34}} </td> </tr> <tr> <td style="padding-left:10px;"> {{* 최근본 상품 *}} {{$a_45}} </td> </tr> </table> </div> </td>

구 디자인관리 > 𝐇𝐓𝐌𝐋 디자인 설정 > 메인화면 𝐇𝐓𝐌𝐋 편집

② 바로가기(링콘) 마케팅 배너 이미지 변경 : 배너 기본 이미지는 제공되고 있으나, 변경을 원하시면 (구)디자인관리 > HTML 디자인 설정 > 공통모듈 리스트 > TOP > 09 바로가기(링콘) 마케팅 배너 에서 변경이 가능합니다.

2. 디자인 설정 – (구)디자인

10

1) 바로가기 아이콘 소개 페이지 적용

[메인 페이지에 바로가기 안내 페이지로 이동하는 배너 적용 화면]

바로가기 아이콘에 대한 소개를 기본으로 제공해주는 페이지가 아닌, 게시판 내 게시물로 등록하고자 하는 경우에는 게시물 작성 시 다음의 아이콘 다운로드 링크 주소 형식에 따라 하이퍼링크를 연결하면 됩니다. http://download.liveicon.co.kr/ectdev/setup_쇼핑몰ID.exe 아이콘 다운로드 링크 주소에 문제가 생겼을 땐, 서비스 제공사인 ㈜티컴즈 담당자에게 문의하셔야 합니다.

2. 디자인 설정 – (구)디자인

11

2) 바로가기 접속 상태 아이콘 노출

[바로가기 접속 상태 아이콘 적용 화면]

회원이 바로가기 아이콘을 통해 쇼핑몰 접속 시, 이를 알려주는 접속 상태 아이콘 디자인 적용을 하는 방법은 크게 두 가지가 있습니다. 첫 번째는 ‘바로가기(링콘) 접속상태 모듈’을 모든 페이지에 추가하는 방법이고, 두 번째는 대부분의 페이지 내에서 사용되고 있는 대표 공통 모듈 내에 ‘바로가기(링콘) 접속상태 모듈’을 추가하는 방법입니다.

2. 디자인 설정 – (구)디자인

12

2) 바로가기 접속 상태 아이콘 노출

① 모든 페이지 내에 ‘바로가기(링콘) 접속상태 모듈’ 추가하기 모든 페이지 내 원하는 위치에 ‘바로가기(링콘) 접속상태 모듈’ 인 {{$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}} </tr> </table> </td> </tr> {{* 상단 메뉴 /검색창 A형 (a_32 공통모듈)포함 : 이 모듈은 반드시 사용된다.*}} {{$a_33}} <tr> <td height="7"></td> </tr> {{* 상단이미지 *}} {{$a_7}} </table> {{* top end *}}

구 디자인관리 > 𝐇𝐓𝐌𝐋 디자인 설정 > 메인화면 𝐇𝐓𝐌𝐋 편집

2. 디자인 설정 – (구)디자인

13

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}};font-family:{{$font_array.a_6.font_type}};"> {{$a_6_u1}} </td>

구 디자인관리 > 𝐇𝐓𝐌𝐋 디자인 설정 > 공통모듈 > 𝐓𝐎𝐏 > 상단메뉴 {{$a_6}} 모듈 편집

③ ‘바로가기(링콘) 접속상태’ 이미지는 기본으로 제공되지만, 변경을 원하시면 (구)디자인관리 > HTML 디자인설정 > 공통모듈 > TOP > 08 바로가기(링콘) 접속상태 모듈을 편집하면 됩니다.

기본 제공 이미지

2. 디자인 설정 – (구)디자인

14

3) 바로가기 접속 주문 혜택 노출

바로가기 접속 주문에 대해 혜택을 제공한다면, 구매 욕구 상승을 위해 혜택 내용을 장바구니 페이지, 주문서 작성 페이지에 노출되게 할 수 있습니다. 다음과 같이 디자인 수정을 진행해 주세요.

{{* 장바구니 내용들 시작 *}} <form name="frm_{{$basket_type}}" action="/front/php/basket.php" method="post"> <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> <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> </tr>

구 디자인관리 > 𝐇𝐓𝐌𝐋 디자인 설정 > 주문관련화면 > 장바구니 > 장바구니 주문목록{{$c_3}} 편집

<장바구니 페이지 내 바로가기 접속 혜택 노출>

2. 디자인 설정 – (구)디자인

15

3) 바로가기 접속 주문 혜택 노출

<tr bgcolor="{{$tab_array.c_3.bgcolor}}"> <td align="right"> {{* 네이버체크아웃 *}} {{$c_3_nco}} </td> </tr> <tr bgcolor="{{$tab_array.c_3.bgcolor}}"> <td height="20">&nbsp;</td> </tr> <tr bgcolor="{{$tab_array.c_3.bgcolor}}"> <td height="20"> {{$c_3_u10}} </td> </tr> {{$c_3_uLinkonMsg}} <tr bgcolor="{{$tab_array.c_3.bgcolor}}"> <td height="20"></td> </tr> <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> </tr> </table> </td> </tr> <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> <td width="510" bgcolor="{{$tab_array.c_3.td_bgcolor}}"> <input type=text size=15 class="input01" value="{{$addr_info.name}}" name="oname"> </td> </tr>

구 디자인관리 > 𝐇𝐓𝐌𝐋 디자인 설정 > 주문관련화면 > 주문서 작성 > 주문서 작성 페이지 {$c_3}} 편집

<주문서 작성 페이지 내 바로가기 접속 혜택 노출>

2. 디자인 설정 – (구)디자인

16

3) 바로가기 접속 주문 혜택 노출

[바로가기 접속 주문 혜택 적용 화면]

2. 디자인 설정 – 스마트디자인

17

1) 바로가기 아이콘 소개 페이지 적용

바로가기 아이콘 이미지/문구 변경 및 아이콘 접속에 따른 혜택 설정을 완료했다면, 쇼핑몰 내에서 고객들이 아이콘을 다운로드 받을 수 있는 페이지를 적용해야 합니다. 다음과 같이 디자인 수정을 진행해 주세요. ① 바로가기 아이콘 설치 안내 페이지 추가

<!--@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>

신규 파일 추가 ∶ /link/livelinkon.html

.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%; }

신규 파일 추가 ∶ /css/module/link/livelinkon.css

2. 디자인 설정 – 스마트디자인

18

1) 바로가기 아이콘 소개 페이지 적용

앞서 소개한 바로가기 아이콘 소개 페이지로 연결해 주는 배너 또한 기본으로 제공되고 있으며, 다음의 순서에 따라 적용할 수 있습니다.

[기본 이미지]

② 바로가기(링콘) 마케팅 배너 메인에 적용 (파란색 코드 추가)

<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>

③ 바로가기(링콘) 마케팅 배너 이미지 변경 : 배너 기본 이미지는 제공되고 있으나, 변경을 원하시면 스마트디자인 편집창에서 직접 수정하셔야 합니다.

기존 파일 수정 ∶ /layout/basic/layout.html, /layout/basic/main.html

2. 디자인 설정 – 스마트디자인

19

1) 바로가기 아이콘 소개 페이지 적용

[ 바로가기 아이콘 소개 화면]

2. 디자인 설정 – 스마트디자인

20

2) 바로가기 접속 상태 아이콘 노출

‘바로가기(링콘) 접속상태 모듈’ 추가하면, 바로가기 접속 상태 아이콘이 노출됩니다. 다음과 같이 디자인 수정을 진행해 주세요. (파란색 코드 추가, 빨간색 코드 삭제)

<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>

#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; }

기존 파일 수정 ∶ /layout/basic/layout.html, /layout/basic/main.html

기존 파일 수정 ∶ /layout/basic/css/layout.css

2. 디자인 설정 – 스마트디자인

21

2) 바로가기 접속 상태 아이콘 노출

[바로가기 접속상태 아이콘 적용 화면]

2. 디자인 설정 – 스마트디자인

22

바로가기 접속 주문에 대해 혜택을 제공한다면, 구매 욕구 상승을 위해 혜택 내용을 장바구니 페이지, 주문서 작성 페이지에 노출되게 할 수 있습니다. 다음과 같이 디자인 수정을 진행해 주세요.

<!-- <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/basket.html

3) 바로가기 접속 주문 혜택 노출

<!-- <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>

기존 파일 수정 (주문서 작성): /order/orderform.html

2. 디자인 설정 – 스마트디자인

23

.xans-order-linkoninfo { margin:30px 0; padding:39px 0 37px 250px; border:1px solid #f0f0f0; background:#f6f6f6 url("http://img.echosting.cafe24.com/design/skin/default/order/ico_linkon.gif") no-repeat 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/design/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; }

신규 파일 추가 ∶ /css/module/order/linkonInfo.css

3) 바로가기 접속 주문 혜택 노출

2. 디자인 설정 – 스마트디자인

24

3) 바로가기 접속 주문 혜택 노출

[바로가기 접속 주문 혜택 적용 화면]