【クリエイターモード】テンプレート&moreでヘッダーに検索を表示させたいです。方法を教えてください。 – makeshop よくある質問

デザインテンプレート【＆more】のPC表示では、画面の左側（カテゴリ―、検索画面）に
検索フォームが表示される仕様です。

＜サンプルショップ表示例＞

ヘッダーにも検索アイコンを表示させる一例を以下にご紹介します。

＜追加後の表示例＞

※初期値を変更した一例です。
初期値ではない場合はこの通りに表示されない可能性がありますが、無償サポートの対象外です。

(1)PCで非表示にされている検索のアイコンを表示させます。

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

「CSS」欄

「menunavi-search」を検索して以下の記述を探し、
（ソース欄にカーソルをあわせてCtrl＋Fキーを押し、表示される検索窓に「menunavi-search」と入力してEnterキーを押すと該当する記述にマーカーで着色された状態で表示されます。）

＜変更前＞
1550行目よりも後方

.sp-header-nav,
.menunavi-search {
	display: none;
}

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

＜変更後＞

.sp-header-nav .nav-cart,
.sp-header-nav .menu-icon,
.menunavi-search {
	display: none;
}

(2)同様に、「menunavi-search」を探し、記述にclassを追加してください。

＜変更前＞
1880行目よりも後方

.menunavi-search {
	display: block;
}

＜変更後＞

.sp-header-nav .nav-cart,
.sp-header-nav .menu-icon,
.menunavi-search {
	display: block;
}

(3)以下の記述を削除してください。

.search-icon .material-icons-outlined::after {
	content: "search";
	transition: all 300ms 0s;
}

(4)検索アイコンを「スマホでのみ表示」から「PCでも表示」する位置に変更し、アイコンのサイズを調節します。(3)で削除した記述の前方（初期値では1485行目付近）に以下の記述がありますので、

.account-cart-box {
  margin-left: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

この記述の前（上の行）に以下をコピー＆ペーストしてください。

.search-icon .material-icons-outlined {
	font-size: 36px;
}
.search-icon .material-icons-outlined::after {
    content: "search";
    transition: all 300ms 0s;
    font-size: 36px;
    cursor: pointer;
}

(5)PCでの表示サイズを調節するCSSを追加します。

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

「CSS」欄の末尾に以下の記述をコピー＆ペーストしてください。

@media screen and (min-width: 768px) {
.menunavi-search .menunavi-body{
	height: 100px !important;
	min-height: 0 !important;
	width: 500px;
	right: 0;
	}
}

(6)スマホでの検索ボタンの位置を調整します。

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

「CSS」欄

以下の記述に検索キーワード欄の幅を指定するwidth：プロパティを追加して保存してください。

＜変更前＞

.menunavi-search .search-keyword {
  flex-grow: 1;
}

＜変更後＞

.menunavi-search .search-keyword {
  flex-grow: 1;
  width: calc(100% - 62px);
}

関連記事