# 注文確認メールに注文メモを表示させる。

**URL:** <https://community.shopify.com/t/topic/14136>\
**Category:** 技術的なQ＆A\
**Created:** [June 9, 2020, 9:18am UTC](https://community.shopify.com/t/topic/14136 "2020-06-09T09:18:20Z")\
**Posts on this page:** 10\
**Page:** 1

## AI-generated summary

注文確認メールに「注文メモ（備考）」を表示したい要望。サポート案内の {{ cart.note }} は通知メールでは機能せず、挿入場所にも迷いがあった。

解決策: 通知メールテンプレートでは cart.note ではなく note を参照するのが有効。例: 「{% if note != blank %}…{{ note }}…{% endif %}」で空欄時は非表示（この条件は省略可）。

挿入場所: 管理画面>設定>通知>「注文の確認」（顧客向け）または「新しい注文」（スタッフ向け）で編集。配置は配送先住所の下、もしくは「注文概要」の下かつ「お客様情報」テーブルの上が分かりやすい。

レイアウト議論: 余白調整のためtableタグで周囲のHTML構造に合わせる案と、簡素な段落のみで差し込む案が提示。centerタグの非推奨指摘があったが、Shopifyの既定がテーブル中心であることから、周囲と同じ構造に合わせる方が崩れにくいとの理解で収束。

結果: note変数を用いた実装で依頼者環境で表示が確認され解決。未解決の技術課題は特になし。

<div class="post-metadata">

**Author:** ![Yuya0210](https://avatars.discourse-cdn.com/v4/letter/y/7c8e57/32.png) [@Yuya0210](https://community.shopify.com/u/Yuya0210)\
**Post date:** [June 9, 2020, 9:18am UTC](https://community.shopify.com/t/topic/14136/1 "2020-06-09T09:18:20Z")

</div>

注文時に顧客が記入する「注文メモ」（備考欄？）を注文確認メールに反映させる方法を知りたいのですが教えていただけませんでしょうか？

カスタマーサポートの方曰く、

{{ cart.note }}を通知メールに追加されれば可能。  
[https://community.shopify.com/c/Shopify-Discussion/Order-note-added-to-confirmation-emails/td-p/158571](https://community.shopify.com/c/Shopify-Discussion/Order-note-added-to-confirmation-emails/td-p/158571)

とのことでしたが、通知メールの編集画面までいけてもどこに挿入したらいいかわからず困っております。

また他にも方法があれば教えていただきたいです。

---

<div class="post-metadata">

**Author:** ![AraiTakayuki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/araitakayuki/32/373207_2.png) [@AraiTakayuki](https://community.shopify.com/u/AraiTakayuki)\
**Post date:** [July 2, 2020, 12:42pm UTC](https://community.shopify.com/t/topic/14136/2 "2020-07-02T12:42:29Z")

</div>

こちらのコードをコピーしてご使用ください。

```auto
{% if cart.note != blank %}
<p><b>注文備考:</b></p>
<p>{{ cart.note }}</p>
{% endif %}
<p></p>

```

※コードの意味は、「注文備考に記載があった場合、注文備考：を表示させます」です。

（注文備考：はお好きなものに変更してご使用ください。）

挿入場所はこちらになります。

```auto
---省略---
<p><b>配送先住所:</b></p>
<p>{{ shipping_address.name }}</p>
<p>{{ shipping_address.street }}</p>
<p>{{ shipping_address.city }}, {{ shipping_address.province }} {{ shipping_address.zip }}</p>
<p>{{ shipping_address.country }}</p>
<p>{{ shipping_address.phone }}{% endif %}</p>
<p></p>

{% if cart.note != blank %}
<p><b>注文備考:</b></p>
<p>{{ cart.note }}</p>
{% endif %}
<p></p>

{% if shopify_shipping_enabled %}
  <p>以下で時間とお金を節約する <a href="{{ fulfillment_url }}">Shopify Shippingでフルフィルメント</a></p>
  <p></p>
{% endif %}

```

試しに配送先住所の下に入れてみましたが、

上に表示させたい場合は、{% if … %}コード{% endif %}の外に入れていただければよろしいかと思います。

* * *

念のため、コードの反映場所についても記載します。

▼反映場所

◯お客様の入力情報を店舗側で確認したい場合

[管理画面ログイン] \> [左下の設定] \> [通知] \> [（スタッフ注文通知の中の）新しい注文]

◯お客様の入力情報を注文確認としてそのまま連絡したい場合

[管理画面ログイン] \> [左下の設定] \> [通知] \> [（お客様通知の中の）注文の確認]

から変更していきますのでよろしくお願いします。

---

<div class="post-metadata">

**Author:** ![tuple](https://avatars.discourse-cdn.com/v4/letter/t/da6949/32.png) [@tuple](https://community.shopify.com/u/tuple)\
**Post date:** [October 30, 2020, 6:49am UTC](https://community.shopify.com/t/topic/14136/3 "2020-10-30T06:49:16Z")

</div>

補足です。

こちら実装したところ、

cart.note ではうまく表示されませんでしたが下記のように記載したら実装できました。

ちなみに、 **!= blank は** 「カートメモが空欄ではない場合」という指示になります。

```auto
{% if note != blank %}
<p><b>注文備考:</b></p>

<p>{{ note }}</p>

{% endif %}
<p></p>

```

---

<div class="post-metadata">

**Author:** ![Yuya0210](https://avatars.discourse-cdn.com/v4/letter/y/7c8e57/32.png) [@Yuya0210](https://community.shopify.com/u/Yuya0210)\
**Post date:** [October 30, 2020, 8:25am UTC](https://community.shopify.com/t/topic/14136/4 "2020-10-30T08:25:25Z")

</div>

Arai様

ありがとうございます。

こちらのコードでは反映されませんでしたが、貼り付け場所はわかりやすく助かりました。

---

<div class="post-metadata">

**Author:** ![Yuya0210](https://avatars.discourse-cdn.com/v4/letter/y/7c8e57/32.png) [@Yuya0210](https://community.shopify.com/u/Yuya0210)\
**Post date:** [October 30, 2020, 8:27am UTC](https://community.shopify.com/t/topic/14136/5 "2020-10-30T08:27:51Z")

</div>

tuple様

こちらのコードで私もうまく行きました。

大変助かりました。

ありがとうございました。

---

<div class="post-metadata">

**Author:** ![\_osamu\_iwasaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/_osamu_iwasaki/32/272617_2.png) [@\_osamu\_iwasaki](https://community.shopify.com/u/_osamu_iwasaki)\
**Post date:** [October 30, 2020, 10:43am UTC](https://community.shopify.com/t/topic/14136/6 "2020-10-30T10:43:13Z")

</div>

おそらく、!=blank の条件式は省略出来ると思います。

---

<div class="post-metadata">

**Author:** ![Horai](https://avatars.discourse-cdn.com/v4/letter/h/dec6dc/32.png) [@Horai](https://community.shopify.com/u/Horai)\
**Post date:** [October 22, 2021, 2:43am UTC](https://community.shopify.com/t/topic/14136/7 "2021-10-22T02:43:12Z")

</div>

tableタグで挿入しないと左右の余白が気になったのでこちらにメモ代わりに投稿させていただきます。

差し込み箇所として、個人的には注文概要の下、お客様情報のtableタグの上辺りが良さそうに思いました。

通知テンプレート設定箇所のURL: [https://shopify.com/admin/email\_templates/order\_confirmation/edit](https://shopify.com/admin/email_templates/order_confirmation/edit)

```markup
{% comment %}表示を確認する際は↓このcommentを外します。{% endcomment %}
{% comment %}
{% assign note = "領収書お願いします。宛名は「山田太郎」です。" %}
{% endcomment %}

{% if note != blank %}
<table>

	
		
			
				<table>

					<tr>

						<td>

							

**注文備考**

							

{{ note }}

						

</td>

					</tr>

				</table>
			
		
	
</table>
{% endif %}

```

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [October 22, 2021, 9:43pm UTC](https://community.shopify.com/t/topic/14136/8 "2021-10-22T21:43:33Z")

</div>

> Horai様

centerは廃止されているタグなので、使用するのは適切ではないと思います。

> **[: 中央揃えテキスト要素 - HTML | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/center)**
>
> は HTML の要素で、中に含まれるブロックレベルまたはインラインコンテンツを中央揃えして表示するブロックレベル要素です。コンテナーはふつう ですが、必ずしもそうとは限りません。

> **[HTML Standard 日本語訳](https://momdo.github.io/html/obsolete.html)**

また、テキストを中央揃えにするためにtableを入れ子で使うのも無駄が多いように思います。

この場合の一例としましては以下のような形が簡素かなと思います。

```markup

**注文備考**

{{ note }}

```

※クラスをつけてインラインスタイルシートを使った方が良いと思いますが、説明がややこしくなるのでstyle属性で記載しています。  
※bタグも適切なタグとCSSを使用する形に変更した方がよいと思いますが、こちらもややこしくなるのでそのままにしています。

なお記載されましたコーディング内容に中央揃え以外の意図がありましたら、私の書き込みは出過ぎたものとなりますので、その際は申し訳ありません。

---

<div class="post-metadata">

**Author:** ![Horai](https://avatars.discourse-cdn.com/v4/letter/h/dec6dc/32.png) [@Horai](https://community.shopify.com/u/Horai)\
**Post date:** [October 23, 2021, 6:09am UTC](https://community.shopify.com/t/topic/14136/9 "2021-10-23T06:09:35Z")

</div>

@Jizo_Inagaki ご確認いただきありがとうございます！

コードの意図を補足させていただきますと、主に周辺のHTMLと同じになるようにした感じです。  
最初私もシンプルに書いたのですが表示が崩れてしまい…

周辺で使われているHTMLタグと同じように書いてあげることで周りと同じcssがあたるように極力同じメールテンプレート内にあるHTMLタグ、クラスをそのままにしておきました。

なので中央寄せがしたいわけではなく（実際には左寄せになります）、周辺の余白などに馴染むように表示させたかった、が真意でしてその場合に自分でスタイリングするより他と同じHTMLタグを利用する方が手っ取り早くスタイリングを合わせたかったためでした。

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [October 23, 2021, 6:44am UTC](https://community.shopify.com/t/topic/14136/10 "2021-10-23T06:44:06Z")

</div>

> Horai様

差し出がましい投稿となってしまい申し訳ありませんでした。

背景となる意図など承知いたしました。  
その流れであれば、記載されておられた形にする方が確かに整えやすいと思います。

また、スレッドに記載されていたコードがpタグで構成されていたのでその前提だと思い込んでいましたが、Shopifyのデフォルトとしてはテーブルコーディングの上でcenterタグも使われていますし、使用されているタグに関してどうこういうのは筋が違いますね。

失礼な書き込みとなりましたこと、改めてお詫び申し上げます。
