キャンセル
検索
導入前のご相談 06-6485-5330
運用サポート:06-6485-6485 平日9:30~18:00(土日祝除く)
コマースクリエイター無効コマースクリエイター有効コマースクリエイター運用中?

商品検索フォームについて

×

マニュアル閲覧上の注意

店舗の状態にあわせて、上のボタンからいずれかを選択してください。表示される項目が変更されます。

コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

上記のボタンは再選択できます。店舗の状態がわからない方はコマースクリエイターご利用状況の確認方法についてをご覧ください。

商品検索フォームの仕様

商品検索結果一覧に表示される商品

  • 公開されている商品が表示されます。デザイン確認モードでプレビューしている場合は非公開商品も表示されます。
  • 非公開グループに属する商品は、商品が公開されていれば表示されます。
  • 闇市商品(闇市グループに属する商品)は表示されません。
  • 未ログイン時は会員専用商品は表示されません。

商品検索結果一覧のURLとパラメタ

商品検索結果一覧のURLと、リンクURLは以下となります。(formタグでmethod属性を「get」にした場合も同様です。)
パラメータをname、値をvalueとして記載しています。パラメータと値については検索パラメータをご参照ください。

/p/search?name1=value1&name2=value2 …

以下は例となります。(例として、店舗ドメインをexample.comで表現しています。店舗ドメインに置き換えてください。)

  • キーワード 検索結果一覧へのリンク(「シャツ」というワード)
    https://example.com/p/search?keyword=シャツ
  • 商品価格 検索結果一覧へのリンク(1000円から5000円まで・在庫)
    https://example.com/p/search?minprice=1000&maxprice=5000
  • 商品タグ 検索結果一覧へのリンク(「セール」という商品タグへのリンク)
    https://example.com/p/search?tag=セール

商品検索フォームのHTMLタグ サンプル

以下が商品検索フォームのサンプルとなります。HTMLタグのサンプルとなりますので、デザインはされておりません。
商品検索フォームはフリーパーツに記述し、レイアウトに配置して使用します。

なお、スタートアップテーマで使用できる検索フォームはフリーパーツ「商品キーワード検索フォーム」「詳細商品検索フォーム」としてご用意しています。パーツ検索して適宜変更してご利用ください。

必須の記述

<form action="/p/search">
{ ここに任意の検索フォームを記述 }
<button type="submit">検索</button>
</form>

キーワード検索

<form action="/p/search">
<label>キーワード<input type="text" name="keyword" maxlength="1000" value="{% search.keyword %}"></label>
<button type="submit">検索</button>
</form>

検索結果一覧ページに設置する場合、valueに置換文字「{% search.keyword %}」を記載すれば、検索した値を初期設定でき、再検索していただきやすくなります。

価格検索

<form action="/p/search">
<span>価格</span>
<input type="text" name="minprice" maxlength="9" value="{% search.minprice %}">〜
<input type="text" name="maxprice" maxlength="9" value="{% search.maxprice %}">
<button type="submit">検索</button>
</form>

検索結果一覧ページに設置する場合、valueに置換文字「{% search.minprice %}」「{% search.maxprice %}」をそれぞれ記載すれば、検索した値を初期設定でき、再検索していただきやすくなります。

バリエーション検索

バリエーション名(縦)の項目名が「カラー」で、バリエーション選択肢名に「レッド」などのカラーが登録されている場合。

いずれか1つ選ぶ場合(セレクトボックスのサンプル)
<form action="/p/search">
カラー:<select name="verticalvariationvalue">
<option value="" selected="selected">選択してください</option>
<option value="レッド">レッド</option>
<option value="ブルー">ブルー</option>
<option value="イエロー">イエロー</option>
</select>
<button type="submit">検索</button>
</form>
複数選択する場合(チェックボックスのサンプル)
<form action="/p/search">
<span>カラー</span>
<label><input type="checkbox" name="verticalvariationvalue" value="レッド">レッド</label>
<label><input type="checkbox" name="verticalvariationvalue" value="ブルー">ブルー</label>
<label><input type="checkbox" name="verticalvariationvalue" value="イエロー">イエロー</label>
<button type="submit">検索</button>
</form>

バリエーション(横)の項目名が「サイズ」で、バリエーション選択肢名に「S」「M」「L」などのサイズが登録されている場合。

いずれか1つ選ぶ場合(ラジオボタンのサンプル)
<form action="/p/search">
<span>サイズ</span>
<label><input type="radio" name="horizontalvariationvalue" value="" checked="checked">指定なし</label>
<label><input type="radio" name="horizontalvariationvalue" value="S">S</label>
<label><input type="radio" name="horizontalvariationvalue" value="M">M</label>
<label><input type="radio" name="horizontalvariationvalue" value="L">L</label>
<button type="submit">検索</button>
</form>

検索結果一覧ページでは、以下の置換文字をフリーパーツにそれぞれ記載すれば、検索条件に指定された値を出力できます。

  • 「バリエーション(縦)選択肢:{% search.vertical_variation_value %}」
  • 「バリエーション(横)選択肢:{% search.horizontal_variation_value %}」

再検索に使用する場合は、バリエーション検索フォームの性質上、JavaScriptなどで検索値をタグの「選択されている状態」に変換していただく必要がございます。

商品タグ検索

<form action="/p/search">
<span>詳細検索</span>
<label>NEW<input type="checkbox" name="tag" value="NEW"></label>
<label>予約<input type="checkbox" name="tag" value="予約"></label>
<label>再入荷<input type="checkbox" name="tag" value="再入荷"></label>
<label>セール<input type="checkbox" name="tag" value="セール"></label>
<button type="submit">検索</button>
</form>

検索結果一覧ページでは、置換文字をフリーパーツにそれぞれ記載すれば、検索条件に指定された値を出力できます。
再検索に使用する場合は、検索フォームの性質上、JavaScriptなどで検索値をタグの「選択されている状態」に変換していただく必要がございます。

在庫の指定

<form action="/p/search">
<span>在庫のない商品を検索結果に</span>
<label><input type="radio" name="nostock" value="false" checked="checked">表示しない</label>
<label><input type="radio" name="nostock" value="true">表示する</label>
<button type="submit">検索</button>
</form>

検索結果一覧ページでは、置換文字をフリーパーツにそれぞれ記載すれば、検索条件に指定された値を出力できます。
再検索に使用する場合は、検索フォームの性質上、JavaScriptなどで検索値をタグの「選択されている状態」に変換していただく必要がございます。

商品番号検索

<form action="/p/search">
<label>商品番号・JANコード<input type="text" name="goodsno" maxlength="32" value="{% search.product_no %}"></label>
<button type="submit">検索</button>
</form>

検索結果一覧ページに設置する場合、valueに置換文字「{% search.product_no %}」を記載すれば、検索した値を初期設定でき、再検索していただきやすくなります。

バンドル販売

シャツまとめ買い(bundle01)、靴下まとめ買い(bundle02)というバンドル販売があった場合
<form action="/p/search">
<span>まとめ買い商品検索</span>
<label><input type="radio" name="bundle" value="bundle01">シャツまとめ買い</label>
<label><input type="radio" name="bundle" value="bundle02">靴下まとめ買い</label>
<button type="submit">検索</button>
</form>

検索結果一覧ページでは、置換文字をフリーパーツにそれぞれ記載すれば、検索条件に指定された値を出力できます。
再検索に使用する場合は、検索フォームの性質上、JavaScriptなどで検索値をタグの「選択されている状態」に変換していただく必要がございます。

予約商品

<form action="/p/search">
<label><input type="checkbox" name="preorder" value="true">予約商品のみを表示する</label>
<button type="submit">検索</button>
</form>

検索結果一覧ページでは、置換文字をフリーパーツにそれぞれ記載すれば、検索条件に指定された値を出力できます。
再検索に使用する場合は、検索フォームの性質上、JavaScriptなどで検索値をタグの「選択されている状態」に変換していただく必要がございます。

並び順指定

<form action="/p/search">
<span>並び順</span>
<label><input type="radio" name="sort" value="latest" checked="checked">新着順</label>
<label><input type="radio" name="sort" value="oldest">登録順</label>
<label><input type="radio" name="sort" value="price_high">価格高い順</label>
<label><input type="radio" name="sort" value="price_low">価格安い順</label>
<label><input type="radio" name="sort" value="priority">優先度順</label>
<label><input type="radio" name="sort" value="review">レビュー(数多い)順</label>
<label><input type="radio" name="sort" value="keyword">おすすめ(キーワードヒット)順</label>
<button type="submit">検索</button>
</form>

「キーワードヒット順」はキーワード検索時に有効になり、並び順(sort)の初期値となります。

検索結果一覧ページでは、並べ替えが選択されます。指定した並べ替えが表示されていない場合は、構築メニュー>ページ設定>商品ページ設定-並び替えリンク表示設定-並び替えリンク設定をご確認ください。

また、置換文字をフリーパーツにそれぞれ記載すれば、検索条件に指定された値を出力できます。
再検索に使用する場合は、検索フォームの性質上、JavaScriptなどで検索値をタグの「選択されている状態」に変換していただく必要がございます。

検索パラメータ

商品検索フォームのパラメータは以下の通りです。

検索項目 パラメータ(name) 値(value) 検索方式 複数指定 複数検索 複数凡例 検索対象項目
キーワードkeyword任意の文字列部分一致AND検索keyword=xxx yyyキャッチコピー
商品名
商品説明(大・小)
商品一言説明
商品独自コメント1~20
商品番号
商品名(連携用)
商品説明(連携用)
商品価格(最小価格)minprice半角数字(桁区切り不可)完全一致不可------販売価格
会員価格(ログイン中かつ設定あれば)
商品価格(最大価格)maxprice半角数字(桁区切り不可)完全一致不可------販売価格
会員価格(ログイン中かつ設定あれば)
商品タグtag「商品タグ」として登録された文字列完全一致AND検索tag=商品タグ1&tag=商品タグ2商品タグ
バリエーション(縦)項目verticalvariationname項目名として登録した文字列完全一致不可------バリエーション(縦)項目
バリエーション(縦)選択肢verticalvariationvalueバリエーション(縦)選択肢名として登録した文字列完全一致OR検索verticalvariationvalue=バリエーション(縦)選択肢1
&verticalvariationvalue=バリエーション(縦)選択肢2
バリエーション(縦)選択肢
バリエーション(横)項目horizontalvariationname項目名として登録した文字列完全一致不可------バリエーション(横)項目
バリエーション(横)選択肢horizontalvariationvalueバリエーション(横)選択肢名として登録した文字列完全一致OR検索horizontalvariationvalue=バリエーション(横)選択肢1
&horizontalvariationvalue=バリエーション(横)選択肢2
バリエーション(横)選択肢
在庫のない商品nostocktrue:表示する
false:表示しない(初期値)
完全一致不可------検索結果に含める・含めないを指定
商品番号goodsno任意の文字列部分一致OR検索goodsno=xxx yyy商品番号
JANコード
バンドル販売bundleバンドル販売URLコード完全一致不可------バンドル販売URLコード
予約商品preordertrue:予約商品のみ表示する
false:指定を行わない
完全一致不可------予約商品
並び順sortoldest:登録(早い順)
latest:登録(遅い順)※新着順
price_high:価格(高い順)
price_low:価格(安い順)
priority:優先度順
review:レビュー数(多い順)
keyword:キーワードヒット順※おすすめ順
完全一致不可------並び順

商品説明(大・小)に関しては、HTMLタグ除去処理を行います。『半角「<」「>」に囲まれている』などの条件で削除いたしますが、HTMLタグ以外にも条件に当てはまる場合は検索対象から外れます。
なお、商品一言コメント・商品独自コメントについては、処理なしで検索対象となりますので、HTML内の文言なども検索されます。

置換文字

商品検索フォームに入力された値を置換文字で出力できます。
キーワードや商品価格を再検索フォームの初期値に入れるなど、様々な用途にご利用いただけます。

画面 内容 置換文字 説明
商品検索結果一覧ページ検索結果-キーワード{% search.keyword %}商品検索フォームに入力されたキーワードの値に置換されます
商品検索結果一覧ページ検索結果-商品価格(最小価格){% search.minprice %}商品検索フォームに入力された商品価格(最小価格)の値に置換されます(半角数字、桁区切りなし)
商品検索結果一覧ページ検索結果-商品価格(最大価格){% search.maxprice %}商品検索フォームに入力された商品価格(最大価格)の値に置換されます(半角数字、桁区切りなし)
商品検索結果一覧ページ検索結果-商品タグ{% search.tag %}商品検索フォームに入力された商品タグの値に置換されます(複数ある場合は、半角空白区切り)
商品検索結果一覧ページ検索結果-バリエーション(縦)項目名{% search.vertical_variation_name %}商品検索フォームに入力されたバリエーション(縦)項目名の値に置換されます
商品検索結果一覧ページ検索結果-バリエーション(縦)選択肢名{% search.vertical_variation_value %}商品検索フォームに入力されたバリエーション(縦)選択肢名の値に置換されます
商品検索結果一覧ページ検索結果-バリエーション(横)項目{% search.horizontal_variation_name %}商品検索フォームに入力されたバリエーション(横)項目の値に置換されます
商品検索結果一覧ページ検索結果-バリエーション(横)選択肢{% search.horizontal_variation_value %}商品検索フォームに入力されたバリエーション(横)選択肢の値に置換されます
商品検索結果一覧ページ検索結果-在庫のない商品{% search.out_of_stock %}商品検索フォームに入力された在庫のない商品表示フラグによって置換されます(表示する/表示しない)
商品検索結果一覧ページ検索結果-商品番号/JANコード{% search.product_no %}商品検索フォームに入力された商品番号/JANコードの値に置換されます
商品検索結果一覧ページ検索結果-バンドル販売URLコード{% search.bundle %}商品検索フォームに入力されたバンドル販売URLコードの値に置換されます
商品検索結果一覧ページ検索結果-予約商品のみ{% search.preorder %}商品検索フォームに入力された予約商品のみフラグの値よって置換されます(予約商品のみ表示する/指定を行わない)
商品検索結果一覧ページ検索結果-並び順{% search.sort %}検索結果一覧の現在の並び順(sort)の値によって置換されます
構築メニュー>ページ設定>商品ページ設定-並び替えリンク表示設定にある並び替えリンクごとの「リンクテキスト」が出力されます。初期値は「latest:新着順 / oldest:登録順 / price_low:価格が安い順 / price_high:価格が高い順 / priority:優先度順 / review:レビュー順 / keyword:おすすめ順」となっています。

サイトリンク検索ボックス(構造化データ)について

Google 検索の「サイトリンク検索ボックス(Sitelinks Searchbox)」に対応するには、下記の「構造化データ」をフリーパーツに記述した上で、トップページなどに配置してください。
詳しくはSitelinks Searchbox(Google社のドキュメント)をご覧ください。

なお、初期設定されているフリーパーツ「商品キーワード検索フォーム」「詳細商品検索フォーム」にはあらかじめ下記を記述済みです。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "{% shop.domain %}",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://{% shop.domain %}/p/search?keyword={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
</script>

項目表示について

各項目は以前からのECサイト用・コマースクリエイター用・共通の3種類があります。コマースクリエイター有効(切替前)は両方の項目が表示されます。

以前からのECサイト用項目で、コマースクリエイターでは使用しません。(右側にこちらの色の点線が表示されます。)

コマースクリエイター専用ECサイト用の項目です。以前からのECサイトには影響しません。(右側にこちらの色の点線が表示されます。)

上記以外は共通で使用する項目です。(何も表示されません。)

×

店舗の状態にあわせて、下のボタンからいずれかを選択してください。

コマースクリエイター無効 コマースクリエイター有効 コマースクリエイター運用中
コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

再度選択できますので、店舗の状態がわからない方はいったん「有効」をお選びください。
詳しくはコマースクリエイターご利用状況の確認方法についてをご覧ください。