Shopifyデフォルトのお問合せフォームに注文番号欄を追加しよう

Shopifyではシンプルなお問い合わせフォームをデフォルトで用意してくれています。

ですが、キャプチャを見ていただくと注文番号欄がないことがわかるかと思います。
注文情報に関わるお問い合わせの場合には、注文番号を事前にお伝えいただくことでスムーズなやり取りが可能となります。
そのため、今回は注文番号欄を追加してみたいと思います！

■環境

テーマ：Debut
作業ファイル：page.contact.liquid

■作業内容

{% form 'contact', id: formId %}タグを見つけます。
{% form 'contact', id: formId %}〜{% endform %}の中のお好みの場所に下記を追記します。

<label for="{{ formId }}-ordernumber">注文番号</label>
<input type="text" id="{{ formId }}-ordernumber" name="contact[注文番号]">

■解説

<label for="{{ formId }}-ordernumber">注文番号</label>

for="{{ formId }}-ordernumber"の「ordernumber」については任意の値で問題ありません。（なので、orderidとかでももちろんOKです！）

<label>タグではさんでいる「注文番号」については他の<label>タグを確認すると {{ 'contact.form.○○' | t }}といったLiquidタグを使用していますが、「注文番号」に相当するものがないため静的に記述しています。
こちらも任意の値で問題ありません。
「ご注文に関するお問い合わせの場合にはご入力ください」といった感じに補足を入れてあげても親切でよいかと思います。

<input type="text" id="{{ formId }}-ordernumber" name="contact[注文番号]">

type="text"については、今回はtextにしましたが他の値でも問題はありません。

▼参考

id="{{ formId }}-ordernumber"については、先のforの中身と合わせる必要がありますのでお気をつけください。

name="contact[注文番号]"の「注文番号」については、管理者へ届く通知メールの項目名となります。
任意の値で問題はありませんが<label>タグの部分と合わせるとよいかと思います。

■実装イメージ

今回も簡単な改修だったのでぜひお試しください！