【Shopify】コピペで使える注文完了メールに購入された商品に応じた商品画像リンクを設置する方法

はじめに

注文完了(サンクス)メールの重要性

こんにちは、株式会社Tsuzucle SPRING開発事業部の栁澤です！

皆さんは日頃、Shopifyストアで購入された際に送信される注文完了(サンクス)メールを編集していますでしょうか。

Omnisendの2023年のEメールマーケティング統計によると、注文完了メールの平均開封率は約60% と報告されており、これは通常のマーケティングメールの開封率（約25%）の2倍以上になります^[1]。

この高い開封率を持つメールをよりカスタマイズして活用することで、本来の目的である購入者の不安解消やトラブル防止だけでなく、さらなる顧客体験の向上や売上拡大に繋げることができます。

注文完了(サンクス)メールの編集に必要なスキル

通常のShopifyのマーケティングメールとは異なり、Shopifyの注文完了メールを編集するにはHTMLやLiquidなどのプログラミングの知識が必要になります。

プログラミング経験のない方には中々編集が難しいのが現状です。

ここで今回はコピペで誰でもすぐに使える 「Shopifyで購入された商品に応じた商品画像リンクを注文完了メールに設置する方法」 について解説します。

当機能を実装することで購入商品に合わせたアップセルをメール内で行うことができ、顧客単価の拡大が期待できます。

本記事内ではその他の活用方法やカスタマイズ方法なども解説していますのでぜひ最後までご覧ください！

実装例

注文完了メールに、購入された商品に応じたクロスセル商品を表示しています。

他にも以下のような活用方法もあります。

• 商品の使用方法提案(利用方法ページのリンクを設置)
• レビュー案内（レビューページのリンクを設置）
• コミュニティ・SNSへの誘導（SNSリンクやシェアリンクを設置）

目的に合わせて最適なカスタマイズを行いましょう。

注文完了メールの編集方法

Shopify管理画面＞設定＞通知＞お客様通知＞注文の確認＞コードを編集をクリックするとメール内容を編集することができます。

購入商品に応じた特定の商品画像リンクを設置するコード

メール内に画像リンクを設置するには、メール本文（Liquid）の任意の箇所に以下のコードを挿入します。

{% for line in subtotal_line_items %}
  {% if line.product.title == '画像を表示する条件となる商品名を入力してください' %}
      <a href="商品ページのリンクを挿入してください">
          <img
          src="表示したい画像リンクをコンテンツからコピーしてください"
          alt=""
          width="100（画像の横幅は自由に変更してください）"
          height="100（画像の縦幅は自由に変更してください）"
          >
      </a>
  {% endif %}
{% endfor %}

コードの詳細とカスタマイズ方法

1.画像リンクを表示したいときの商品名を入力

購入商品に応じた特定の商品画像リンクを設置するコードで解説しているコードの「画像を表示する条件となる商品名を入力してください」の部分に表示条件となる商品名を正確に入力してください。

空白を含め誤字脱字があると画像が表示されないため、商品管理ページなどから商品名をコピー＆ペーストすることをおすすめします。

{% if line.product.title == '画像を表示する条件となる商品名を入力してください' %}

2.商品ページのリンクを設置

コードの商品ページのリンクを設置してくださいの部分に商品ページのURLを入力してください。
商品ページ以外のリンク（ブログやコレクションページなど）も設定可能ですので、目的に応じて最適な遷移先を設定してください。

<a href="商品ページのリンクを設置してください">

3.表示させたい画像のリンクを挿入

コードのコンテンツからリンクをコピーしてくださいの部分に表示させたい画像のリンクを挿入します。

画像リンクの取得方法は、Shopify管理画面＞コンテンツ＞ファイルへ進み、使用したい画像の行の中央にあるリンクボタンをクリックすると画像のURLがコピーされます。

Shopifyに登録されていない画像を利用する場合は右上のファイルをアップロードから画像をShopifyにアップロードしてください。

src="表示したい画像リンクをコンテンツからコピーしてください"

4.画像の大きさを設定

コードの画像の横（縦）幅は自由に変更してくださいの数字の部分に表示させたい画像の大きさを入力してください。

width="100（画像の横幅は自由に変更してください）"
height="100（画像の縦幅は自由に変更してください）"

複数条件の設定方法

表示条件となる商品を複数設定することも可能です。elsifを使用することで、購入された商品に応じて異なる画像を表示させることができます。

{% for line in subtotal_line_items %}
  {% if line.product.title == '画像を表示する条件となる商品名を入力してください' %}
      <a href="商品ページのリンクを設置してください">
          <img
          src="表示したい画像リンクをコンテンツからコピーしてください"
          alt=""
          width="100（画像の横幅は自由に変更してください）"
          height="100（画像の縦幅は自由に変更してください）"
          >
      </a>
  {% elsif line.product.title == '別の商品名' %}
      <a href="別の商品のページへのリンク">
          <img
          src="別の商品の画像URL"
          alt=""
          width="100"
          height="100"
          >
      </a>
  {% elsif line.product.title == 'さらに別の商品名' %}
      <a href="さらに別の商品のページへのリンク">
          <img
          src="さらに別の商品の画像URL"
          alt=""
          width="100"
          height="100"
          >
      </a>
  {% endif %}
{% endfor %}

おわりに

定期的に条件となる商品の選定を見直したり、表示する画像やリンクを最適化したりすることで、より効果的なアプローチが可能になります。ぜひ、今回紹介した手順を参考に、自社のストアに適したカスタマイズを行ってみてください。

注文完了メールやその他Liquidなどに関するご質問がありましたらお気軽にご連絡ください。

最後までご覧いただきありがとうございました🙌

脚注

1. Email, SMS, and push marketing statistics for ecommerce in 2024