1. Top
  2. ブログ一覧
  3. ShopifyでLine Item Propertiesを使い、カートアイテムにカスタム情報を追加する
Eコマース

ShopifyでLine Item Propertiesを使い、カートアイテムにカスタム情報を追加する

公開日

2024.12.11

ShopifyでLine Item Propertiesを使い、カートアイテムにカスタム情報を追加するのサムネイル

Shopifyのカートページには、通常、商品名や数量、価格などの基本的な情報しか表示されません。しかし、顧客体験をより豊かにしたい場合や、内部的なロジックで商品ごとの管理を強化したい場合には、もう少し踏み込んだカスタム情報を扱うことが有効です。そこで役立つのが、Line Item Propertiesです。この機能を使えば、個々の商品に独自の属性を持たせたり、顧客から追加情報を入力してもらったりすることが可能になります。

たとえば、オリジナルメッセージの刻印、特定のバリエーションでは対応できない細やかなオプション設定、顧客によるカスタムテキスト入力、さらにはギフト利用時の特別なメッセージカード指定など、さまざまな用途で活用できます。本記事では、Line Item Propertiesの基本的な考え方や実装方法、実際に使えるユースケースをわかりやすく解説します。

Line Item Propertiesとは?

Line Item Propertiesは、商品がカートに追加された際、その商品に任意のカスタム属性を付与できる機能です。通常のバリエーション(カラーやサイズ)とは異なり、より柔軟な情報を付け加えることができます。たとえば、顧客がテキストを自由に入力できるフィールドを用意すれば、そのテキスト情報が注文時に保存されるため、オンデマンドのカスタムサービスなどを提供しやすくなります。

このような柔軟性を持つLine Item Propertiesを使いこなせば、商品単位で多様な設定が可能になり、店舗運営や顧客体験の幅が広がります。

ユースケース

オリジナルメッセージの刻印対応

例えば、Tシャツやアクセサリーに顧客の名前や特別な日付を刻印したい場合、顧客はカート投入時に希望のテキストを入力できます。これにより、顧客はパーソナルな特典を感じ、ショップ側は他にはない付加価値を提供できます。

オプション選択が多いプロダクトの細分化

標準のバリエーション機能では対応しづらい複雑なオプションを扱いたい場合に、Line Item Propertiesが有効です。たとえば、カスタムパソコンを販売する際、CPUやGPUだけでなく、ケーブルカラーやファンの種類など、細やかな要素を商品ごとに追加できます。

食品販売での味付け指定

食品や飲料を扱う店舗では、顧客に甘さやスパイスの度合いなどを商品単位で指定してもらうことで、より最適な商品を提供できます。顧客が自分の好みに合わせた調整を行えるため、再購入率や満足度の向上が期待できます。

ギフト機能の充実

ギフトとして商品を購入する顧客のために、商品ごとにメッセージカードやラッピングオプションを設定できます。顧客がカート追加時にメッセージを入力すれば、その商品に対してだけ特別なカードを同梱できるため、よりパーソナライズされた贈り物が実現します。

限定品のトラッキング

シリアル番号や限定生産ロットを内部的なプロパティとして商品に紐づけることで、あとから販売実績を分析したり、特定の商品の品質管理を行いやすくなります。顧客には表示せず、店舗側だけが把握する情報として利用することで、出荷管理やアフターサポートに役立ちます。

Line Item Propertiesの設定方法

1. カート追加フォームを探します

テーマのテンプレートを開き、{% form 'product' ... %}と記述された箇所を見つけます。ここがカートに商品を追加するためのフォームであり、この中にプロパティを指定するinputを追加していくことになります。

2. inputタグでプロパティを追加します

カート追加フォーム内でinputタグを用意し、name="properties[任意の名前]"という形式でカスタム情報を定義します。たとえば、梱包タイプを指定したい場合は以下のようになります。

<input type="hidden" name="properties[梱包タイプ]" value="ダンボール">

これで、カート内の商品には「梱包タイプ: ダンボール」というカスタム情報が付与されます。
顧客に自由入力を求める場合は、type="text"やtextareaを使用します。たとえばメッセージを記入できる欄を設ける場合は以下のようになります。

<input type="text" name="properties[メッセージ]" value="" placeholder="メッセージを入力してください">

ちなみに、form属性を利用することで、カート追加フォームとは別の場所からでも同じフォームに対して値を渡せます。以下はセクションIDを利用した例です。

<input type="hidden" name="properties[梱包タイプ]" value="ダンボール" form="{{ 'product-form-' | append: section.id }}">

これにより、デザイン上の都合で別の場所に置かれたinputであっても、同じ商品追加フォームに紐づけられます。

実際にテーマのカスタマイズでカスタムLiquidを使い埋め込んでみます。

alt text

カート画面に梱包タイプが表示されたことを確認できます。

alt text

[補足]:内部向けプロパティを設定したいとき

properties[_シリアル番号]のようにアンダースコア付きで指定すると、顧客に見せずに内部用の情報として保持できます。これを使えば、在庫ロットや製造番号、キャンペーン適用状態など、顧客には不要な内部データを商品に紐づけられます。

<input type="hidden" name="properties[_シリアル番号]" value="123456">

お客様のチェックアウト画面には表示されません。

alt text

管理画面の注文詳細ページで確認できます。

alt text

こうした内部情報は、後での分析や出荷管理などの効率化に貢献します。

便利なツール

Shopify UI Elements Generatorというツールを利用すれば、必要な属性やフィールドを指定するだけで、自動的に設定用のコードを生成できます。これを参考にすれば、初めてLine Item Propertiesに触れる場合でも、比較的スムーズに導入できます。

alt text

まとめ

Line Item Propertiesを活用することで、Shopifyストアは商品ごとに細やかなカスタム情報を扱えるようになります。顧客はよりパーソナライズされたショッピング体験を得られ、店舗側は複雑なオプション管理や内部的なロジスティクスをスムーズに進めることができます。

例えば、普段なら実現しづらいオンデマンド生産やギフトカスタマイズ、細かい味付けの指定など、ショップの特徴を引き出す施策をLine Item Propertiesによって手軽に導入可能です。EC市場が多様化する中、こうした細やかな付加価値は、顧客満足度とブランドロイヤリティの向上につながります。

参考