名入れや写真入りのオーダー商品では、注文と一緒にお客様の写真やコメントを受け取る必要があります。Shopifyの商品ページに写真の添付欄を付ける改修を担当した経験から、作る前に決めておくことと、公開前に確かめることをまとめました。
1. 受け取る内容と、出し分けを決める
最初に「何が無いと商品を作れないか」を決めます。写真の枚数、形やサイズなどの選択、コメントのうち、どれが必須でどれが任意かです。
注文方法が複数ある商品では、入力欄の出し分けも必要です。私が担当した事例では、写真4枚・形の選択・コメントを添えて注文する方法と、通常サイズを選んで購入する方法がありました。選んだ注文方法に応じて入力欄を切り替え、写真を使わない注文では添付欄を出さないようにしています。
2. 入力内容は「ラインアイテムプロパティ」で注文に残す
Shopifyでは、商品フォームの中に properties[項目名] という名前の入力欄を置くと、その内容が注文の商品ごとの情報として残ります。これをラインアイテムプロパティと呼びます。写真のファイルも同じ仕組みで受け取れるので、内容によってはアップロード用のアプリを入れずに済みます。
気を付けたいのは、商品フォームの外にある入力欄や、name のない入力欄は送られないことです。画面上は入力できるのに、注文には届いていないという事故になります。ボタン型の選択肢など、独自の部品を使う時は特に確かめます。
3. スマホの写真は、送る前に小さくする
スマホで撮った写真は1枚で数MBあることが多く、何枚もまとめて送ると時間がかかります。担当した事例では、ブラウザ側で画像のサイズを調整してから送り、添付容量もチェックしました。
あわせて、添付できたかどうかが画面で分かるように、アップロード後は表示を切り替えています。スマホでは入力が長くなりがちなので、項目を開閉できるようにしました。
4. 「今すぐ購入」ボタンに注意する
商品ページの「今すぐ購入」や Shop Pay などのボタンは、カートを通らずに決済へ進みます。2026年8月に実際の決済画面で確かめた範囲では、このボタンから進んだ注文には、商品ページで入力した内容が残りませんでした。
必要な情報を入力欄で受け取る商品では、このボタンを出さないか、入力内容をカートに入れてから決済へ進む自前のボタンに置き換えます。「写真が要らない選択肢の時だけ出す」という方法も、形の選択など全部の注文で必要な項目があると同じ問題が起きます。担当した事例でも、必要な入力を飛ばして注文できないよう、購入ボタンの表示を注文方法ごとに調整しています。
5. 公開前にテスト注文で確かめる
実際に注文を入れてみるのがいちばん確実です。私は次の点を確かめています。
- 写真・選択内容・コメントが、管理画面の注文情報に残っているか
- 写真を使う注文と使わない注文の両方で、商品ページからカートまで操作できるか
- カートの中で、写真の順番が入れ替わっていないか
- 必須の入力を空にしたまま、注文に進めないか
- スマホで購入ボタンが押しやすいか
担当した事例でも、公開後に添付済み表示の大きさ、カート内の写真の順番、スマホの購入ボタンを調整しました。小さなことですが、お客様が迷うと注文が止まる部分です。
6. 受注後に確認する場所を共有する
入力欄を足したら、運用する方に「注文が入った後、どこを見れば写真やコメントが分かるか」を共有します。担当した事例でも、追加した入力項目と受注後に確認する内容をお伝えしました。
まとめ
写真付きの注文は、商品ページの見た目よりも「入力した内容が漏れなく注文に届くか」が大切です。受け取る内容を決め、ラインアイテムプロパティで残し、「今すぐ購入」ボタンの扱いを決めて、テスト注文で確かめる。この順番で進めると、公開後の手戻りが少なくなります。
この記事のもとになった事例は、写真4枚を添えて注文できる商品ページにで紹介しています。同じような改修の費用は、Shopifyの部分改修・機能追加で 2.5〜5万円（税込の目安）です。