商品ページ③：購入フォーム
productフォームで数量・line item properties・販売プランを扱い、動的チェックアウトボタンを配置できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、名入れや熨斗のような追加情報を受け取れる購入フォームを作れるようになります。
受託では日本のECで毎回出るこの要望を、propertiesを使ってアプリなしで実現できます。
購入フォームとは、/cart/addに送るフォーム
{% form 'product', product %}で作ります。
送信先は/cart/addです。
hiddenのid（バリエーションID）とquantityがあれば、最低限動きます。
JSが無くても動く形を基本にします（プログレッシブエンハンスメント。まず素のHTMLで動かし、JSで体験を足す考え方です）。
line item propertiesとは、注文明細に載る追加情報
<input name="properties[熨斗]">のように書くと、値が注文明細に載ります。
管理画面と通知メールで、運用者がそのまま確認できます。
`properties[_internal]`のようにアンダースコアで始めると、チェックアウトでは表示されません（管理画面の注文詳細には出ます）。
ただしテーマのLiquid（item.properties）とAjax API（/cart.js）には、そのまま含まれます。
カートページやドロワーでは、テーマ側で_始まりのキーを除外して描画します（Dawnも同じ分岐をしています）。
定期購入と「今すぐ購入」はどう扱うか
定期購入アプリがproduct.selling_plan_groupsを用意し、selling_planのhidden inputで選択を送ります。product.requires_selling_planが真なら、選択が必須です。
動的チェックアウトボタン（Shop Payなどで、カートを経由せずチェックアウトへ進むボタン）は、{{ form | payment_button }}で出します。
JSで加工したpropertiesが反映されないことがあるので、名入れ必須の商品では非表示にする判断もあります。
発展：ギフトカードの受取人
受取人にメールで送る機能は、規定のproperties名（__shopify_send_as_a_giftなど）を使います。
Dawnのgift-card-recipient-formスニペットが参考になります。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。