ヘルプ
ログイン

バンドルのグループビューに関するメール通知テンプレートの更新

2024年12月6日より、バンドルを含む注文は、多くのメールテンプレートでネストされた項目グループとして表示されるようになりました。

デフォルトのテンプレートを使用している通知テンプレートは、商品バンドルのグループビューを表示するように自動的に更新されています。2024年12月6日より前にメール通知テンプレートをカスタマイズした場合、その通知テンプレートは更新されません。通知テンプレートをバンドルビューに更新するには、以下の方法を利用できます。

  • 「 設定 > 通知 」セクションにあるすべての通知については、以下のいずれかの方法を使用できます。
  • Shopify Messaging を使用したチェックアウト離脱のオートメーションの場合、オートメーション内の既存のテンプレートを編集して元に戻すことができます。

このページの内容

カスタマイズされたメールテンプレートを更新する際の考慮事項

メール通知テンプレートに変更を加える前に、以下の考慮事項を確認してください。

  • 管理画面の [設定] > [通知] セクションにある通知テンプレートには、Shopify のテンプレート言語である Liquid、HTML、CSS が含まれています。通知テンプレートのコードは、HTML と CSS の知識があり、Liquid の基本を理解している場合にのみ編集してください。
  • 通知テンプレートへの変更を保存すると、以前のテンプレートコードが上書きされます。テンプレートをデフォルトに戻すことはできますが、テンプレートを元に戻すと、テンプレートコードに対する以前のカスタマイズは失われ、元に戻すことはできません。
  • テンプレートを更新したいものの、通知テンプレートコードの編集経験がない場合は、以下の方法でサポートを受けられる可能性があります。
    • Shopify サポートは通知テンプレートの大幅な編集は行えませんが、Shopify デザインポリシーの範囲内で、無料の Shopify テーマの微調整を行える場合があります。
    • より複雑な変更については、Shopify パートナーを雇ってください。

グループビュー変更の前後

メール通知テンプレートを更新する前は、商品バンドルは個別の項目として表示されます。

グループビュー変更前

メール通知テンプレートを更新すると、商品バンドルはネストされた項目グループで表示されます。

グループビュー変更後

商品バンドルに関して更新されたメール通知のリスト

以下の通知テンプレートには、商品バンドルのグループビューまたはフラットビューが表示されます。

お客様への通知

商品バンドルのグループビューについて更新されたメール通知の説明
通知テンプレート管理画面のセクション表示タイプ
注文の確認注文処理バンドルはネストされたグループとして表示されます。
注文請求書注文の例外バンドルはネストされたグループとして表示されます。
保留中の決済のエラー決済バンドルはネストされたグループとして表示されます。
保留中の決済の成功決済バンドルはネストされたグループとして表示されます。
POSからお客様へのメールPOSバンドルはネストされたグループとして表示されます。
POSとモバイルの領収書POSバンドルはネストされたグループとして表示されます。
返品の作成返品バンドル内の各商品は、個別のアイテムとして表示されます。
返品リクエストの受信返品バンドル内の各商品は、個別のアイテムとして表示されます。
返品リクエストの承認返品バンドル内の各商品は、個別のアイテムとして表示されます。
返品リクエストの却下返品バンドル内の各商品は、個別のアイテムとして表示されます。

スタッフへの通知

商品バンドルのグループビューについて更新されたメール通知の説明
通知テンプレート表示タイプ
新規注文バンドルはネストされたグループとして表示されます。
新規返品リクエストバンドル内の各商品は、個別のアイテムとして表示されます。
販売担当者の編集バンドル内の各商品は、個別のアイテムとして表示されます。
新規の下書き注文バンドルはネストされたグループとして表示されます。
チェックアウト離脱 (Shopify Messaging 内)バンドルはネストされたグループとして表示されます。

カスタマイズされた通知テンプレートを元に戻す

管理画面の [設定] > [通知] セクションにある、カスタマイズ済みの通知テンプレートを更新するには、メールテンプレートへのカスタマイズを手動でバックアップしたうえでテンプレートをデフォルトに戻し、その後でカスタマイズを再適用します。

手順：

デスクトップ

  1. 管理画面で、[設定] > [通知] に移動します。

  2. [お客様への通知] または [スタッフへの通知] をクリックします。

  3. 更新する通知をクリックします。

  4. [コードを編集する] をクリックします。

  5. 既存のカスタマイズをバックアップするには、テンプレート内で保持したいカスタマイズをハイライト表示し、コードをコピーして、テキストファイルなどの安全な場所に保存します。

  6. [デフォルトに戻す] をクリックします。元に戻すとカスタマイズは復元できなくなるため、変更を安全にバックアップしたことを確認してください。

  7. ダイアログで、[変更を元に戻す] をクリックして確定します。

  8. 更新されたテンプレートにカスタマイズを再適用します。

  9. [保存] をクリックします。

モバイル

  1. Shopifyアプリから、Menuをタップし、Settings 設定をタップします。

  2. ストア設定セクションで、通知をタップします。

  3. [お客様への通知] または [スタッフへの通知] をタップします。

  4. 更新する通知をタップします。

  5. テンプレートコードを編集するには、コードを編集する ボタンをタップします。

  6. 既存のカスタマイズをバックアップするには、テンプレート内で保持したいカスタマイズをハイライト表示し、コードをコピーして、テキストファイルなどの安全な場所に保存します。

  7. [デフォルトに戻す] をタップします。元に戻すとカスタマイズは復元できなくなるため、変更を安全にバックアップしたことを確認してください。

  8. ダイアログで、[変更を元に戻す] をタップして確定します。

  9. 更新されたテンプレートにカスタマイズを再適用します。

  10. [保存] または [✓] をタップします。

カスタマイズされたメールテンプレートのコードを編集する

メールテンプレートのコードをカスタマイズした場合、商品バンドルのグループ化表示に対応するように、コードを手動で更新できます。デフォルトのテンプレートコードはテンプレートによって異なります。管理画面の [設定] > [通知] セクションでカスタマイズされた通知テンプレートを更新するには、編集が必要な各テンプレートの手順に従ってください。

注文メール通知を更新する

以下の手順に従って、次の注文メール通知用にカスタマイズしたテンプレートを更新します。

  • 注文の確認
  • 新規注文メール
  • 注文請求書
  • 保留中の決済の成功
  • 保留中の決済のエラー
  • POSとモバイルの領収書

手順：

  1. 管理画面で、[設定] > [通知] に移動します。

  2. [お客様への通知] または [スタッフへの通知] をクリックします。

  3. 更新する通知をクリックします。

  4. [コードを編集する] をクリックします。

  5. 既存のカスタマイズをバックアップするには、テンプレート内で保持したいカスタマイズをハイライト表示し、コードをコピーして、テキストファイルなどの安全な場所に保存します。テンプレート全体をハイライト表示してコピーし、安全な場所に保存することもできます。

  6. subtotal_line_items を検索して、テンプレート内の項目ループを見つけます。次のように表示されます。

{% for line in subtotal_line_items %}
  1. 開始の subtotal_line_items ループのすぐ下に {% if line.groups.size == 0 %} を追加し、終了の {% endfor %} ループのすぐ上に {% endif %} を追加して、subtotal_line_items ループ内のすべてのコードを if 条件で囲みます。
{% if line.groups.size == 0 %}
        <Your old code>
    {% endif %}
  1. コードは、次のようになります。
{% for line in subtotal_line_items %}
        {% if line.groups.size == 0 %}
            <Your old code>
        {% endif %}
    {% endfor %}
  1. subtotal_line_items 項目ループの終了タグ {% endfor %} の下に次のコードを貼り付けます。
{% for line_item_group in line_item_groups %}

        {% assign final_line_price = 0 %}
        {% assign original_line_price = 0 %}
        {% assign discount_keys_str = "" %}

    {% for component in line_item_group.components %}
        {% assign final_line_price = final_line_price | plus: component.final_line_price %}
        {% assign original_line_price = original_line_price | plus: component.original_line_price %}

        {% for da in component.discount_allocations %}
            {% if da.discount_application.target_selection != 'all' %}
                {% assign discount_key = da.discount_application.title | append: da.discount_application.type %}
                {% assign discount_keys_str = discount_keys_str | append: discount_key | append: "," %}
            {% endif %}
        {% endfor %}
    {% endfor %}

    {% assign discount_keys = discount_keys_str | split: "," | uniq %}

        <tr class="order-list__item">
            <td class="order-list__item__cell">
                <table>
                    <td class="order-list__parent-image-cell">
                        {% if line_item_group.image %}
                            <img src="{{ line_item_group | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
                        {% else %}
                            <div class="order-list__no-image-cell">
                                <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="60" height="60" class="order-list__no-product-image"/>
                            </div>
                        {% endif %}
                    </td>
                    <td class="order-list__product-description-cell">
                        <span class="order-list__item-title">{{ line_item_group.title }}&nbsp;&times;&nbsp;{{ line_item_group.quantity }}</span><br/>

                        {% for discount_key in discount_keys %}
                            {% assign discount_amount = 0 %}

                            {% for component in line_item_group.components %}
                                {% for da in component.discount_allocations %}
                                    {% assign key = da.discount_application.title | append: da.discount_application.type %}
                                    {% if da.discount_application.target_selection != 'all' and key == discount_key %}
                                        {% assign discount_amount = discount_amount | plus: da.amount %}
                                        {% assign discount_title = da.discount_application.title %}
                                    {% endif %}
                                {% endfor %}
                            {% endfor %}

                            <p>
                                <span class="order-list__item-discount-allocation">
                                    <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
                                    <span>
                                        {{ discount_title | upcase }}
                                        (-{{ discount_amount | money }})
                                    </span>
                                </span>
                            </p>
                        {% endfor %}

                        {% for component in line_item_group.components %}
                            <table>
                                <tr class="order-list__item">
                                    <td class="order-list__bundle-item">
                                        <table>
                                            <td class="order-list__image-cell">
                                                {% if component.image %}
                                                    <img src="{{ component | img_url: 'compact_cropped' }}" align="left" width="40" height="40" class="order-list__product-image"/>
                                                {% else %}
                                                    <div class="order-list__no-image-cell small">
                                                        <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="40" height="40" class="order-list__no-product-image small"/>
                                                    </div>
                                                {% endif %}
                                            </td>

                                            <td class="order-list__product-description-cell">
                                                {% if component.product.title %}
                                                    {% assign component_title = component.product.title %}
                                                {% else %}
                                                    {% assign component_title = component.title %}
                                                {% endif %}

                                                <span class="order-list__item-title">{{ component.quantity }}&nbsp;&times;&nbsp;{{ component_title }}</span><br>

                                                {% if component.variant.title != 'Default Title'%}
                                                    <span class="order-list__item-variant">{{ component.variant.title }}</span>
                                                {% endif %}
                                            </td>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        {% endfor %}
                    </td>

                    <td class="order-list__parent-price-cell">
                        {% if original_line_price != final_line_price %}
                            <del class="order-list__item-original-price">{{ original_line_price | money }}</del>
                        {% endif %}
                        <p class="order-list__item-price">
                            {% if final_line_price > 0 %}
                                {{ final_line_price | money }}
                            {% else %}
                                Free
                            {% endif %}
                        </p>
                    </td>
                </table>
            </td>
        </tr>
    {% endfor %}
    </table>

    <table class="row subtotal-lines">
        <tr>
            <td class="subtotal-spacer"></td>
            <td>
                <table class="row subtotal-table">
                    {% assign total_order_discount_amount = 0 %}
                    {% assign has_shipping_discount = false %}
                    {% assign epsilon = 0.00001 %}

                    {% for discount_application in discount_applications %}
                        {% if discount_application.target_selection == 'all' and discount_application.target_type == 'line_item' %}
                            {% assign order_discount_count = order_discount_count | plus: 1 %}
                            {% assign total_order_discount_amount = total_order_discount_amount | plus: discount_application.total_allocated_amount %}
                        {% endif %}
                        {% if discount_application.target_type == 'shipping_line' %}
                            {% assign has_shipping_discount = true %}
                            {% assign shipping_discount_title = discount_application.title %}
                            {% if discount_application.total_allocated_amount == 0 %}
                                {% assign discount_value_price = discount_application.value | times: 100 %}
                            {% else %}
                                {% assign discount_value_price = discount_application.total_allocated_amount %}
                            {% endif %}
                            {% assign shipping_amount_minus_discount_value_price = shipping_price | minus: discount_value_price %}
                            {% assign shipping_amount_minus_discount_value_price_abs = shipping_amount_minus_discount_value_price | abs %}
                            {% assign discount_application_value_type = discount_application.value_type | strip %}
                            {% if shipping_amount_minus_discount_value_price_abs < epsilon or discount_application_value_type == 'percentage' and discount_application.value == 100 %}
                                {% assign free_shipping = true %}
                            {% else %}
                                {% assign discounted_shipping_price = shipping_amount_minus_discount_value_price %}
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                </table>
            </td>
        </tr>
    </table>
  1. [保存] をクリックします。

下書き注文と決済未完了の通知メールを更新する

以下の手順に従って、次のメール通知用にカスタマイズしたテンプレートを更新します。

  • 新規の下書き注文
  • カゴ落ち
  • 下書き注文の請求書
  • POSからお客様へのメール

手順：

デスクトップ

  1. 管理画面で、[設定] > [通知] に移動します。

  2. [お客様への通知] または [スタッフへの通知] をクリックします。

  3. 更新する通知をクリックします。

  4. [コードを編集する] をクリックします。

  5. 既存のカスタマイズをバックアップするには、テンプレート内で保持したいカスタマイズをハイライト表示し、コードをコピーして、テキストファイルなどの安全な場所に保存します。

  6. subtotal_line_items を検索して、テンプレート内の項目ループを見つけます。次のように表示されます。

{% for line in subtotal_line_items %}
  1. 開始ループ {% for line in subtotal_line_items %} の直後に次のコードを貼り付けます。
{% assign expand_bundles = true %}
  1. 商品画像をレンダリングするブロックを見つけます。次のように表示されます。
<td class="order-list__image-cell">
            {% if line.image %}
                <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
            {% else %}
                <div class="order-list__no-image-cell">
                <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="60" height="60" class="order-list__no-product-image"/>
                </div>
            {% endif %}
        </td>
  1. order-list__image-cell クラスを {% if expand_bundles and line.bundle_parent? %} の if 条件で囲み、代替クラスを追加して変更します。この変更により、{% assign expand_bundles = true %} 変数が true の場合に、画像クラスが order-list__parent-image-cell から order-list__image-cell に変わります。テンプレートコードは、次のようになります。
<td
            {% if expand_bundles and line.bundle_parent? %}
                class="order-list__parent-image-cell"
            {% else %}
                class="order-list__image-cell"
            {% endif %}
            >
            {% if line.image %}
                <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
            {% else %}
                <div class="order-list__no-image-cell">
                <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="60" height="60" class="order-list__no-product-image"/>
                </div>
            {% endif %}
        </td>
  1. バリエーションの名前をレンダリングするコードを見つけます。次のように表示されます。
{% if line.variant.title != 'Default Title' %}
        <span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
    {% endif %}
  1. 商品バンドルのバリエーションの名前を非表示にするには、{% if line.variant.title != 'Default Title' %} の if 条件に and line.bundle_parent? == false を追加してから、elsif 条件を追加します。次のように表示されます。
{% if line.variant.title != 'Default Title' and line.bundle_parent? == false %}
        <span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
    {% elsif line.variant.title != 'Default Title' and line.bundle_parent? and expand_bundles == false %}
        <span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
    {% endif %}
  1. 任意：価格をレンダリングするコードを見つけます。コードには order-list__price-cell クラスが含まれています。カゴ落ちのメール通知にはこのクラスはありませんが、下書き注文の通知テンプレートにはあります。次のように表示されます。
<td class="order-list__price-cell">
  1. メインのバンドルの価格を更新するために、価格に if ステートメントと追加クラスを追加します。次のように表示されます。
<td
    {% if expand_bundles and line.bundle_parent? %}
        class="order-list__parent-price-cell"
    {% else %}
        class="order-list__price-cell"
    {% endif %}
    >
  1. {% for group in line.groups %} for ループ内で、flat view または Part of: コードを検索します。古いメールテンプレートには、このコードが含まれていない場合があります。
{% for group in line.groups %}
        <span class="order-list__item-variant">Part of: {{ group.display_title }}</span><br/>
    {% endfor %}
  1. {% for group in line.groups %} ループ全体を次のコードに置き換えます。
{% if expand_bundles %}
            {% for component in line.bundle_components %}
                <table>
                <tr class="order-list__item">
                    <td class="order-list__bundle-item">
                    <table>
                        <td class="order-list__image-cell">
                        {% if component.image %}
                            <img src="{{ component | img_url: 'compact_cropped' }}" align="left" width="40" height="40" class="order-list__product-image small"/>
                        {% elsif component.image_url %}
                            <img src="{{ component.image_url }}" align="left" width="40" height="40" class="order-list__product-image small"/>
                        {% else %}
                            <div class="order-list__no-image-cell small">
                            <img src="{{ 'notifications/no-image.png' | shopify_asset_url }}" align="left" width="40" height="40" class="order-list__no-product-image small"/>
                            </div>
                        {% endif %}
                        </td>


&#x3C;td class=&#x22;order-list__product-description-cell&#x22;&#x3E;
                    {% if component.product.title %}
                        {% assign component_title = component.product.title %}
                    {% else %}
                        {% assign component_title = component.title %}
                    {% endif %}

                    {% assign component_display = component.quantity %}

                    &#x3C;span class=&#x22;order-list__item-title&#x22;&#x3E;{{ component_title }}&#x26;nbsp;&#x26;times;&#x26;nbsp;{{ component_display }}&#x3C;/span&#x3E;&#x3C;br&#x3E;

                    {% if component.variant.title != &#x27;Default Title&#x27;%}
                        &#x3C;span class=&#x22;order-list__item-variant&#x22;&#x3E;{{ component.variant.title }}&#x3C;/span&#x3E;
                    {% endif %}
                    &#x3C;/td&#x3E;
                &#x3C;/table&#x3E;
                &#x3C;/td&#x3E;
            &#x3C;/tr&#x3E;
            &#x3C;/table&#x3E;
        {% endfor %}
        {% else %}
        {% for group in line.groups %}
            &#x3C;span class=&#x22;order-list__item-variant&#x22;&#x3E;Part of: {{ group.display_title }}&#x3C;/span&#x3E;&#x3C;br/&#x3E;
        {% endfor %}
    {% endif %}</code></pre></figure><ol start="16">
  • Click Save.
    •

    ワークフローを編集して、カゴ落ちまたはチェックアウト離脱メールを更新する

    チェックアウト離脱のオートメーションを設定している場合は、既存の [チェックアウトをリカバリーする] メールテンプレートを編集することで、チェックアウト離脱メールを更新して、商品バンドルのグループ化表示を表示できます。

    手順：

    デスクトップ

    1. Shopify の管理画面から、「アプリ」 > 「Messaging」 に移動します。

    2. オートメーションをクリックします。

    3. 編集するマーケティングフローをクリックします。

    4. [編集] をクリックします。

    5. [オートメーションをオフにする] をクリックします。

    6. ダイアログで [オフにする] をクリックします。

    7. [編集] をクリックします。

    8. フローオートメーションで、[マーケティングメールを送信] をクリックします。

    9. [メールを編集] をクリックします。

    10. [このメールを編集すると下書きに戻ります] ダイアログで、[続行する] をクリックします。

    11. メールテンプレートに以下のいずれかの編集を行います。

    • [件名] 行に件名を追加する
    • テンプレートにテキストまたはセクションを追加する
    1. 任意：メールを確認するには、[テストを送信する] をクリックし、メールの受信を希望するメールアドレスを入力します。インボックスでメールを開き、内容を確認します。
    2. [有効に設定] をクリックします。
    3. [オートメーションをオンにする] をクリックします。
    モバイル

    1. Shopify アプリから、メニュー アイコンをタップします。

    2. 「アプリ」セクションで、「Messaging」をタップします。

    3. 「Messaging」 > 「オートメーション」をタップします。

    4. 編集したいマーケティングフローで、水平メニュー > [オフにする] をタップします。

    5. ダイアログで、[無効にする] をタップします。

    6. マーケティングフローをタップします。

    7. マーケティングメールの横にある 水平メニュー > [編集] をタップします。

    8. [このメールを編集すると下書きに戻ります] ダイアログで、[続行] をタップします。

    9. [件名] 行に件名を追加してから、テンプレートにテキストやセクションを追加します。

    10. 任意：メールをレビューするには、[テストを送信] をタップして、メールの受信を希望するメールアドレスを入力します。インボックスでメールを開いてレビューします。

    11. [有効に設定] をタップします。

    12. 水平メニュー または 垂直メニュー > [オートメーションをオンにする] をタップします。

    マーケティングオートメーションのサマリーページからカゴ落ちまたはチェックアウト離脱メールを更新する

    チェックアウト離脱オートメーションを設定している場合、[カゴ落ち] または [チェックアウト離脱] セクションを編集することで、チェックアウト離脱メールを更新して商品バンドルをグループ表示できます。

    手順：

    デスクトップ

    1. Shopify の管理画面から、「アプリ」 > 「Messaging」 に移動します。

    2. オートメーションをクリックします。

    3. 編集するマーケティングフローをクリックします。

    4. [アクティビティ名] セクションで、編集するテンプレートのサムネイルをクリックします。

    5. [編集] をクリックします。

    6. [このメールを編集すると下書きに戻ります] ダイアログで、[続行する] をクリックします。

    7. テンプレートの [チェックアウト離脱] または [カゴ落ち] セクションの横にあるゴミ箱アイコンをクリックします。

    8. [+ セクションを追加] をクリックします。

    9. [カゴ落ち] または [チェックアウト離脱] セクションをクリックします。

    10. 任意：メールをレビューするには、[テストを送信] をタップして、メールの受信を希望するメールアドレスを入力します。インボックスでメールを開いてレビューします。

    11. [有効に設定] をクリックします。

    モバイル

    1. Shopify アプリから、メニュー アイコンをタップします。

    2. 「アプリ」セクションで、「Messaging」をタップします。

    3. 「Messaging」 > 「オートメーション」をタップします。

    4. 編集したいマーケティングフローで、水平メニュー > [オフにする] をタップします。

    5. マーケティングフローをタップします。

    6. 編集するテンプレートのサムネイルをタップします。

    7. [編集] をタップします。

    8. [このメールを編集すると下書きに戻ります] ダイアログで、[続行] をタップします。

    9. 上にスワイプしてテンプレートを編集します。

    10. [チェックアウト離脱] または [カゴ落ち] セクションを長押ししてから、ゴミ箱アイコンをタップします。

    11. [+] ボタンをタップしてから、[カゴ落ち] または [チェックアウト離脱] セクションをタップします。

    12. 任意：メールをレビューするには、[テストを送信] をタップして、メールの受信を希望するメールアドレスを入力します。インボックスでメールを開いてレビューします。

    13. [有効に設定] をタップします。