현재 위치
  1. 게시판
  2. 유용한 웹 팁

유용한 웹 팁

쇼핑몰 운영에 도움이 되는 정보들입니다.

게시판 상세
제목 하단 에스크로 배너 수정하기
작성자 별모아디자인 (ip:)
  • 평점 0점  
  • 작성일 2019-07-02
  • 추천 추천하기
  • 조회수 426


쇼핑몰 하단 오른쪽에 에스크로 배너를 수정하는 방법입니다.


KCP를 이용중이신 분들은 아래 링크를 클릭하여 참조바랍니다.

☞ KCP 에스크로 배너 수정방법 (클릭)



KCP 이외의 다른 PG사를 이용중이신 분들은 아래 설명 참조바랍니다.


관리자페이지에서 상점관리 > 결제관리 >통합결제(PG) > 서비스 신청에서

PG사와 에스크로 동시 신청 후 결제사의 승인이 모두 완료되고 난 후에

쇼핑몰 하단에 에스크로 소스 삽입이 가능합니다.



아래 순서대로 해주시면 됩니다.



1. 에스크로 배너 이미지와 링크 주소를 확인하는 방법 :


상점관리 > 결제관리 >통합결제(PG) > 이용현황 에서

현재 이용중이신 결제서비스 제공사 목록이 보이는데

상세보기 버튼 클릭하시면 페이지 하단에 배너 삽입 소스가 있고

그 아래에 결제사 배너 마크 이미지가 3가지 정도 보입니다.





위의 이미지에서 배너 삽입 항목에 있는 소스를 복사한 후 메모장을 열어 붙여넣어주세요.

(아래 소스는 예시이니 아래 소스를 복사하지마시고, 고객님 관리자페이지의 소스를 복사하셔야 합니다.)

아래 초록색 부분은 필요없으니 메모장에서 지워주시기 바랍니다.


<script language="javascript" src="https://pgweb.uplus.co.kr/WEB_SERVER/js/escrowValid.js"></script>
<a onclick="goValidEscrow('CF_ntsmall01');">
<img src="이미지경로" width="이미지가로사이즈" height="이미지세로사이즈" border="0" style="cursor:hand">
</a>


이제 위의 소스에서 빨간색 글자 부분에 이미지 경로를 넣어주어야 합니다.


아래는 이미지 경로 확인하는 방법입니다.




위의 이미지처럼 결제사 마크 이미지가 3개 정도 보이는데,

 크기가 가장 작은 마크 이미지에 마우스 대고 오른쪽 버튼 클릭 후 속성 클릭하시면

속성창이 뜨면서 주소(URL) 글자 옆에 이미지 경로가 보입니다.

아래 그림 참조해주세요.



위의 이미지처럼 이미지 경로를 드래그하여 복사한 후

아까  메모장에 붙여넣었던 소스에서

이미지경로라는 글자를 지우고 그 자리에 이미지 경로를 붙여넣어주세요.


최종 수정된 소스는 아래와 같습니다.

아래는 예시이며 이미지 경로는 결제사마다 다르니 아래 예시는 그냥 참고만 해주세요.


<script language="javascript" src="https://pgweb.uplus.co.kr/WEB_SERVER/js/escrowValid.js"></script>
<a onclick="goValidEscrow('CF_ntsmall01');">
<img src="https://m-img.cafe24.com/images/bi/lguplus/105x154.gif" border="0" style="cursor:hand">

</a>



이제 메모장의 소스를 복사하여

스마트디자인 편집창에 붙여넣어주어야 합니다.

아래 설명대로 해주시기 바랍니다.


---------------------------------------------------------


2. 에스크로 소스를 스마트디자인 편집창에 붙여넣기 :


디자인 관리 > 디자인관리 > 디자인 보관함에 가셔서

해당 디자인의 HTML 디자인 수정 버튼 클릭하시면

스마트 디자인 편집창이 뜹니다.

편집창 왼쪽 하단의 화면명 검색 창에서 footer.html 을 검색하여 /layout/basic/footer.html 에 체크한 후

선택파일열기 를 클릭해주세요.


html소스창에서 스크롤을 내려 하단쪽에 보시면 아래와 같은 소스가 보입니다.

메모장에 작업해두었던 소스를 복사하여 아래 스마트디자인 편집창의 소스에

붉은색 부분을 삭제하고 그 자리에 붙여넣어주세요.

파란색 부분은 절대 건드리지마시고 붉은 색 부분만 삭제하신 후 메모장의 소스를 복사하여

아래 빨간부분이 있던 자리에 붙여넣어주시면 됩니다.



<!-- 하단 에스크로 마크 -->
      <span class="bottom_escrow"><a href="http://kcp.co.kr" target="_blank"><img src="/web/upload/byulmoa80/images/bottom_escrow.gif" alt="에스크로" border="0" /></a></span>



위의 설명대로 수정된 최종 소스는 아래와 같습니다.

아래는 예시이니 참고만 하시기 바랍니다.

결제사마다 소스가 다르므로 아래 소스를 붙여넣으시면 안됩니다.

아래와 비슷한 형식의 소스이니 그냥 참고만 해주세요.


<!-- 하단 에스크로 마크 -->
<div class="b_escrow">
<script language="javascript" src="https://pgweb.uplus.co.kr/WEB_SERVER/js/escrowValid.js"></script>
<a onclick="goValidEscrow('CF_ntsmall01');">
<img src="https://m-img.cafe24.com/images/bi/lguplus/105x154.gif" border="0" style="cursor:hand">

</a>
</div>


--------------------------------------------------------------------------------------------------------------------



아래는 필요시에만 참고해주세요.



3. 에스크로 배너 위치 조절하기 :


아래는 쇼핑몰 하단에서 에스크로 마크의 위치를 조절하는 방법입니다.

에스크로 배너 이미지의 상하좌우 위치를 원하시는대로 화면을 봐가며 조절 가능합니다.


디자인관리 > 디자인관리 > 디자인보관함 > HTML다지인 수정 버튼 클릭하여

스마트디자인 편집창이 뜨면, 편집창 하단 왼쪽의 화면명 검색에서 footer.css 를 검색하여

선택파일열기를 하면 하단영역의 css소스가 나타납니다.

소스창에서 아래쪽에 보시면 /* 하단 에스크로 */ 라는 글자 바로 밑에 아래와 같은 소스가 보입니다.


아래 소스에서 right:0;은 하단영역을 기준으로 오른쪽에서 0픽셀 떨어진 위치를 말합니다.

0을 다른 숫자로 수정해가면서 좌우 위치조절 해주시면 됩니다.

아래 소스에서  top: 54px;은 하단영역을 기준으로 하단영역 위에서 54px 떨어진 위치를 말합니다. 

54를  다른 숫자로 수정해가면서 상하 위치조절 해주시면 됩니다.


쇼핑몰 화면에서 확인해가며 원하시는 위치로 조절해주세요.

수정 후 스마트디자인 편집창 상단 왼쪽의 저장 버튼 클릭해주세요.



/* 하단 에스크로 */
.bottom_escrow {
   position: absolute;
   right: 0px;  
   top: 54px; 

   cursor:pointer;
}

첨부파일
비밀번호 수정 및 삭제하려면 비밀번호를 입력하세요.
댓글 수정

비밀번호 :

/ byte

비밀번호 : 확인 취소

댓글 입력
댓글달기 이름 : 비밀번호 : 관리자답변보기

영문 대소문자/숫자/특수문자 중 2가지 이상 조합, 10자~16자

/ byte

왼쪽의 문자를 공백없이 입력하세요.(대소문자구분)

관리자에게만 댓글 작성 권한이 있습니다.