Shopifyで実現！入力フィールドでお客様の文字入れ・メッセージに対応するカスタム商品販売ガイド

はじめに

ECサイトにて、お客様がカスタムできる商品を出品したいけど、どうすればいいのと悩むことはありませんか？
Shopifyでは、Line Item Property機能を活用することで、このようなニーズを簡単に叶えることができます！
この記事では、商品ページに独自の入力フィールドを実装し、お客様から追加情報を収集する方法をステップバイステップで解説します。

Line Item Propertyとは？

Line Item Propertyは、商品ごとにカスタム情報（例: 名入れ、メッセージ、オプションの選択、個別の要求など）を注文情報に追加するための仕組みです。
この機能を利用して、注文商品の詳細なカスタム情報を把握することができます。

実装ステップ

ステップ1: 入力フィールドの作成

まず入力フィールドの作成方法を紹介します。
Line Item Propertyに使える入力フィールド項目は下記の6種類です。

• 単一行のテキスト：input type=”text”
• 複数行のテキスト：textarea
• ラジオボタン：input type=”radio”
• チェックボックス：input type=”checkbox”
• プルダウンメニュー：select
• チェックボックスグループ：input type=”hidden”

入力フィールドの作成には「Shopify UI Element Generator」を利用すると、簡単に入力フィールドのHTMLタグを作成できます。

https://ui-elements-generator.myshopify.com/pages/line-item-property

使い方は①から④を設定すると「Grab your code」の赤枠にHTMLタグが表示されますので「COPY TO CLIPBOARD」ボタンをクリックしてください。

出力される入力フィールドについて解説します。
inputタグの「name」属性として properties[カスタム名] が付加されていることが分かります。
この「name="properties[カスタム名]"」を設定することで、Line Item Propertyとして注文情報に送信されます。
さらに、入力フィールドに「form="{商品フォームのID}"」属性を入力すること、商品formタグ中にインプット要素を入れなくても、Line Item Propertyとして注文情報に送信されます。
テーマ「Dawn」の場合、商品フォームのIDは{{ 'product-form-' | append: section.id }}となりますので、以下の例のようになります。
例：
form属性なし

<input id="your-name" type="text" name="properties[Your name]">

form属性あり

<input id="your-name" type="text" name="properties[Your name]" form='{{ 'product-form-' | append: section.id }}' >

ステップ2: 「Dawn」テーマの商品ページに入力フィールドを導入

ここからは、実際に「Dawn」テーマのケーキ屋のECサイトにおいて、メッセージチョコプレートの入力フィールドを商品ページに追加する場合を例に、商品に入力フィールドを表示する実装手順を見ていきましょう。
まずは、オンラインストア＞テーマへと進み、「カスタマイズ」を押すことで、カスタマイズを開きます。

「ホームページ」と書かれている中央上部のメニューをクリックし、「商品」をクリックし、商品テンプレート（例：デフォルトの商品）を選択することで、商品詳細ページの編集画面に移ります。

商品情報セクションを選択し、購入ボタンブロックの上で「ブロックの追加」し、「カスタマイズされたLiquid」を選択してください。

次に、「Shopify UI Element Generator」をブラウザの新しいタブで開き、
① Text-long ②チョコプレートメッセージと入力し、「COPY TO CLIPBOARD」ボタンをクリックしてください。

Shopifyの画面に戻り、「カスタマイズされたLiquid」ブロックのLiquidコードにペーストしてください。

そして、textareaタグ内にform='{{ 'product-form-' | append: section.id }}' を追加してください。

追加が完了したら画面右上の「保存」ボタンを押して、カスタマイズ画面を閉じます。

ステップ3: ストアプレビュー

実際に商品詳細ページにて確認してみます。
商品ページでは下図のように入力フィールドが表示されます！

試しに「誕生日おめでとう！山田太郎くん」と入力し、「今すぐ購入」をクリックします。

すると、チェックアウト画面の商品名の下にチョコプレートメッセージが表示されます。

注文管理画面では、下図のように商品名の下にチョコプレートメッセージが表示され、カスタマイズされた商品注文を受けることができます！

終わりに

ShopifyのLine Item Propertyプロパティを活用することで、お客様ごとの個別リクエストを簡単に管理することができます。
実装自体は比較的シンプルですが、デザインやユーザビリティに気を配ることで、より良い購入体験を提供することができます。
ぜひ、この記事を参考にして、あなたのストアに最適な入力フィールドを導入してみてください。

株式会社Tsuzucleでは、Shopifyに関する技術サポートを提供しています。ご相談は、下記のリンクよりお気軽にお問い合わせください。
お問い合わせ：https://tsuzucle.com/pages/contact
メールアドレス：[e-mail]
Xアカウント：https://x.com/tsuzucle