【クリエイターモード】CompleteでベーシックモードのFashion風のヘッダーを表示させる方法はありますか。

Complete初期値のモジュール「ヘッダー」のソースコードを変更することで
ベーシックモードのFashion風の表示が可能です。

PC表示例）

スマホ表示例）

◆モジュール「ヘッダー」を編集

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理

モジュール名：ヘッダー
モジュールタグ：$module.header

上記のモジュール名もしくはモジュールタグをクリックして
編集画面にお進みいただき、下記へ変更してください。

<!-- 【Fashion】PCヘッダー -->
<div id="header" class="clear container">
<h1 class="shop-logo">
<a href="<{$url.top}>">
<{if $shop.logo_url}>
<img class="M_ShopLogo" src="<{$shop.logo_url}>" alt="<{$shop.name}>">
<{else}>
<{$shop.name}>
<{/if}>
</a> 
</h1>

<ul class="header-nav">
<li><{if $member.is_logged_in}>
<ul>
<li class="member"><{$member.name}>様</li>
<li><a title="ログアウト" href="<{$url.logout}>">ログアウト</a></li>
<li><a title="マイページ" href="<{$url.mypage}>">マイページ</a></li>
</ul>
<{else}>
<ul>
<li><a href="<{$url.login}>">ログイン</a></li>
<li><a title="マイページ" href="<{$url.mypage}>">マイページ</a></li>
</ul>
<{/if}>
</li>
<li class="header-nav-search">
<input type="text" class="side-search-keyword search-keyword" data-id="<{$search_form.keyword_id}>" value="<{$search.keyword}>" id="MakeShopTopSearchInput">

<ul style="display:none;">
<li>
<label>カテゴリー</label>
<select data-id="<{$search_form.category_id}>" class="search-category">
<{section name=i loop=$search_form.category_list}>
<option value="<{$search_form.category_list[i].code}>" <{if $search.category.code == $search_form.category_list[i].code}>selected<{/if}>><{$search_form.category_list[i].name}></option>
<{/section}>
</select>
</li>
<li>
<label>価格帯で絞り込む</label>
<input type="text" data-id="<{$search_form.price_low_id}>" value="<{$search.price_low}>" class="search-price">～<input type="text" data-id="<{$search_form.price_high_id}>" value="<{$search.price_high}>" class="search-price">円
</li>
<li>
<label>独自商品コードで探す</label>
<input type="text" data-id="<{$search_form.original_code_id}>" class="side-search-original-code original-code" value="<{$search.original_code}>" placeholder="独自商品コードを入力">
</li>
</ul>
<a href="<{$search_form.search_url}>" class="search-btn search-url" id="MakeShopTopSearchButton">検索</a>
</li>
<li class="header-nav-cart">
<a href="<{$url.cart}>">買い物かご</a>
<span class="cart-badge cart-count" <{if !$cart.has_item}>style="display:none;"<{/if}>><{$cart.total_quantity}></span>
</li>
</ul>

<ul class="global-nav clear">
<li class="head-category">
<a href="/" class="head-category-list">CATEGORY</a>
<div id="M_ctgList2">
<ul class="M_layer1">
<{section name=i loop=$category_menu.list}>
<{if $category_menu.list[i].child_category.has_item}>
<li class="M_has_child"><a href="<{$category_menu.list[i].url}>"><{$category_menu.list[i].name}></a>
<ul class="M_layer2">
<{section name=j loop=$category_menu.list[i].child_category.list}>
<li><a href="<{$category_menu.list[i].child_category.list[j].url}>"><{$category_menu.list[i].child_category.list[j].name}></a></li>
<{/section}>
</ul>
</li>
<{else}>
<li><a href="<{$category_menu.list[i].url}>"><{$category_menu.list[i].name}></a></li>
<{/if}>
<{/section}>
</ul>
</li>
<li><a href="<{$url.company}>">ABOUT</a></li>
<li><a href="<{$url.guide}>">GUIDE</a></li>
<li><a href="<{$url.support}>">CONTACT</a></li>
</ul>

</div>

<!-- 【Fashion】PCヘッダー終 -->


<!-- 【Fashion】SPヘッダー開始 -->
<header class="header complete">
<nav class="top-nav">
<h1 class="header-logo">
<a href="<{$url.top}>">
<{if $shop.logo_url}>
<img src="<{$shop.logo_url}>" alt="<{$shop.name}>">
<{else}>
<{$shop.name}>
<{/if}>
</a>
</h1>
<div class="header-menu">
<ul class="gnav">
<{if $member.is_logged_in}>
<li class="account logout"><a href="<{$url.logout}>">ログアウト</a></li>
<{else}>
<li class="account membership"><a href="<{$url.member_entry}>">新規会員登録</a></li>
<li class="account login"><a href="<{$url.login}>">ログイン</a></li>
<{/if}>
</ul>
<ul class="gnav">
<li class="gnav-menu header-favorite"><a href="<{$url.favorite}>">お気に入り</a></li>
<li class="gnav-menu header-mypage"><a href="<{$url.mypage}>">マイページ</a></li>
<li class="gnav-menu header-cart"><a href="<{$url.cart}>">カート</a>
<span class="cart-badge cart-count" <{if !$cart.has_item}>style="display:none;"<{/if}>><{$cart.total_quantity}></span></li>
</ul>
</div>
</nav>
</header>
<!-- 【Fashion】SPヘッダー終了 -->

<style type="text/css">
/* 【Fashion】風ヘッダー用CSS */
/* 【Complete】の元の設定打ち消し用 */
header{
background:none;
z-index: -1;
}
header.header{
z-index: 5;
}
.header.fix{
box-shadow:none!important;
}

/*****************************************************

Fashion ヘッダー #header

*****************************************************/
@media screen and (min-width: 769px) {
/*PCでは元の【Complete】のヘッダーを非表示 */
.header.complete{
display: none;
}
body{
border-top: 5px solid #000;
}
.contents{
padding-top:30px;
}
}
img.M_ShopLogo{
max-height:100px;
width:auto;
}
#header{
width: 94%;
margin-left: auto;
margin-right: auto;
max-width: 1300px;
position:relative;
}

#header.container{
padding: 0;
}

.shop-logo {
float: left;
margin: 30px 0;
height: auto;
width: auto;
}

.header-nav{
position:absolute;
right:0;
top:16px; 
}
.header-nav li,.header-nav li li:first-child{
display:inline-block;
vertical-align:middle;
margin:0 6px;
}
.header-nav li:first-child{
margin:0;
}
.header-nav li li{
font-size:13px; 
}
.header-nav .M_headBasket{
border:none;
background:none;
float:none;
padding:0;
margin:0;
width:auto; 
}
.header-nav #M_headBasketSwitch{
float:none;
width:auto;
height:auto; 
}
.header-nav #M_basketTemp1 #M_basketClosedBox{
background:none;
position:relative;
text-indent:inherit;
width:auto;
height:auto;
display: inline-grid;
}
#header li.header-nav-cart a{
color:#fff; 
text-align:center;
text-decoration:none;
height:auto;
width:auto;
padding:4px 20px;
border-radius:20px; 
-webkit-border-radius:20px;
-moz-border-radius:20px; 
background:#000;
}
.header-nav #M_headBasketIn{
display:none; 
}
.header-nav #M_basketOpenedBox{
top:31px;
background:#ddd;
border:none;
}
.header-nav .M_basketMarginBox{
text-align:center; 
}
#MakeShopTopSearchInput{
padding:3px 6px;
border:1px solid #ccc; 
width:100px;
}
#MakeShopTopSearchButton{
margin:0 0 0 4px;
background:#000 url("/images/original_design_default/samplesource/9/search-icon.png") no-repeat center center;
text-indent:-9999em;
width:28px;
height:22px; 
padding:0;
text-align:inherit;
border-radius:5px; 
-webkit-border-radius:5px;
-moz-border-radius:5px;
display:inline-block;
}

.global-nav{
text-align:left;
float:left;
padding:80px 0 0 80px;
}
.global-nav li{
display:inline-block;
font-size:19px;
margin-right:30px; 
padding-bottom:4px;
}

.index-slider .bx-wrapper{
margin-bottom:16px; 
}
.index-slider .bx-wrapper .bx-pager{
bottom:30px; 
}

.global-nav #M_ctgList2{
display:inline; 
}
.global-nav #M_ctgList2 li{
margin:0;
padding:0; 
background:none;
}
.global-nav #M_ctgList2 a:hover{
text-decoration:none; 
}
.global-nav #M_ctgList2{
display:none; 
position:absolute;
left:0;
top:30px;
border:1px solid #ccc;
background:#fff;
z-index:100;
width:220px;
border-radius:5px; 
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
.global-nav .head-category{
position:relative; 
}
.global-nav .head-category:hover #M_ctgList2,
.global-nav .head-category:hover #M_ctgList2 li{
display:block; 
}
.global-nav .head-category:hover #M_ctgList2 li a{
display:block; 
font-size:15px;
border-bottom:1px solid #ccc;
padding:5px 10px;
}
.global-nav .head-category:hover #M_ctgList2 li:last-child a{
border-bottom:none; 
}
.global-nav .head-category:hover #M_ctgList2 li a:hover{
background:#eee; 
}
.global-nav #M_ctgList2{
display:inline; 
}
.global-nav #M_ctgList2 li{
margin:0;
padding:0; 
background:none;
}
.global-nav #M_ctgList2 a:hover{
text-decoration:none; 
}
.global-nav #M_ctgList2{
display:none; 
position:absolute;
left:0;
top:30px;
border:1px solid #ccc;
background:#fff;
z-index:100;
width:220px;
border-radius:5px; 
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
.global-nav .head-category{
position:relative; 
}
.global-nav .head-category:hover #M_ctgList2,
.global-nav .head-category:hover #M_ctgList2 li{
display:block; 
}
.global-nav .head-category:hover #M_ctgList2 li a{
display:block; 
font-size:15px;
border-bottom:1px solid #ccc;
padding:5px 10px;
}
.global-nav .head-category:hover #M_ctgList2 li:last-child a{
border-bottom:none; 
}
.global-nav .head-category:hover #M_ctgList2 li a:hover{
background:#eee; 
}
.global-nav li #M_ctgList2 li{
margin:0;
padding:0;
background:none;
display:block;
position: relative;
}
.global-nav li #M_ctgList2 li a{
display:block;
font-size:15px;
padding:15px;
}
.global-nav li #M_ctgList2 .M_layer2,
.global-nav li #M_ctgList2 .M_layer3,
.global-nav li #M_ctgList2 .M_layer4,
.global-nav li #M_ctgList2 .M_layer5 {
display:none;
background-color:#fff;
width:200px;
z-index:1;
position:absolute;
left:220px;
top:0px;
border: 1px solid #ccc;
}
.global-nav li:hover #M_ctgList2 li a:hover{
background-color:#EEE;
-webkit-transition:0.3s ease-in-out;
-moz-transition:0.3s ease-in-out;
-o-transition:0.3s ease-in-out;
transition:0.3s ease-in-out;
}
.global-nav li:hover #M_ctgList2 li:hover .M_layer2,
.global-nav li #M_ctgList2 .M_layer2 li:hover .M_layer3,
.global-nav li #M_ctgList2 .M_layer2 .M_layer3 li:hover .M_layer4,
.global-nav li #M_ctgList2 .M_layer2 .M_layer3 .M_layer4 li:hover .M_layer5{
display:block;
}
.cart-count {
position: absolute;
right: -6px;
top: -6px;
background: #F23E0C;
color: #fff;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 50%;
text-align: center;
font-size: 12px;
font-weight: normal;
}
/* SPは通常【Complete】で左上ロゴ固定表示）*/
@media screen and (max-width: 768px) {
#header.container h1.shop-logo a img.M_ShopLogo,
#header .global-nav,.header-nav-login ul,
#header .global-nav,li.header-nav-cart,
#MakeShopTopSearchButton{
display: none!important;
}
header .header-logo img {
max-width: 100%;
position: fixed;
top: 25px;
left: 55px;
z-index: 9999;
}
.header {
padding: 0;
}
header .header-menu{
border-top: 5px solid #000;
}
.contents{
padding-top: 72px;
}
}
</style>