「Dawn」テーマでLine Item Propertiesが反映されない原因と解決方法を解説します。正しいフォーム位置への設置や通知メールへの表示方法まで、実務に役立つポイントを紹介しています。
食品系のBtoBサイトを制作・運営している中で、新しく追加された商品に少し悩ましい仕様がありました。
4種類のフレバー(メニュー)があり、さらに最小購入数（ロット）が決まっているため、バリエーションで制御しようとすると組み合わせが数十パターンにも膨れ上がってしまったのです。お客様にとっても、ただ選ぶだけで大変な作業になります。
そこで今回は、より柔軟に運用できるよう「Line Item Property」を「<textarea>」で実装し、必要事項を直接記入してもらう方法を採用しました。本記事では、実装時に遭遇した「なぜかカートに反映されない！」という問題の原因と解決策について、Dawnテーマを例にわかりやすく紹介します。
Line Item Propertiesが動作しない？
実装方法自体はシンプルで、Shopify公式ドキュメントや各種情報を参考にすれば「Line Item Property」を設置する場所もすぐにわかります。
<label for="LineItemNote">注文バリエーション</label>
<textarea
id="LineItemNote"
name="properties[注文バリエーション]"
rows="4"
placeholder="例）チョコフレバー30本、キャラメルフレバー30本">
</textarea>しかし実際に商品ページ（main-product.liquid）へ「<textarea>」を追加してみると、入力した内容がまったく反映されないという問題が発生しました。
カートやチェックアウト画面はもちろん、注文詳細ページにも表示されず、「送られてすらいない」という状況・・フォーム(<form>)に設置したつもりが、実は Shopify が送信対象として認識していなかったのです。
同サイトでは 「Dawn」テーマを使用していましたが、その構造がこの原因につながっていました。テーマによってフォームの実体が別ファイルに分離されていることを理解していないと、動かないまま悩み続けてしまう落とし穴でした。
「buy-buttons.liquid」に設置する
「Line Item Properties」は、商品ページ上に表示されるだけでは機能しません。
入力された内容がShopifyのサーバーへ送信されてはじめて、カートやチェックアウトページ、さらには注文詳細画面へと反映される仕組み。そして、その送信処理を担っているのが「カートに追加」ボタンや「今すぐ購入」ボタンになります。
ところが「Dawn」テーマの場合、商品テンプレート側にはフォームの送信機能が揃っておらず、実際のフォーム本体は別のスニペットファイルである「buy-buttons.liquid」に分離されています。つまり、「main-product.liquid」などに「<textarea> </textarea> 」を置いただけでは送信されず、正しい動作になりません。
解決のポイントは、必ず「buy-buttons.liquid」の「{% form ‘product’ %}」内に「Line Item Properties」を配置することでした。
やっちゃいがちな実装方法
実装でつまずきやすい原因のひとつが、「ネットに載っているサンプル通りに書いたのに動かない」というパターンです。
多くの記事では「main-product.liquid の {% form ‘product’ %} の中に Line Item Properties を入れれば良い」と説明されています。確かに商品テンプレート内には「{% form ‘product’ %}」が存在しますが、実はこれが落とし穴でした。
{%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
{{ form | payment_terms }}
{%- endform -%}該当フォームは、分割払い（Shop Pay Installments）に関する入力情報を扱うためのもので、商品情報をカートへ送信する役割を持っていません。そのため、このフォーム内に追加しても、まったくサーバーへ送られず、「Line Item Properties」が反映されない状態になります。
注文通知に反映させる
「buy-buttons.liquid」のフォーム内に「Line Item Properties」を設置すると、カートやチェックアウト画面、注文詳細ページまでは問題なく反映されるようになりました。
しかし実務では「お客様が何を記入したのかをメールでも確認したい」という場面が多く、通知メールに表示されないのは不便です。
その場合は、通知テンプレート内の「subtotal_line_items」のループで、「Line Item Properties」を追記します。具体的には、次のようなコードを追加することで、手入力してもらった内容をメール本文にも表示できます。
{% for line in subtotal_line_items %}
...
{% if line.properties %}
{% for p in line.properties %}
{% unless p.last == blank %}
<br>
ご注文のバリエーション（直接記入）
{{ p.first }}: {{ p.last }} //←Line Item Propertiesが表示
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}いかがでしょうか。
今回は「Dawn」テーマを例に「Line Item Properties」を実装する際に起きやすい落とし穴と、その正しい対応方法について解説しました。
テーマによってフォームの構造が異なるため、「設置したのに反映されない」という状況に陥りがちなポイントですが、一度仕組みがわかれば応用は難しくありません。カート・チェックアウト・注文メールのすべてに反映できるよう調整しておけば、運用面でも安心です。ぜひ、商品の仕様に応じて柔軟に活用してみてください。
