[모바일] 중국어 쇼핑몰 상단 메뉴 디자인 간소화하기 – 카페24 Help Center

모바일 쇼핑몰 상단 영역 디자인 변경하기

중문 베이스 스킨을 간단한 소스 수정을 통해
주요 메뉴만 간략하게 표현되는 상단 디자인으로 변경하는 방법을 안내드릴게요!

상단 간략형 디자인으로 변경하기
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>

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

<div class="header">

<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>

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

##하단 생략##

2. 소스 추가 위치 : 디자인 편집창 > 공통 레이아웃(layout.html)
아래와 같이 빨간색 소스를 삭제, 파란색 소스를 추가해주세요.

##상단 생략##

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">


<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">


<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. 소스 추가 위치 : 디자인 편집창 > 모바일 네비게이션(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; }

##하단 생략##

검색 강조형 디자인으로 변경하기
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>

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

<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">

##하단 생략##

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>

</section>

<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); }

##하단 생략##