使い方
商品ページとカートページに、名入れやギフトメッセージ、配送希望日などの入力欄を追加できます。 設定はすべて管理画面から行い、テーマのコードを編集する必要はありません。
できること
- 商品ページとカートページに、独自の入力欄を追加できます
- お客様が入力した内容は、注文情報に記録されます
- 7種類の入力欄を使えます(テキスト、テキストエリア、数値、日付、プルダウン、ラジオボタン、チェックボックス)
- 必須入力にしたり、文字数や数値の範囲を制限したりできます
- コレクションごとに、表示する入力欄を変えられます(スタンダードプラン)
設定の手順
-
アプリをインストールする
Shopify アプリストアからインストールします。 インストール直後は入力欄がまだ無いため、ストアの表示は変わりません。
-
入力欄を作る
アプリの管理画面を開き、「全体設定」から入力欄を追加します。 ここで作った入力欄は、すべての商品に表示されます。
入力欄ごとに次の項目を設定できます。
ラベル お客様に表示される項目名です。注文情報にもこの名前で記録されます 入力タイプ テキスト / テキストエリア / 数値 / 日付 / プルダウン / ラジオボタン / チェックボックス プレースホルダー 入力欄に薄く表示される案内文です(テキスト・テキストエリア・数値のみ) 選択肢 1行に1つずつ入力します(プルダウン・ラジオボタン・チェックボックスのみ) 単位 数値の後ろに表示されます(数値のみ) 最大文字数 「名入れは10文字まで」のような制限をかけられます(テキスト・テキストエリアのみ) 最小値・最大値 入力できる数値の範囲を決められます(数値のみ) 必須入力 未入力のままではカートに追加・購入手続きへ進めなくなります 表示順は、一覧のドラッグ&ドロップで入れ替えられます。
-
テーマに表示位置を追加する
入力欄を作っただけでは、まだストアには表示されません。 テーマエディタで表示したい位置にブロックを追加してください。
アプリのトップページにある「テーマに入力欄を表示する」のボタンからは、 ブロックを追加した状態のテーマエディタが直接開きます。 以下は手動で追加する場合の手順です。
商品ページに表示する場合
Shopify管理画面の 「オンラインストア」→「テーマ」→「カスタマイズ」 を開き、 商品ページのテンプレートを選びます。 商品情報のセクションで 「ブロックを追加」→「アプリ」 から 「カスタム入力フォーム(商品ページ)」を追加します。
カートに追加ボタンの近くに置いてください。 入力欄が離れた場所にあると、お客様が気づかないまま購入してしまうことがあります。
カートページに表示する場合
同じくテーマエディタでカートページのテンプレートを選び、 「カスタム入力フォーム(カートページ)」を追加します。 カートページでは、すでにカートに入っている商品の入力内容をあとから編集できます。
カートがスライド表示(ドロワー)のテーマの場合
カートの中身が画面の横からスライドして出るテーマでは、その中に入力欄を表示できません。 テーマエディタの 「アプリ埋め込み」 から 「カートページへの案内(ドロワー用)」を有効にすると、 ドロワーの中に「入力・変更はカートページで行えます」という案内とリンクが表示されます。
案内は、カートに入っている商品に入力欄が設定されているときだけ表示されます。 ドロワーが無いテーマでは何も表示されないため、有効のままでも問題ありません。
どちらか一方だけでも、両方でも使えます。 枠線の色や余白などの見た目は、テーマエディタのブロック設定から調整できます。
-
ストアで表示を確認する
実際に商品ページを開いて、入力欄が表示されるか確認してください。 テスト注文を作成して、入力した内容が注文情報に記録されるところまで確認しておくと安心です。
商品ごとに入力欄を変える
スタンダードプランでは、コレクション別設定が使えます。 Shopify のコレクションを選び、そのコレクションに入っている商品にだけ表示する入力欄を追加できます。
コレクション別設定の入力欄は、全体設定の入力欄のあとに続けて表示されます。 全体設定を置き換えるわけではないので、 「全商品に共通のギフトメッセージ欄」+「ギフト商品だけの、のし名入れ欄」といった組み合わせができます。
1つの商品が複数のコレクションに入っている場合は、 一覧で上にある設定が優先されます。 優先順位はドラッグ&ドロップで入れ替えられます。
特定の商品だけを対象にしたい場合は、その商品をまとめたコレクションを Shopify 側で作成してから、 アプリでそのコレクションを選んでください。
入力内容の確認方法
お客様が入力した内容は、Shopify の注文情報に商品ごとの追加情報として記録されます。 管理画面の 「注文管理」 から注文を開き、商品名の下に表示される項目をご確認ください。
注文確認メールやピッキングリストなど、テーマやアプリによっては表示されない場合があります。 出荷作業で使う画面に表示されるかどうかは、運用を始める前に確認しておくことをおすすめします。
料金プラン
| 機能 | 無料プラン | スタンダードプラン |
|---|---|---|
| 全体設定(全商品に共通の入力欄) | 制限なし | 制限なし |
| 入力タイプ7種・必須入力・文字数や数値の制限 | すべて使えます | すべて使えます |
| コレクション別設定 | ご利用いただけません | 制限なし |
プランの変更は、アプリ管理画面の「プランを見る」からお進みください。 スタンダードプランから無料プランに戻した場合、コレクション別設定の内容は削除されず、 ストアでの表示のみ停止します。再度アップグレードすればそのままご利用いただけます。
よくあるご質問
入力欄がストアに表示されません
次の順に確認してください。
- アプリの管理画面で入力欄を作成し、「このフォームを表示する」にチェックが入っているか
- テーマエディタでブロックを追加し、保存したか
- コレクション別設定の場合、その商品が対象のコレクションに入っているか
- コレクション別設定の場合、スタンダードプランをご利用中か
カートページに入力欄が出ません
カートの中身をスライド表示する形式(カートドロワー)のテーマでは、 ドロワーの中に入力欄を表示できません。テーマ側が描画している領域のためです。
商品ページ用のブロックをあわせてご利用いただくと、購入前に入力していただけます。 あわせて、テーマエディタの「アプリ埋め込み」から 「カートページへの案内(ドロワー用)」を有効にすると、 ドロワーの中にカートページへのリンクが表示されます。
「今すぐ購入」ボタンから購入すると入力内容が反映されません
「今すぐ購入」やShop Payなどの動的チェックアウトボタンは、カートを経由せずに決済画面へ進むため、 Shopifyの仕様上、入力内容を注文に引き継げません。
そのため本アプリでは、入力欄がある商品ではこのボタンを自動的に非表示にします。 この動作は、商品ページ用ブロックの設定「入力欄がある商品では「今すぐ購入」ボタンを隠す」で切り替えられます。 表示したままにする場合、そのボタンから購入された注文には入力内容が記録されませんのでご注意ください。
入力欄のラベルを変更したら、カートの入力内容が消えました
入力内容はラベル名と紐づけて保存されるため、ラベルを変更すると以前の入力内容とは別の項目として扱われます。 運用を開始したあとのラベル変更はお控えいただくか、変更後に改めてご入力いただくようご案内ください。
お問い合わせ
ご不明な点は support@artizan.jp までお問い合わせください。 ストアのURLと、お困りの内容(どのページで、どの入力欄が、どうなるか)をお知らせいただけると、 お調べがスムーズです。