본문 바로가기

현재 위치
  1. HOME
  2. 쇼핑몰 TIP

쇼핑몰 TIP

온라인 쇼핑몰 제작부터 운영, 마케팅까지! 유용한 정보를 제공합니다.

카테고리 상세
번호 문의유형 제목
1226 PC와 모바일 상단에 홍보용 배너 노출하는 방법 조회수 10732
  • 작성일 2017-07-04 13:53:09
  • 추천 추천하기
  • 조회수 10732
모든 페이지 상단에 홍보성 문구 상시 노출하기



프로모션이나 기획전 등 눈에 띄는 곳에 배너를 걸어두고 싶을 때
띠 배너로 홍보하는 경우가 많은데요!

모바일의 경우 해외 쇼핑몰에서 주로 볼 수 있습니다.


간단하지만 매우 효과적인 상단 문구 노출 방법을 안내드릴게요~


1. PC

 



2. 모바일


 



01
PC에서 노출하기



1. 스마트디자인 편집창을 열어 HTML 코드를 추가합니다.


 



1) 화면을 선택합니다.

2) 배너 추가를 원하는 위치에 아래와 같이 html 코드를 추가합니다.


<!-- 띠 배너 -->
<div class="promotionBanner">
<a href="#none" class="bannerLink">
<img src="http://sdsupport.cafe24.com/img/guide/tip/img_banner.gif" alt="배너 내용을 적어주세요." /><!-- 원하는 배너 이미지로 변경 -->
</a>
<a href="#none" class="btnClose"><img src="http://sdsupport.cafe24.com/img/guide/tip/btn_close.png" alt="배너 닫기" /></a>
</div>
<!--// 띠 배너 -->



띠 배너 이미지와 닫기 버튼 이미지는 원하는 이미지로 교체해서 사용하세요!




2. common.css 에 css 를 추가합니다.


1) 레이아웃(layout) > 기본 레이아웃(basic) > css > common.css 파일을 엽니다.

2) 아래와 같이 css 를 추가합니다.

/* 띠 배너 css */
.promotionBanner { position:relative; overflow:hidden; text-align:center; background:pink; } .promotionBanner .bannerLink { display:block; } .promotionBanner .btnClose { position:absolute; top:5px; left:50%; margin-left:590px; }



닫기 버튼의 위치나 배너 배경 등은 디자인에 맞게 변경해서 사용하세요.





3. basic.js 에 js 를 추가합니다.



1) 레이아웃(layout) > 기본 레이아웃(basic) > js > basic.js 파일을 엽니다.

2) 아래와 같이 js 를 추가합니다.

/* 띠 배너 js */
var bannerFunc = function(){ $('.promotionBanner .btnClose').bind("click", function(){ $('.promotionBanner').animate({height: 0}, 500); }); }; $(function($){ bannerFunc(); });



4. 띠 배너가 추가된 모습입니다.

 


html 코드를 넣는 위치에 따라
중간에도 띠 배너 설치가 가능하답니다!




02
모바일에서 노출하기




1. 홍보성 텍스트 노출하기

소스 추가 위치 : 디자인 편집창 > 메인 레이아웃(main.html)

 



1)  아래와 같은 위치에 파란색 소스를 추가해주세요.

※ 디자인 소스는 전체 언어 공통으로 이용할 수 있습니다.


2) 밑줄 영역에는 표시할 안내 문구를 입력해주세요.

##상단 생략##


<body id="main">

<div module="Popup_Mobile">{$mobile}</div>

<div id="wrap">

<!--@import(/layout/basic/sidebar.html)-->

<hr class="layout">

<div id="container">

<header id="header">

<div class="header">


<div class="textBanner">

    <style>

        .textBanner { background:#000; text-align:center; }

        .textBanner p { padding:6px 14px 5px; color:#fff; font-size:13px; line-height:18px; font-weight:normal; }

    </style>

    <p>텍스트를 입력해주세요</p>

</div>


<h1 module="Layout_LogoTop"><a href="/">{$mobile_title}</a></h1>

<section id="topArea">    

                           

##하단 생략##




2. 홍보성 텍스트에 이벤트 페이지로 링크 걸기

 소스 추가 위치 : 디자인 편집창 > 메인 레이아웃 (main.html)


1) 아래와 같은 위치에 파란색 소스를 추가해주세요.

※ 디자인 소스는 전체 언어 공통으로이용할 수 있습니다.


2) 밑줄 영역에는 이동시킬 페이지 URL 표시할 안내 문구를 입력해주세요.

##상단 생략##


<body id="main">

<div module="Popup_Mobile">{$mobile}</div>

<div id="wrap">

<!--@import(/layout/basic/sidebar.html)-->

<hr class="layout">

<div id="container">

<header id="header">

<div class="header">


<div class="textBanner">

    <style>

        .textBanner { background:#000; text-align:center; }

        .textBanner p { padding:6px 14px 5px; font-size:13px; line-height:18px; font-weight:normal; }

        .textBanner a { display:block; color:#fff; }

    </style>

    <p><a href="URL을 입력해주세요">텍스트를 입력해주세요</a></p>

</div>


<h1 module="Layout_LogoTop"><a href="/">{$mobile_title}</a></h1>

<section id="topArea">   

                           

##하단 생략##