컨텐츠 바로가기

스마트디자인 팁 상세
제목 [해외몰현지화 TIP][모바일] 모바일 쇼핑몰 상단 영역 디자인 변경하기!
작성자 대표 관리자 (ip:) 작성일 2015-05-18 17:42:45 조회수 3033

[ 해외쇼핑몰에 최적화된 운영을 위한 스마트디자인 활용방법 ]


중국 모바일쇼핑몰의 심플하고 직관적인 디자인을 적용할 수 있는 방법을 안내드립니다.



 



1. 상단 간략형 디자인으로 변경하기


HTML 설정 안내에 따라, 모바일쇼핑몰 상단에 디자인 소스를 추가해주세요.


※ 중국어(간체) 스킨용 소스입니다.


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




▼ 아래와 같이 빨간색 소스를 삭제, 파란색 소스를 추가 합니다.

##상단 생략##


<div class="header">

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

    <section id="topArea">

        <div class="searchWrap">

            <p class="category"><a href="#none" class="fold">商品分类</a></p>

            <div module="Layout_SearchHeader">

                <div class="searchForm">

                    {$form.keyword}

                    <button type="button" class="btnDelete">删除</button>

                </div>

            </div>

            <p module="Layout_orderBasketcount">

                <a href="/order/basket.html" class="btnBasket">购物车<span class="count {$basket_count_display|display}">{$basket_count}</span></a>

            </p>

        </div>

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

        <nav id="mainMenu" module="Layout_MobileMaincategory">

            <!--

                $swipe = yes

                $plugin = category

                $generate = no

                $gird = 3

            -->


<div class="header">

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

    <section id="topArea">

        <div class="searchWrap">

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

            <p class="category"><a href="#none" class="fold">商品分类</a></p>

            <p class="search"><button type="button">搜索</button></p>

        </div>

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

        <nav id="mainMenu" module="Layout_MobileMaincategory">

            <!--

                $swipe = yes

                $plugin = category

                $generate = no

                $gird = 3

            -->


##하단 생략##



2) 소스 추가 위치: 디자인편집창 > 공통 레이아웃(layout.html)


▼ 아래와 같이 빨간색 소스를 삭제, 파란색 소스를 추가 합니다.

##상단 생략##


<section id="topArea">

    <div class="searchWrap">

        <p class="category"><a href="#none" class="fold">商品分类</a></p>

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

        <p class="search"><button type="button">搜索</button></p>

        <p module="Layout_orderBasketcount">

            <a href="/order/basket.html" class="btnBasket">购物车<span class="count {$basket_count_display|display}">{$basket_count}</span></a>

        </p>

    </div>

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

</section>

 

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

<section id="topArea">

    <div class="searchWrap">

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

        <p class="category"><a href="#none" class="fold">商品分类</a></p>

        <p class="search"><button type="button">搜索</button></p>

    </div>

</section>


##하단 생략##


3) 소스 추가 위치 : 디자인편집창 > 공통 레이아웃 CSS (layout.css)


▼ 아래와 같이 빨간색 소스를 삭제, 파란색 소스를 추가 합니다.

##상단 생략##


/* layout */

#header .header { z-index:300; position:relative; text-align:center; vertical-align:top; }

#header h1 { text-align:center; font-size:24px; }

#header h1 img { max-width:100%; vertical-align:middle; font-size:12px; }

#header .category { position:absolute; left:0; top:0; width:47px; height:43px; vertical-align:middle; }

#header .category a { display:inline-block; overflow:hidden; width:100%; height:100%; text-indent:100%; white-space:nowrap; background:url("http://img.echosting.cafe24.com/skin/mobile_zh_CN/layout/btn_category.png") no-repeat 0 0; background-size:47px 43px; }

#header .search { position:absolute; right:41px; top:-5px; width:34px; height:43px; vertical-align:middle; }

#header .search button { display:inline-block; overflow:hidden; width:100%; height:100%; padding:0; text-indent:100%; text-align:left; white-space:nowrap; cursor:pointer; border:0; background:url("http://img.echosting.cafe24.com/skin/mobile_zh_CN/layout/btn_search.png") no-repeat 0 0; background-size:34px 43px; }

#header .xans-layout-orderbasketcount { position:absolute; right:0; top:0; width:41px; height:43px; vertical-align:middle; }

#header .xans-layout-orderbasketcount a.btnBasket { position:relative; display:inline-block; overflow:hidden; width:100%; height:100%; padding:0; text-indent:100%; text-align:left; white-space:nowrap; cursor:pointer; border:0; background:url("http://img.echosting.cafe24.com/skin/mobile_zh_CN/layout/btn_basket.png") no-repeat 0 0; background-size:48px 43px; }

#header .xans-layout-orderbasketcount a.btnBasket .count { position:absolute; top:7px; right:10px; max-width:41px; border:1px solid #d01818; border-radius:7px; padding:0 1px; text-indent:initial; line-height:1.2; color:#fff; font-weight:bold; font-size:10px; background-color:#e52728; }

#main #header h1 { height:86px; line-height:86px; }

#main #header h1 img { max-height:36px; }

#layout #header .header { text-align:left; }

#layout #header h1 { height:38px; line-height:38px; padding:0 0 0 41px; }

#layout #header h1 img { max-height:23px; vertical-align:middle; }

#layout #topArea .searchWrap { padding:5px 82px 0 47px; }

#layout #header .search { top:0; }


#header .header { z-index:300; position:relative; text-align:center; vertical-align:top; }

#header h1 { text-align:center; font-size:24px; height:43px; line-height:43px; }

#header h1 img { max-width:100%; max-height:26px; vertical-align:middle; font-size:12px; }

#header .category { position:absolute; left:0; top:0; width:47px; height:43px; vertical-align:middle; }

#header .category a { display:inline-block; overflow:hidden; width:100%; height:100%; text-indent:100%; white-space:nowrap; background:url("http://img.echosting.cafe24.com/skin/mobile_zh_CN/layout/btn_category.png") no-repeat 0 0; background-size:47px 43px; }

#header .search { position:absolute; right:5px; top:0; width:34px; height:43px; vertical-align:middle; }

#header .search button { display:inline-block; overflow:hidden; width:100%; height:100%; padding:0; text-indent:100%; text-align:left; white-space:nowrap; cursor:pointer; border:0; background:url("http://img.echosting.cafe24.com/skin/mobile_zh_CN/layout/btn_search.png") no-repeat 0 0; background-size:34px 43px; }

#topArea .searchWrap { position:relative; height:43px; }


/* 메인 검색 */

#main .searchWrap { position:relative; height:38px; padding:5px 41px 0 47px; }


##하단 생략##



4) 소스 추가 위치 : 디자인편집창 > 네비게이션(navigation.html)


▼ 아래와 같이 빨간색 소스를 삭제, 파란색 소스를 추가합니다.

##상단 생략##


<nav module="Layout_MobileNavigation">

    <!--@css(/css/module/layout/mobileNavigation.css)-->

    <!--

        $eventmenu = yes

    -->

    <ul class="{$navigation_grid}">

        <li module="Layout_statelogoff"><a href="/member/login.html">登录{$event_menu_class}</a></li>

        <li module="Layout_statelogon"><a href="{$action_logout}">退出</a></li>

        <li><a href="/myshop/order/list.html">我的订单</a></li>

        <li><a href="/myshop/index.html">我的主页</a></li>

        <li><a href="/board/index.html">信息公告栏</a></li>

        <li class="{$event_menu_display|display}"><a href="/board/free/list.html?board_no=2">新闻/活动</a></li>

    </ul>

</nav>

 

<nav module="Layout_MobileNavigation">

    <!--@css(/css/module/layout/mobileNavigation.css)-->

    <!--

        $eventmenu = no

    -->

    <ul class="{$navigation_grid}">

        <li module="Layout_statelogoff"><a href="/member/login.html">登录{$event_menu_class}</a></li>

        <li module="Layout_statelogon"><a href="{$action_logout}">退出</a></li>

        <li><a href="/myshop/order/list.html">我的订单</a></li>

        <li><a href="/myshop/index.html">我的主页</a></li>

        <li module="Layout_orderBasketcount"><a href="/order/basket.html" class="btnBasket"><img src="http://img.echosting.cafe24.com/skin/mobile_zh_CN/layout/ico_basket.png" alt="cart"> CART<span class="count {$basket_count_display|display}">({$basket_count})</span></a></li>

    </ul>

</nav>


##하단 생략##



5) 소스 추가 위치 : 디자인편집창 > 모바일 네비게이션 CSS (mobileNavigation.css)


▼ 아래와 같이 빨간색 소스를 삭제, 파란색 소스를 추가합니다.

##상단 생략##


.xans-layout-mobilenavigation ul { overflow:hidden; background:#4a5164; }

.xans-layout-mobilenavigation ul li { float:left; }

.xans-layout-mobilenavigation ul li a { display:block; height:43px; font-size:13px; line-height:43px; color:#fff; text-align:center; }

.xans-layout-mobilenavigation ul.grid4 li { width:25%; }

.xans-layout-mobilenavigation ul.grid5 li { width:20%; }

 

.xans-layout-mobilenavigation { margin:0 0 14px; height:29px; box-sizing:border-box; border-bottom:1px solid #9a9a9a; }

.xans-layout-mobilenavigation ul { overflow:hidden; background:#fff; }

.xans-layout-mobilenavigation ul li { float:left; }

.xans-layout-mobilenavigation ul li a { display:block; height:28px; font-size:11px; line-height:30px; color:#9a9a9a; text-align:center; font-weight:bold; }

.xans-layout-mobilenavigation ul.grid4 li { width:25%; }

.xans-layout-mobilenavigation ul.grid5 li { width:20%; }

.xans-layout-orderbasketcount a.btnBasket img { width:13px; height:13px; margin:-1px 0 0; }

.xans-layout-orderbasketcount a.btnBasket .count { color:#e62828; }


##하단 생략##




2. 검색 강조형 디자인으로 변경하기



HTML 설정 안내에 따라, 모바일쇼핑몰 상단에 디자인 소스를 추가해주세요.

※ 중국어(간체) 스킨용 소스입니다.


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


▼ 아래와 같이 빨간색 소스를 삭제, 파란색 소스를 추가합니다.

##상단 생략##


<div class="header">

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

    <section id="topArea">

        <div class="searchWrap">

            <p class="category"><a href="#none" class="fold">商品分类</a></p>

            <div module="Layout_SearchHeader">

                <div class="searchForm">

                    {$form.keyword}

                    <button type="button" class="btnDelete">删除</button>

                </div>

            </div>

            <p module="Layout_orderBasketcount">

                <a href="/order/basket.html" class="btnBasket">购物车<span class="count {$basket_count_display|display}">{$basket_count}</span></a>

            </p>

        </div>

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

        <nav id="mainMenu" module="Layout_MobileMaincategory">

            <!--

                $swipe = yes

                $plugin = category

                $generate = no

                $gird = 3

            -->


<div class="header">

    <section id="topArea">

        <div class="topWrap">

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

            <p class="category"><a href="#none" class="fold">商品分类</a></p>

            <p class="mypage"><a href="/myshop/index.html">我的主页</a></p>

            <p module="Layout_orderBasketcount">

                <a href="/order/basket.html" class="btnBasket">购物车<span class="count {$basket_count_display|display}">{$basket_count}</span></a>

            </p>

        </div>

        <div module="Layout_SearchHeader">

            <div class="searchForm">

                {$form.keyword}

                <button type="button" class="btnDelete">删除</button>

                <span class="btnSearch"><input type="image" src="http://img.echosting.cafe24.com/skin/mobile_zh_CN/layout/bg_search.png" alt="搜索" onclick="{$action_search_submit}" /></span>

            </div>

        </div>

        <nav id="mainMenu" module="Layout_MobileMaincategory">

            <!--

                $swipe = yes

                $plugin = category

                $generate = no

                $gird = 3

            -->


##하단 생략##



2) 소스 추가 위치: 디자인편집창 > 공통 레이아웃(layout.html)


▼ 아래와 같이 빨간색 소스를 삭제, 파란색 소스를 추가합니다.

##상단 생략##


<section id="topArea">

    <div class="searchWrap">

        <p class="category"><a href="#none" class="fold">商品分类</a></p>

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

        <p class="search"><button type="button">搜索</button></p>

        <p module="Layout_orderBasketcount">

            <a href="/order/basket.html" class="btnBasket">购物车<span class="count {$basket_count_display|display}">{$basket_count}</span></a>

        </p>

    </div>

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

</section>

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

 

<section id="topArea">

    <div class="topWrap">

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

        <p class="category"><a href="#none" class="fold">商品分类</a></p>

        <p class="mypage"><a href="/myshop/index.html">我的主页</a></p>

        <p module="Layout_orderBasketcount">

            <a href="/order/basket.html" class="btnBasket">购物车<span class="count {$basket_count_display|display}">{$basket_count}</span></a>

        </p>

    </div>

    <div module="Layout_SearchHeader">

        <div class="searchForm">

            {$form.keyword}

            <button type="button" class="btnDelete">删除</button>

            <span class="btnSearch"><input type="image" src="http://img.echosting.cafe24.com/skin/mobile_zh_CN/layout/bg_search.png" alt="搜索" onclick="{$action_search_submit}" /></span>

        </div>

    </div>

</section>


##하단 생략##


3) 소스 추가 위치 : 디자인편집창 > 공통 레이아웃 CSS (layout.css)


▼ 아래와 같이 빨간색 소스를 삭제, 파란색 소스를 추가합니다.

##상단 생략##


/* layout */

#header .header { z-index:300; position:relative; text-align:center; vertical-align:top; }

#header h1 { text-align:center; font-size:24px; }

#header h1 img { max-width:100%; vertical-align:middle; font-size:12px; }

#header .category { position:absolute; left:0; top:0; width:47px; height:43px; vertical-align:middle; }

#header .category a { display:inline-block; overflow:hidden; width:100%; height:100%; text-indent:100%; white-space:nowrap; background:url("http://img.echosting.cafe24.com/skin/mobile_zh_CN/layout/btn_category.png") no-repeat 0 0; background-size:47px 43px; }

#header .search { position:absolute; right:41px; top:-5px; width:34px; height:43px; vertical-align:middle; }

#header .search button { display:inline-block; overflow:hidden; width:100%; height:100%; padding:0; text-indent:100%; text-align:left; white-space:nowrap; cursor:pointer; border:0; background:url("http://img.echosting.cafe24.com/skin/mobile_zh_CN/layout/btn_search.png") no-repeat 0 0; background-size:34px 43px; }

#header .xans-layout-orderbasketcount { position:absolute; right:0; top:0; width:41px; height:43px; vertical-align:middle; }

#header .xans-layout-orderbasketcount a.btnBasket { position:relative; display:inline-block; overflow:hidden; width:100%; height:100%; padding:0; text-indent:100%; text-align:left; white-space:nowrap; cursor:pointer; border:0; background:url("http://img.echosting.cafe24.com/skin/mobile_zh_CN/layout/btn_basket.png") no-repeat 0 0; background-size:48px 43px; }

#header .xans-layout-orderbasketcount a.btnBasket .count { position:absolute; top:7px; right:10px; max-width:41px; border:1px solid #d01818; border-radius:7px; padding:0 1px; text-indent:initial; line-height:1.2; color:#fff; font-weight:bold; font-size:10px; background-color:#e52728; }

#main #header h1 { height:86px; line-height:86px; }

#main #header h1 img { max-height:36px; }

#layout #header .header { text-align:left; }

#layout #header h1 { height:38px; line-height:38px; padding:0 0 0 41px; }

#layout #header h1 img { max-height:23px; vertical-align:middle; }

#layout #topArea .searchWrap { padding:5px 82px 0 47px; }

#layout #header .search { top:0; }

#contents { position:relative; background-color:#f1f1f1; }

.btnTop { display:none; position:fixed; top:0; left:50%; z-index:100; margin:0 0 0 -36px; border:1px solid #d6d6d7; border-top:0; border-radius:0 0 3px 3px; opacity:0.9; background:#616161 url("http://img.echosting.cafe24.com/skin/mobile_zh_CN/layout/bg_btntop.png") no-repeat 90% 7px; background-size:12px 12px; }

.btnTop a { display:inline-block; height:29px; padding:0 26px 0 10px; line-height:29px; color:#fff; }

#mobileQuickLink { z-index:301 !important; }

#mobileBtnQuickLink { z-index:100 !important; }

.dimmed { display:none; position:fixed; left:0px; top:0; right:0px; bottom:0px; z-index:150; background:rgba(0,0,0,0.7); }

#dimmedSlider { display:none; position:fixed; left:0px; top:0; right:0px; bottom:0px; z-index:500; background:rgba(0,0,0,0.7); }

 

/* 메인 검색 */

#main .searchWrap { position:relative; height:38px; padding:5px 41px 0 47px; }

#main .searchWrap .searchForm { position:relative; padding:0 28px 0 33px; border:1px solid #ccc; background:url("http://img.echosting.cafe24.com/skin/mobile_zh_CN/layout/bg_search.png") no-repeat 5px 5px; background-size:20px 20px; }

#main .searchWrap .btnDelete { position:absolute; right:3px; top:5px; width:20px; height:20px; border:0; cursor:pointer; overflow:hidden; text-indent:100%; font-size:0; white-space:nowrap; background:url("http://img.echosting.cafe24.com/skin/mobile_zh_CN/layout/btn_delete.png") no-repeat 0 0; background-size:20px 20px; }

#main .searchWrap #keyword { width:100%; height:29px; padding:0; border:0; }ing:5px 82px 0 47px; }

#layout #header .search { top:0; }

 


/* layout */

#header .header { z-index:300; position:relative; text-align:center; vertical-align:top; }

#header .topWrap { height:43px; background:#4a5164; }

#header h1 { text-align:center; font-size:24px; height:43px; line-height:45px; }

#header h1 a { color:#fff; }

#header h1 img { max-width:100%; max-height:26px; vertical-align:middle; font-size:12px; }

#header .searchForm { position:relative; margin:7px 14px; padding:0 37px 0 14px; border:1px solid #ccc; border-radius:2px; }

#header .searchForm .btnDelete { position:absolute; right:43px; top:5px; width:20px; height:20px; border:0; cursor:pointer; overflow:hidden; text-indent:100%; font-size:0; white-space:nowrap; background:url("http://img.echosting.cafe24.com/skin/mobile_zh_CN/layout/btn_delete.png") no-repeat 0 0; background-size:20px 20px; }

#header .searchForm .btnSearch { position:absolute; right:0; top:0; width:36px; height:24px; padding:5px 0 0; border-left:1px solid #d5d5d5; background:#f0f0f0; }

#header .searchForm input[type="image"] { width:20px; }

#header .searchForm  #keyword { width:100%; height:29px; padding:0; border:0; }

#header .topWrap .mypage { height:20px; right:45px; position:absolute; top:11px; vertical-align:middle; width:20px; }

#header .topWrap .mypage a { display:inline-block; height:100%; overflow:hidden; text-indent:100%; white-space:nowrap; width:100%; background:url("http://img.echosting.cafe24.com/skin/mobile_zh_CN/layout/btn_mypage.png") no-repeat; background-size:20px; }

#header .topWrap .category { position:absolute; left:14px; top:13px; width:20px; height:17px; vertical-align:middle; }

#header .topWrap .category a { display:inline-block; overflow:hidden; width:100%; height:100%; text-indent:100%; white-space:nowrap; background:url("http://img.echosting.cafe24.com/skin/mobile_zh_CN/layout/btn_category2.png") no-repeat 0 0; background-size:20px 16px; }

#header .xans-layout-orderbasketcount { position:absolute; right:0; top:7px; width:35px; height:25px; vertical-align:middle; }

#header .xans-layout-orderbasketcount a.btnBasket { position:relative; display:inline-block; overflow:hidden; width:100%; height:100%; padding:0; text-indent:100%; text-align:left; white-space:nowrap; cursor:pointer; border:0; background:url("http://img.echosting.cafe24.com/skin/mobile_zh_CN/layout/btn_basket2.png") no-repeat 0 5px; background-size:21px 20px; }

#header .xans-layout-orderbasketcount a.btnBasket .count { position:absolute; top:0; right:12px; max-width:41px; border:1px solid #d01818; border-radius:7px; padding:0 1px; text-indent:initial; line-height:1.2; color:#fff; font-weight:bold; font-size:10px; background-color:#e52728; }

#contents { position:relative; background-color:#f1f1f1; }

.btnTop { display:none; position:fixed; top:0; left:50%; z-index:100; margin:0 0 0 -36px; border:1px solid #d6d6d7; border-top:0; border-radius:0 0 3px 3px; opacity:0.9; background:#616161 url("http://img.echosting.cafe24.com/skin/mobile_zh_CN/layout/bg_btntop.png") no-repeat 90% 7px; background-size:12px 12px; }

.btnTop a { display:inline-block; height:29px; padding:0 26px 0 10px; line-height:29px; color:#fff; }

#mobileQuickLink { z-index:301 !important; }

#mobileBtnQuickLink { z-index:100 !important; }

.dimmed { display:none; position:fixed; left:0px; top:0; right:0px; bottom:0px; z-index:150; background:rgba(0,0,0,0.7); }

#dimmedSlider { display:none; position:fixed; left:0px; top:0; right:0px; bottom:0px; z-index:500; background:rgba(0,0,0,0.7); }


##하단 생략##
첨부파일
목록 관리자게시 삭제 수정

최근본모듈

이전 모듈다음 모듈