【クリエイターモード】テンプレートCompleteのヘッダーにキーワード検索を設置したいです。方法を教えてください。

全ページ共通の「CSS」欄、「JavaScript」欄、モジュール「ヘッダー」の編集が必要です。

表示例＜PCページ＞

表示例＜スマホページ＞

手順1）

◆全ページ共通の「CSS」欄を編集

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通
「CSS」欄　末尾に下記を追記してください。

追記例）

.heder-search-area{
  width: 100%;
  transition: .3s;
}
.header-nav-search{
  display: inline-flex;
  height: 30px;
  transition: .3s;
}
.fix .heder-search-area li.header-nav-search{
  top:30px;
  transition: .3s;
}
.heder-search-area input{
  width: 200px;
}
.heder-search-area input[type="text"]{
  border: 1px solid #000;
  margin-right: 5px;
}
.search-btn.search-url{
  background: #333;
  color: #fff;
  padding: 5px!important;
}
@media screen and (max-width: 768px) {
  .heder-search-area .header-nav-search,
  .fix .heder-search-area li.header-nav-search{
    position: fixed;
    top:25px;
    left: 35px;
  }
  .heder-search-area input{
    width: 120px;
  }
}

手順2）

◆全ページ共通の「JavaScript」欄を編集

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通
「JavaScript」欄　内

// 検索フォーム
$('.search-keyword, .search-price, .original-code').on('keypress', function(e) {
    if (e.keyCode == 13) {
        $('.search-url')[0].click();
    }
});

こちらの記述を下記に変更してください。

変更例）

// 検索フォーム キーワード検索欄用
$('.search-keyword').on('keypress', function(e) {
    if (e.keyCode == 13) {
        var index = $('.search-keyword').index(this);
        $('.search-url')[index].click();
    }
});

手順3）

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

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

モジュール名：ヘッダー
モジュールタグ：$module.header
ソースコードの記述を下記に変更してください。(太字のソースを初期値に追加しています。)

<header class="header">
    <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">
                <li>
                    <ul class="heder-search-area">
                        <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>
                    </ul>
                </li>
                <{if $member.is_logged_in}>
                <li class="account logout"><a href="<{$url.logout}>">ログアウト</a></li>
                <{else}>
                <{if $shop.is_member_entry_enabled}>
                <li class="account membership"><a href="<{$url.member_entry}>">新規会員登録</a></li>
                <{/if}>
                <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>

関連リンク：
スマホヘッダーでは検索窓を非表示にしたい場合は、

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通

「CSS」欄　末尾に下記を追記してください。

追記例）

@media screen and (max-width: 768px) {
  .heder-search-area .header-nav-search,
  .fix .heder-search-area li.header-nav-search{
    display:none;
  }
}