Shopifyテーマカスタマイズの三種の神器：Cart attributes、Line Item Property、Customer noteを使いこなそう！

日本のオンラインストアのデザインにはたくさんの個別要望が寄せられます。配送日の指定を入れたい、のし袋のオプションを入れたい、商品にバリエーション以外のオプションを持たせたい、顧客情報に性別や生年月日を持たせたい、など。

これらのニーズをノーコードで簡単に満たす方法は、そういった機能を提供するShopifyアプリを利用することですが、アプリは便利な一方で、個別の利用料がかかる、上記のようなストアフロントへ機能を提供する場合、そのアプリのパフォーマンスに表示速度が影響を受ける（アプリをたくさん入れたり、重いアプリを入れるとストアの表示速度も遅くなる）といった側面もあります。

そこで次のオプションとして考えられることは、こういった機能を持つテーマをShopifyテーマストアから探すことですが、マーチャントのニーズ（特に日本の商習慣に固有のもの）を全て叶えるテーマを探し出すことは難しいかもしれません。

では、他に方法はないのでしょうか？実は、ちょっとしたLiquidとHTMLの知識があれば、テーマのコードを少しいじることでそういったニーズを叶えられるケースがあります。テーマのコードを少し（大幅にではないことがミソです）変えるだけであれば、テーマの元々のパフォーマンス（表示速度）を損なうこともありませんし、万が一修正箇所を元に戻す場合も大きな負担は発生しないでしょう。

このブログでは、そんないろいろな用途に応用できる簡単なテーマ拡張方法、Cart attributes、Line Item Property、Customer noteについてご説明をしたいと思います。

1. Cart attributesとは？

Cart attributesとは、Shopifyのカート画面に独自の入力項目を追加するための特別なinputフィールドです。開発ドキュメントに記載されているように、下記のような命名規則に従ったinputフィールドをカートのテーマに挿入すると、カートへの独自入力項目の追加、その値の注文詳細画面への反映、Liquidからの参照が可能になります。

Cart attributesの命名規則

Cart attributesは、開発ドキュメントを参照して自分でコードを挿入することもできますが、Shopify UI Element Generatorというジェネレーターサイトを使って、追加したい入力項目のUIをプレビューしながら挿入するコードを生成できます。

ここでは、上記のジェネレーターを使った例をご紹介したいと思います。

まず、上記のジェネレーターに表示されている以下のコードをコピーします。

Cart attributesの実際の挿入コード

name="attributes[Your name]"は、上記命名規則に沿ったinputタグであることを示します。value="{{ cart.attributes["Your name"] }}"は、Liquidからこの値を参照できることを示します。

次に、Shopifyの管理画面の「オンラインストア」> 「テーマ」> 「アクション」> 「コードの編集」 のメニューから、Sections/cart-template.liquidを開きます（Debutテーマを利用の場合。テーマによっては挿入箇所が異なる場合があります）。

上記のジェネレーターには、「カートのテーマファイル内の<form></form>内に記述すること」と書いてありますので、それに従いファイルの中の</form>の部分を検索し、その行の上に上記のコードを貼り付けて保存します。

Cart attributesのコードをカートのテーマファイルに挿入した例

この状態で、ストアフロントを開いて商品をカート入れてカート画面に遷移すると、以下のように上記で挿入したコードの入力項目が追加されているのがわかります。

Cart attributesの入力項目の表示例

この項目に任意のテキストを入力して（ここでは私の名前を入力してみます）、商品の購入を完了してみましょう。購入後にShopifyの管理画面の注文管理から該当の注文詳細を開きます。すると以下にように「詳細」部分に購入時に入力した値が項目名と共に表示されているのがわかります。

Cart attributesが注文詳細に反映された例

Cart attributesは、attributeの名称が重複しなければ複数指定することも可能です。その場合、名称ごとに値は構造化されて保存されます。

複数のCart attributesを挿入した例

また、挿入された値は、「編集」メニューで各項目ごとに変更可能です。

Cart attributesの編集画面

そして（勘の良い方ならお気づきかもしれませんが）、inputタグのtypeを変えることでテキストフィールド以外のUIも作れますし、JavaScriptと併用するともっと凝ったUIを提供することができます。

Shopifyのヘルプに、上記のアプローチで配送日時指定のUIを挿入するサンプルがありますので、ぜひ確認ください。

Cart attributesを使った配送日時指定の例

2. Line Item Propertyとは？

Cart attributesはカートの独自項目用のフィールドですが、Line Item Propertyは、その商品ページ版です。Cart attributes同様に、下記のような命名規則に従ったinputフィールドを商品ページのテーマに挿入すると、商品ページへの独自入力項目の追加、その値の注文詳細画面への反映、Liquidからの参照が可能になります。

Line Item Propertyの命名規則

Line Item Propertyも、開発ドキュメントを参照して自分でコードを挿入することもできますが、Shopify UI Element Generatorで挿入するコードを生成することもできますので、Cart attributesと同じくジェネレーターを使った例をご紹介したいと思います。

まず、上記のジェネレーターに表示されている以下のコードをコピーします。

Line Item Propertyの実際の挿入コード

name="properties[Your name]"は、上記命名規則に沿ったinputタグであることを示します。

次に、Shopifyの管理画面の「オンラインストア」> 「テーマ」> 「アクション」> 「コードの編集」 のメニューから、Sections/product-template.liquidを開きます（Debutテーマを利用の場合。テーマによっては挿入箇所が異なる場合があります）。

上記のジェネレーターには、「商品ページのテーマファイル内の<form></form>内に記述すること」と書いてありますので、それに従いファイルの中の{%  endform  %}の部分を検索し、その行の上に上記のコードを貼り付けて保存します。

Line Item Propertyのコードを商品ページのテーマファイルに挿入した例

この状態で、ストアフロントを開いて商品ページに遷移すると、以下のように上記で挿入したコードの入力項目が追加されているのがわかります。

Line Item Propertyの入力項目の表示例

この項目に任意のテキストを入力して（ここでは私の名前を入力してみます）、商品の購入を完了してみましょう。購入後にShopifyの管理画面の注文管理から該当の注文詳細を開きます。すると以下にように商品の詳細に購入時に入力した値が項目名と共に表示されているのがわかります。

Line Item Propertyが注文詳細に反映された例

Line Item Propertyも、propertyの名称が重複しなければ複数指定することも可能です。また、Cart attributesと異なり、商品単位で別の値の保持が可能です。

複数のLine Item Propertyを用意し、かつ１つの注文で複数商品に別の値を入力した例（カートでの表示）

複数のLine Item Propertyを用意し、かつ１つの注文で複数商品に別の値を入力した例（管理画面の注文詳細での表示）

 注意点としては、Line Item Propertyには編集機能はありません。項目の行の右端をマウスオーバーすると表示されるアイコンで削除のみ可能です。

Line Item Propertyの削除ボタン

Line Item Propertyも、inputタグのtypeを変えることでテキストフィールド以外のUIも作れますし、JavaScriptと併用するともっと凝ったUIを提供することができます。

冒頭の、のしオプションや商品にバリエーション以外のオプションを持たせたい場合などに利用できると思います。

3. Customer noteとは？

三種の神器の最後はCustomer noteです。 こちらはストアの顧客情報に独自項目を入れる方法で、同じく特別な命名規則のinputフィールドを使いますが、Liquidからの参照や、ジェネレータによる生成はできません。顧客登録画面の補助的な機能として存在します。

こちらは、開発ドキュメントのチュートリアルを使ってご説明したいと思います。

まずは、下記の追加項目の挿入コードを上記のチュートリアルページからコピーします。

Customer noteの実際の挿入コード

name="customer[note][Allergies]"は、命名規則に沿ったinputタグであることを示します。

次に、Shopifyの管理画面の「オンラインストア」> 「テーマ」> 「アクション」> 「コードの編集」 のメニューから、Templates/customers/register.liquidを開きます。

上記チュートリアルに従って、ファイルの中の{%  endform  %}の部分を検索し、その行の上に上記のコードを貼り付けて保存します。

Customer noteのコードを商品ページのテーマファイルに挿入した例

この状態で、ストアフロントを開いて顧客登録画面に遷移すると、以下のように上記で挿入したコードの入力項目が追加されているのがわかります。

Customer noteの入力項目の表示例

この項目に任意のテキストを入力して（ここでは私の好きなものを入力してみます）、顧客登録を完了してみましょう。登録後にShopifyの管理画面の顧客管理から該当の顧客を開きます。すると以下にように「お客様に関するメモ」に登録時に入力した値が項目名と共に表示されているのがわかります。

Customer noteが顧客詳細に反映された例

Customer noteも、noteの名称が重複しなければ複数指定することも可能です。ただし、他の二つのように構造化はされずメモとして記録されるのみですので、編集はできますが書式を壊さないように気をつける必要があります。

このチュートリアルの例では、テキストフィールドとして提供していますが、他の二つ同様に、inputタグのtypeを変えることでテキストフィールド以外のUIも作れますし、JavaScriptと併用するともっと凝ったUIを提供することができます。

冒頭の、性別や誕生日の取得などに利用できると思います。

こちらの記事も参考にしてください：

クライアントのためにShopifyのメール通知をカスタマイズする方法

最後に

購入者向けのテーマカスタマイズの三種の神器、Cart attributes、Line Item Property、Customer noteの説明はいかがでしたでしょうか？

冒頭にご説明したように、アプリやテーマで要望に合う満足いくものがあればこういったカスタマイズは不要ですが、もしご自身がテーマをカスタマイズできるスキルをお持ちである場合は、簡単に試せる別のオプションとしてぜひ挑戦していただければと思います。

Shopifyの特徴として、こういった柔軟で汎用的な拡張性を持つことで、直接目的にかなう機能がない場合でも、アイディア次第で実現できることが挙げられます。

そのためのヒントとなるカスタマイズの例が、今日ご紹介した開発者ドキュメントやヘルプにたくさん掲載されておりますので、今回ご紹介できなかった例もぜひお試しいただければと思います。