オプション情報を使ってテーマをカスタマイズする方法【注文確認メール】

2024-01-28

この記事では、カート、商品、チェックアウトから追加されたオプジョン情報を使って注文メールのカスタマイズを行う方法を説明します。

お客様通知でオプション情報の内容を通知したい、といったお問い合わせをいただくことがあります。オプション情報は Cart attributes、Line Item Property にセットされます。これらを注文確認メールに表示することで、お好きな形でオプション情報を表示させることができます。

前提から順に説明しますが、設定方法だけ知りたいという方は「注文確認メールの編集」セクションをご覧ください。

Cart attributesについて

テーマのカスタマイズにおいて、独自の入力項目を追加したいときに利用されるプロパティです。詳細に関しては、参考ページにリンクをまとめましたので、そちらを見てもらうとしてアプリでの使われ方について少し説明します。

カート、チェックアウトのページでオプションが選択されたとき、オプション情報はCart attributesに設定されます。

例：カートページからウィジェット「Default」を選択、カート追加された場合

キー名	値
`Option`	ラッピング / ギフト包装
`Sender`	テスト氏名
`Message`	テストメッセージ

Cart attributesに設定される値

カート、チェックアウト両ページで表示しているウィジェットがあった場合について、
カートでオプションが追加された場合は、チェックアウトページで同じウィジェットは表示されなくなります。

Line Item Propertyについて

Line Item Propertyについても、キー名と値の組み合わせはCart attributesと同様ですが、こちらは標準で各商品名の下に表示されます。テーマを編集することで非表示にしたり、デザインを変更することが可能です。

例：商品ページからウィジェット「Default」を選択、カート追加された場合

注文確認メールの編集

以下のページを参考に、ストア管理画面から [お客様通知] > [注文の確認] を開いてください。

Shopify ヘルプセンター

メール通知のテンプレートをカスタマイズするお客様とスタッフへの通知に使用する、ストアのメールとSMSのテンプレートをカスタマイズします。

[コードの編集] からメール本文（HTML）を編集していきます。オプション情報を表示したい場所に以下のコードを貼り付けます。注文メモを表示させたいことがあると思いますので、そのコードも記載しておきます。


{% if note != blank %}
    <p><b>注文メモ</b></p>
    <p>内容：{{ note }}</p>
{% endif %}

{% if attributes["Option"] != blank %}
    <p><b>ギフトオプション</b></p>
    <p>商品名：{{ attributes["Option"] }}</p>
    {% if attributes["Sender"] != blank %}
        <p>送り主氏名：{{ attributes["Sender"] }}</p>
    {% endif %}
    {% if attributes["Message"] != blank %}
        <p>メッセージ：{{ attributes["Message"] }}</p>
    {% endif %}
{% endif %}

最後にテスト注文を行なって注文確認メールにオプション情報が記載できていれば完了です。
形式や表示位置は、自身の環境に合わせて変えてください。

終わりに

注文確認メールにオプション情報を表示する方法について、必要な知識を含めて説明しました。
今回の作業を通して、お客様通知が好きなように編集できるようになれば、他のテーマテンプレートに対しても近しい手順で編集できるかと思います。ただし、テンプレートごとに参照できるliquidオブジェクトが異なるため、その点は注意が必要です。他のテンプレートに応用するにあたっては、最新の公式ドキュメントを見ながら作業する必要があります。
もしアプリのオプションがうまく表示できないといった場合はサポートいたしますのでお問い合わせください。

オプション情報を使ってテーマをカスタマイズする方法【注文確認メール】

Cart attributesについて

Line Item Propertyについて

関連記事・参考ページ

注文確認メールの編集

終わりに

メニュー