Shopifyのカートページで配送日時指定や備考欄をつけたいと思ったことはありませんか？

そのときに使えるのがCart Attributes（カートアトリビュート）です。アプリ無し・ランニングコスト無しで配送日時指定の実現もできる便利な機能なのでぜひ活用方法を学びましょう。

弊社は、中小企業に特化したEC運用支援を100件以上おこなう名古屋の制作会社です。
この記事ではCart Attributesの基本から実装方法を分かりやすく解説します。

Cart Attributesとは？

Cart Attributesとは、カート（注文全体）に対して追加情報を保存できるShopify標準機能です。商品ごとではなく、注文単位で情報を保持します。

どんな場面で使う？

よく使われる用途としては下記のような使い方があります。

• 配送希望日の入力
• 領収書の宛名指定
• 決済前の同意事項チェック、
• 備考欄

これらは「商品単位」ではなく「注文単位」の情報なので、Line Item PropertyではなくCart Attributesを使います。

Line Item Propertyとの違い

似た機能で「Line Item Property」という機能もありますが、よく混同されるため違いを整理しておきましょう。

どちらも注文されたときに追加情報を持たせる機能ですが、「Line Item Property」は購入商品ごとに追加する情報なので、例えば商品の名入れや熨斗の有無・刻印文字など商品単位で使うことが多いです。

それに対して「Cart Attributes」は、注文全体に追加する情報で、配送日時や購入前チェックなど注文単位の情報をカートページで追加するときに使われます。

Cart Attributesの実装方法

Cart Attributesはカートページ（cart.liquidやmain-cart.liquid）に入力フォームを追加することで実装します。

基本的なコード例

必要なのは name="attributes[項目名]" という書き方です。
この形式で記述すると、Shopifyが注文データに保存します。

配送日の入力欄

inputはtext以外でも可能です。例えばdateにすれば簡易的な配送日の指定欄を作ることができます。

ジェネレーターで簡単に作成可能

Cart Attributesのinputタグは生成ジェネレーターで簡単に作成できます。

Cart Attributesの生成ジェネレーター
Shopify UI Elements Generator

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

コードの設置場所

上記で作ったinputはどこに設置しても送信されるわけでは無く、特定の設置場所に書くか、form属性を追加してあげる必要があります。

テーマによって異なるのですが、１つは<form>や{% form ~~%}のようなformタグの中に書く方法です。「購入手続きへ進む」（決済）ボタンの付近に上記のタグがあれば、そのformタグ内に記述することで送信されます。

もう１つの方法として、inputタグに下記のようなform属性をつけることで送信できるようになります。

テーマにもともと設置されている備考欄（cart-note）や決済ボタンに、「form="cart"」と書かれていたら同じようにを書いてあげると送信できます。

追加された情報はどこに表示される？

Cart Attributesは、注文詳細画面の「追加詳細」に表示されます。

注文データをCSVでエクスポートした場合は、「Note Attributes」列に出力されます。

まとめ

Cart Attributesをするとアプリ無しで配送日時指定など、ちょっとした機能をアプリ無しで実現できます。

実装も簡単なので、ぜひ配送希望日などを追加してみましょう。
実装に不安がある場合や、やってみたけど動かない...という方は弊社までお気軽にご相談ください。