본문 바로가기

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

쇼핑몰 TIP

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

카테고리 상세
번호 문의유형 제목
1188 [모바일] 쇼핑몰 바로가기 기능 추가하기 조회수 9496
  • 작성일 2017-06-30 17:44:44
  • 추천 추천하기
  • 조회수 9496


모바일 쇼핑몰에서도 바로가기 기능을 사용하자!




01

쇼핑몰 바로가기 기능 추가하기




모바일에서 '바로가기' 를 클릭하면 스마트폰 홈화면에 아이콘이 등록되어

아이콘 클릭 시 쇼핑몰 홈페이지에 바로 접속할 수 있는데요!



 모바일에서 쇼핑몰 바로가기 기능을 추가하는 방법을 알려드립니다~


 

홈 화면 아이콘은

쇼핑몰 관리자의 '모바일 쇼핑몰 > 환경설정 > 화면설정 > 홈화면 아이콘 등록'에서

아이콘을 등록하면 등록한 이미지로 표시됩니다.




※ 아이폰 사용자일 경우 단말기 제한에 따라 해당 기능이 제공되지 않고,

안드로이드일 경우 스마트폰에 네이버앱이 설치되어 있어야 이용할 수 있습니다.






1. CSS 추가



1) 모바일 쇼핑몰 > 디자인 편집하기 > CSS > 모듈(module) > 레이아웃(layout) > mobilehome ebutton.css


※ 해당 위치에 폴더와 화면이 없을 경우 아래와 같이 스마트 편집창에서 폴더추가와 화면추가를 해주세요.



2) 아래 CSS 소스를 추가해주세요.


 #bookmark {
    z-index:100; position:absolute; right:2px; top:80px; width:1em; padding:25px 7px 10px; text-align:center; font-size:12px; color:#fff; font-weight:bold; line-height:1; word-wrap:break-word; border:1px solid #3d4146;    background: rgba(73,76,82,0.8);    text-shadow:0 0 1px #3d4146;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px;
}
#bookmark:before {
    content:""; position:absolute; left:50%; top:10px; width:12px; height:10px; margin-left:-6px; background:url("http://img.echosting.cafe24.com/design/skin/mobile/bg_bookmark.png") no-repeat 0 0;    background-size:100% 100%;}





2. HTML 추가



1) 뉴상품 이용 몰 (솔루션 업그레이드 한 경우)


모바일 쇼핑몰 > 디자인 편집하기 > 레이아웃(Layout) > 기본 레이아웃(basic) > 공통 레이아웃(layout.html)




2) 구상품 이용 몰 (기존 솔루션을 그대로 사용 중인 경우)


모바일 쇼핑몰 > 디자인 편집하기 > 레이아웃(Layout) > 기본 레이아웃(basic) > 메인(main.html)




3) 기존 소스 <hr class="layout"> <divid="contents"> 사이에 '추가된 부분' 소스 추가


                                              ## 상단 생략 ##
<hr class="layout">

<!-- 추가된 부분 -->
<div module="Layout_MobileHomebutton">
<!--@css(/css/module/layout/mobilehomebutton.css)-->
<a href="#none" id="bookmark" onClick="{$make_homeicon}">바로가기</a>
{$form.hdHomeImgUrl}{$form.hdMallName}</div>
<!-- 추가된 부분 -->

<div id="contents">
                                             ## 하단 생략 ##






02

적용 화면




적용된 화면입니다.