카페24 쇼핑몰 모바일에 쇼핑몰 바로가기 버튼 추가하기

바로가기 설정 방법 

1. 쇼핑몰 관리자 '모바일쇼핑몰 > 모바일 환경설정 > 기본설정(탭)'으로 이동합니다
2. 홈화면 아이콘 등록 영역에서 '파일 선택' 버튼을 클릭해 아이콘을 등록합니다.

※ iOS 사용 기기 (아이폰, 아이패드)의 경우 해당 기능이 동작하지 않을 수 있습니다. iOS에서 제공하는 홈화면 아이콘 추가 기능을 통해 아이콘을 등록할 수 있습니다.



디자인 적용하기 

1. CSS 추가
1) 쇼핑몰 관리자 '모바일쇼핑몰'에서 '디자인 수정' 버튼을 클릭합니다.
2) 스마트디자인 편집창에서 '전체화면보기 > CSS > 모듈(module) > 레이아웃(layout) > mobilehomebutton.css 으로 이동합니다.

※ 해당 위치에 폴더와 파일이 없을 경우 아래와 같은 방법으로 폴더 및 파일을 추가합니다.

3) mobilehomebutton.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) HTML 소스에 아래 파란색 소스를 추가합니다.

 

  ## 상단 생략 ##
  <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">
  ## 하단 생략 ##