開店ガイド
運用サポート(平日10:00~17:00) 06-6485-6485

検索ボックスを強化する

ショップ開店の準備が整った店舗様向けのステップアップ用のガイドです。

このパートは、スタートアップテーマに初期状態で設置されている検索フォームのカスタマイズ方法をご紹介します。 商品検索フォームは、フリーパーツで作成されています。フリーパーツ変更画面で変更します。

商品検索フォームの変更画面を確認する

  1. スタートアップテーマでの[商品検索フォーム]は[商品検索結果一覧]などに設置されています。

  2. 詳細検索ボタン
    [商品検索結果一覧]の詳細検索ボタン
    商品検索デフォルト
    商品検索
  3. commerce creator>パーツをクリックし、[商品検索フォーム]と検索します。

    フリーパーツ検索
  4. [詳細商品検索フォーム]のをクリックします。

    フリーパーツ変更画面ボタン
  5. 必要であれば、パーツ名を変更します。
    表示内容を変更すると、検索フォームをカスタマイズできます。

    フリーパーツ変更画面

    それでは、実際にいくつかカスタマイズしてみましょう。

タグ検索を変更してみよう

  1. 例として商品タグ検索を変更してみましょう。

    商品にタグを登録します。
    検索にヒットさせたい商品の、運用>商品管理>商品基本情報-商品タグに、検索項目として利用するタグを入力します。
    (例:期間限定セール・オーダーメイド・数量限定 など)

    商品タグ
  2. フリーパーツ「詳細商品検索フォーム」でフォームをカスタマイズします。
    初期状態では「セール」「限定」「再入荷」「翌日発送」が[商品タグ]検索項目として指定されています。

    今回は、「期間限定セール」を検索フォームとして追加してみます。
    「<label>」と「value=""」に商品基本情報-商品タグで設定した商品タグ名(期間限定セール)を入力します。
    必要に応じて「商品タグ」という検索項目見出しも変更します。

    期間限定セールタグ

    検索フォームのサンプルタグはオンラインマニュアルをご確認ください。

    「value=""」の入力を忘れずに!

    初期状態では「value=""」が空欄になっている項目があります。
    このままでは検索が動きませんので、忘れずに入力しましょう。

  3. [保存する]をクリックします。
    実際の画面で表示、挙動を確認します。 デザインはCSSで修正できます。

    期間限定セール追加後

カラー検索を変更してみよう

  1. 例としてカラー検索を変更してみましょう。
    バリエーションに設定したカラーを検索結果として表示します。

    商品にバリエーションカラーを登録します。
    運用>商品管理>商品基本情報(バリエーション)タブにカラーを登録します。

    バリエーションカラー
    ポイント

    検索フォームでは、縦軸、横軸を別々で検索します。
    商品登録時に、カラーを登録する軸を統一しておきましょう。

  2. フリーパーツ「詳細商品検索フォーム」でフォームをカスタマイズします。
    初期状態では「レッド」「ブルー」「イエロー」が検索項目として指定されています。

    今回は、「パープル」を検索フォームとして追加してみます。
    「<label>」と「value=""」にバリエーションに登録したカラー名(パープル)を入力します。
    必要に応じて「カラー」という検索項目見出しも変更します。

    サンプルタグはオンラインマニュアルをご確認ください。

    パープル追加
    「value=""」の入力を忘れずに!

    初期状態では「value=""」が空欄になっている項目があります。
    このままでは検索が動きませんので、忘れずに入力しましょう。

  3. [保存する]をクリックします。
    実際の画面で表示、挙動を確認します。 デザインはCSSで修正できます。

    パープル追加後

[参考]検索フォームの仕様とその他カスタマイズ方法

  1. その他検索項目のカスタマイズ方法や置換文字の活用、検索パラメータなどについて、オンラインマニュアルにて解説しています。