Shopifyで「名入れをしたい」「購入時にメッセージを入力してもらいたい」と思ったことはありませんか？

そんなときに使えるのがLine Item Property（ラインアイテムプロパティ）です。

Shopify公式も「Cart attributes」「Customer note」と並んで三種の神器と呼んでいるほど汎用性も高い機能ですが、今回はそんなLine Item Propertyの基本の使い方から注意点を解説いたします。

弊社は、Shopify専門でEC構築・運用支援を100件以上おこなう名古屋の制作会社です。
最後に意外と知らない重要ポイントも書いてありますので、ぜひ最後までご覧ください。

Line Item Propertyとは？

Line Item Propertyとは、商品購入時に「追加情報」を入力してもらうためのShopify標準機能です。アプリを使わずに実装できるのが大きな特徴です。

どんなことができる？

• 熨斗や無料ラッピングの有無や選択ボックスを作れる。
• 名入れテキストの入力欄を作れる
• ギフトメッセージ欄を追加できる
• オーダー番号や刻印内容の入力が可能
• チェックボックスや選択式項目も作れる

これらの入力欄を商品詳細ページに挿入することで、お客様が商品をカートに追加するときに入力してもらうことができます。 また注文情報を受けとる管理画面側では、情報は「注文詳細」に保存され、管理画面や注文通知メールで確認することもできます。

Line Item Propertyの設定方法

Line Item Propertyはテーマファイル（Liquid）を編集して追加します。アプリではなくコードで実装する仕組みです。

基本的なコード例

このコードを商品詳細ページのフォーム（product.liquidやmain-product.liquid）内に追加します。

inputタグを記述する場所

上記のinputタグは特定の場所に記述しないと注文情報に追加されません。

１つは「main-product.liquid」などの商品詳細ページ部分を作成しているファイルの中に下記のような{%- form -%}タグがあるかと思います。
この中に記述することでinputの情報を取得することができます。

{%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
    〜〜〜

    
{%- endform -%}

また、もう１つはinputタグ自体に『form="product-form-{{ section.id }}"』の属性を追加することで、formタグ内でなくても取得することが可能です。。

チェックボックスの例

inputの入力形式はtext以外でも使えますので、type属性をtextareaやcheckboxなどに設定することで変更することが可能です。

入力項目の「name="properties[○○]"」というname属性の形式がポイントです。
この記述があることで、ShopifyはそれをLine Item Propertyとして認識します。

ジェネレーターで生成することも可能

Line Item Propertyのinputタグは生成ジェネレーターもあります。

・Line Item Propertyの生成ジェネレーター
https://ui-elements-generator.myshopify.com/pages/line-item-property

任意のinputのTypeとラベル・Required（必須）設定をおこなうだけで、『Grab your code』の下に自動でコードが生成されます。
あとはCSSで調整するだけですぐ使用できるのでぜひ活用してみてください。

Line Item Propertyの注意点

便利な機能ですが、いくつか重要な制限があります。ここを知らないとトラブルになるので気をつけてください。

価格を変更できない

• 入力内容によって金額を自動変更することはできない
• 追加料金を取る場合は別バリエーションやアプリが必要

Line Item Propertyは商品の購入情報に追加で持たせることができる「メモ」の機能です。

そのため、バリエーションのように選択肢によって料金を変動させたり有料オプションを作ることはできません。

在庫管理とは連動しない

• 入力内容ごとに在庫を分けることは不可
• SKU管理はできない

こちらも上記と同様であくまでメモ機能のため、選択肢ごとに在庫数を設定・管理をすることはできません。

意外と知らない活用方法

ここまでご覧いただいた方に、Line Item Propertyには、あまり知られていない便利な使い方もあるので紹介します。

非表示項目を追加できる

Line Item Propertyを通常通りに利用するとカートページなどで表示されますが、name属性を『properties[_test]』のように『アンダーバー（_）』を頭につけてあげると、表示を消すことができます。

type="hidden"と組み合わせれば、inputタグ自体も表示されなくなるため完全非表示で情報を送信でき、 配送コードやお客様に見せたくない情報を注文情報に埋め込むことが可能です。

バリエーション上限対策として使える

Shopifyは標準のバリエーション数に上限100個までの制限がされていますが、Line Item Propertyはバリエーションでは無いため上限数を無視して追加することができます。

ただし、前述の通り料金変動や在庫管理はできないため、それらが不要な場合のみ代用できます。

ファイルを送信できる

実は凄いこの機能...！
Shopifyでフォーム送信はお問い合わせやカート・会員登録などいくつかあるのですが、標準機能では画像ファイルをアップロードして送信することはできません。（アプリや外部サーバーの使用が必要。）

しかし唯一、Shopifyで画像をアップロードできるのがLine Item Propertyなのです。

画像ファイルやPDFを送信することができるので、コップやTシャツのプリント画像などに活用できます。

まとめ

Shopifyで初級のカスタマイズ「Line Item Property」の基本について解説しました。

ちょっとしたコード追加でかなり便利になるので、ぜひ活用してみましょう。

もし実装に不安がある場合や挙動が上手く行かない場合は、元町コマースにお気軽にご相談ください。