【クリエイターモード】テンプレートBasicsで、ヘッダーのキーワード検索を開いている状態にしたいです。方法を教えてください。 – makeshop よくある質問

テンプレート【Basics】では、ヘッダーの検索窓はクリックすると開くようにデザインされています。

記述内容を変更することにより、クリックしなくても開いた状態のままにすることが可能です。

以下の手順で対応してください。

（１）ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理
モジュール名「ヘッダー」　モジュールID：$module.header

欄内に一度カーソルを置いた状態で、キーボードのCtrlとFキーを同時に押し表示される検索窓に

<div class="close">

と入力（コピー＆ペースト）し、キーボードのEnterキーを押して以下の記述を見つけてください。

<div class="close">×</div>

この記述を削除し、保存してください。

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

欄内に一度カーソルを置いた状態で、キーボードのCtrlとFキーを同時に押し表示される検索窓に

$('.search-icon').on('click', function()

と入力（コピー＆ペースト）し、キーボードのEnterキーを押して以下の記述を見つけてください。

$('.search-icon').on('click', function() {
    $('.search-box').animate({ width: 'toggle' }, 'slow');
});
$('.close').on('click', function() {
    $('.search-box').fadeOut('slow');  
});

この記述（6行）を削除してください。

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

欄内に一度カーソルを置いた状態で、キーボードのCtrlとFキーを同時に押し表示される検索窓に

.search-box

と入力（コピー＆ペースト）し、キーボードのEnterキーを押して以下の記述を見つけてください。

.search-box {
  margin: 0;
  float: left;
  display: none;
  position: relative;
  right: 0;
}

この記述から、

display: none;

を削除し保存してください。

関連記事