商品搭售群組檢視的電子郵件通知範本更新

自 2024 年 12 月 6 日起，包含商品搭售的訂單，現在會在多數電子郵件範本中 display as a nested group of line items。

使用預設範本的通知範本，已自動更新為商品搭售的群組檢視。若您在 2024 年 12 月 6 日之前自訂過任何電子郵件通知範本，這些通知範本並未更新。若要將通知範本更新為商品搭售的群組檢視，您可以使用下列方法：

針對位於設定 > 通知區段中的所有通知，您可以使用下列任一方法：
- 先備份您的自訂內容，revert the templates，再重新套用您的自訂內容。
- 透過編輯程式碼，將 bundles component Liquid 物件加入您的範本，以更新現有的自訂內容。
若您使用 Shopify Messaging 的未完成結帳作業自動化，您可以在自動化中編輯現有的範本，將其還原。

本頁內容

更新自訂電子郵件範本的注意事項

在變更電子郵件通知範本之前，請先參閱以下注意事項：

您在 Shopify 管理介面設定 > Notifications 區段中的通知範本，包含 Liquid (Shopify 的範本語言)、HTML 與 CSS。僅在您熟悉 HTML 與 CSS，且對 Liquid 具有基本認識時，才編輯通知範本的程式碼。
儲存通知範本的變更會覆寫先前的範本程式碼。您可以將範本還原為預設，但一旦還原，先前對範本程式碼的自訂將會遺失且無法復原。
如果您想更新範本，但沒有編輯通知範本程式碼的經驗，您可以考慮取得以下協助：
- Shopify 支援服務無法為您大幅編輯通知範本，但如果是在 Shopify 設計政策 的範圍內，或許能協助微調免費的 Shopify 佈景主題。
- 若需更複雜的變更，請聘僱 Shopify 合作夥伴。

群組檢視變更前後

在您更新電子郵件通知範本之前，商品搭售會分別顯示為獨立品項：

更新電子郵件通知範本後，商品搭售會以巢狀群組顯示多個品項：

商品搭售相關的更新電子郵件通知清單

以下通知範本會以群組檢視或未群組的檢視顯示商品搭售。

顧客通知

商品搭售群組檢視的更新電子郵件通知說明
通知範本	管理介面位置	顯示類型
訂單確認	訂單處理	商品搭售會以巢狀群組顯示。
訂單發票	訂單異常	商品搭售會以巢狀群組顯示。
待處理付款錯誤	付款	商品搭售會以巢狀群組顯示。
待處理付款成功	付款	商品搭售會以巢狀群組顯示。
寄給顧客的 POS 電子郵件	POS	商品搭售會以巢狀群組顯示。
POS 與行動裝置收據	POS	商品搭售會以巢狀群組顯示。
已建立退貨	退貨流程	商品搭售中的每個商品會各自顯示為獨立品項。
已收到退貨申請	退貨流程	商品搭售中的每個商品會各自顯示為獨立品項。
已核准退貨申請	退貨流程	商品搭售中的每個商品會各自顯示為獨立品項。
已拒絕退貨申請	退貨流程	商品搭售中的每個商品會各自顯示為獨立品項。

員工通知

商品搭售群組檢視的更新電子郵件通知說明
通知範本	顯示類型
新訂單	商品搭售會以巢狀群組顯示。
新的退貨申請	商品搭售中的每個商品會各自顯示為獨立品項。
已編輯銷售歸因	商品搭售中的每個商品會各自顯示為獨立品項。
新的訂單草稿	商品搭售會以巢狀群組顯示。
未完成結帳作業 (於 Shopify Messaging 中)	商品搭售會以巢狀群組顯示。

還原自訂的通知範本

若要更新 Shopify 管理介面設定 > Notifications 區段中的自訂通知範本，您可以先手動備份電子郵件範本中的所有自訂內容，將範本還原為預設，然後再重新套用您的自訂內容。

步驟：

電腦版

在 Shopify 管理介面，前往設定 > 通知。
按一下 顧客通知或員工通知。
按一下您要更新的通知。
按一下 編輯程式碼。
請先備份您現有的自訂內容：在範本中將要保留的部分反白、複製程式碼，並安全儲存，例如存成文字檔。
按一下「還原為預設」。還原後無法復原您的自訂內容，請務必先安全備份變更。
在對話方塊中，按一下「還原變更」以確認。
將您的自訂內容重新套用到更新後的範本。
按一下「儲存」。

行動裝置

在 Shopify app 中，點選，然後點選設定。
在 商店設定 區段中，點選通知。
點選「顧客通知」或「員工通知」。
點選要更新的通知。
點選按鈕以編輯範本程式碼。
請先備份您現有的自訂內容：在範本中將要保留的部分反白、複製程式碼，並安全儲存，例如存成文字檔。
點選「還原為預設」。還原後無法復原您的自訂內容，請務必先安全備份變更。
在對話方塊中，點選「還原變更」以確認。
將您的自訂內容重新套用到更新後的範本。
點選「儲存」或「✓」。

編輯您自訂的電子郵件範本程式碼

如果您已自訂電子郵件範本的程式碼，您可以手動更新程式碼，以支援商品搭售的群組檢視。不同範本的預設程式碼各不相同。若要在 Shopify 管理介面的「設定」> Notifications 區段中更新自訂的通知範本，請依各個需要編輯的範本說明操作。

更新訂單電子郵件通知

請依下列步驟更新下列訂單電子郵件通知的自訂範本：

訂單確認
新訂單電子郵件
訂單發票
待處理付款成功
待處理付款錯誤
POS 與行動裝置收據

步驟：

在 Shopify 管理介面，前往設定 > 通知。
按一下 顧客通知或員工通知。
按一下您要更新的通知。
按一下 編輯程式碼。
請先備份您現有的自訂內容：在範本中將要保留的部分反白、複製程式碼，並安全儲存，例如存成文字檔。您也可以將整個範本反白、複製，並將其安全儲存。
Find 範本中的商品項目迴圈，方法是搜尋 subtotal_line_items。其外觀應類似下列範例：

{% for line in subtotal_line_items %}

在 subtotal_line_items 迴圈的開頭正下方新增 {% if line.groups.size == 0 %}，使用 if 條件將 subtotal_line_items 迴圈內的所有程式碼包裝起來，接著在結尾的 {% endfor %} 迴圈正上方新增 {% endif %}，以關閉 if 條件。

{% if line.groups.size == 0 %}
        <Your old code>
    {% endif %}

程式碼應類似下列範例：

{% for line in subtotal_line_items %}
        {% if line.groups.size == 0 %}
            <Your old code>
        {% endif %}
    {% endfor %}

將下列程式碼貼在 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>

按一下「儲存」。

更新訂單草稿與未完成結帳作業電子郵件通知

請依下列步驟更新下列電子郵件通知的自訂範本：

新的訂單草稿
放棄的購物車
訂單草稿發票
寄給顧客的 POS 電子郵件

步驟：

電腦版

在 Shopify 管理介面，前往設定 > 通知。
按一下 顧客通知或員工通知。
按一下您要更新的通知。
按一下 編輯程式碼。
請先備份您現有的自訂內容：在範本中將要保留的部分反白、複製程式碼，並安全儲存，例如存成文字檔。
Find 範本中的商品項目迴圈，方法是搜尋 subtotal_line_items。其外觀應類似下列範例：

{% for line in subtotal_line_items %}

將下列程式碼貼在開頭的 {% for line in subtotal_line_items %} 迴圈之後：

{% assign expand_bundles = true %}

找出呈現產品圖片的區塊。其外觀應類似下列範例：

<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>

將 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>

Find 呈現子類名稱的程式碼。其外觀應類似下列範例：

{% if line.variant.title != 'Default Title' %}
        <span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
    {% endif %}

若要隱藏商品搭售的子類名稱，請在 {% 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 %}

選用：Find 呈現價格的程式碼。該區塊應有 order-list__price-cell 類別。「放棄的購物車」電子郵件通知沒有這段，但「訂單草稿」通知範本有。其外觀應類似下列範例：

<td class="order-list__price-cell">

為價格加入 if 判斷式與額外類別，以更新主套裝組合的價格。其外觀應類似下列範例：

<td
    {% if expand_bundles and line.bundle_parent? %}
        class="order-list__parent-price-cell"
    {% else %}
        class="order-list__price-cell"
    {% endif %}
    >

在 {% for group in line.groups %} 迴圈中搜尋 flat view 或 Part of: 的程式碼。舊版電子郵件範本可能沒有這段程式碼。

{% for group in line.groups %}
        <span class="order-list__item-variant">Part of: {{ group.display_title }}</span><br/>
    {% endfor %}

將整個 {% 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.

透過編輯自動化流程更新「放棄的購物車」或「未完成結帳作業」電子郵件

如果您已設定 abandoned checkout automations，即可透過編輯現有的「挽回未完成結帳作業」電子郵件範本，將未完成結帳作業電子郵件更新為顯示商品搭售的群組檢視。

步驟：

電腦版

在 Shopify 管理介面中，前往「應用程式」>「Messaging」。
點擊 自動化。
按一下要編輯的行銷流程。
按一下「編輯」。
按一下「關閉自動化」。
在對話方塊中，按一下「關閉」。
按一下「編輯」。
在自動化流程中，按一下「寄送行銷電子郵件」。
按一下「編輯電子郵件」。
在「編輯此電子郵件會將其還原為草稿」對話方塊中，按一下「繼續」。
在電子郵件範本中進行下列任一修改：

在「主旨」欄位新增主旨
在範本中新增其他文字或區塊

選用：若要預覽電子郵件，按一下「傳送測試」，並輸入欲接收郵件的電子郵件地址。然後在您的收件匣開啟該郵件並加以檢視。
按一下「設為啟用」。
按一下「開啟自動化」。

行動裝置

在 Shopify app 中，點選圖示。
在「應用程式」區段中，點選「Messaging」。
點選「Messaging」>「自動化」。
針對您想編輯的行銷工作流程，點選 >「關閉」。
在對話方塊中，點選關閉。
點選該行銷自動化流程。
在行銷電子郵件旁，點選 >「編輯」。
在編輯此電子郵件會將其還原為草稿對話方塊中，點選繼續。
在主旨欄位新增主旨，然後在您的範本中新增其他需要的文字或區段。
選用：若要檢視您的電子郵件，點選傳送測試，並輸入您要接收郵件的電子郵件地址。在您的收件匣中開啟郵件並檢視內容。
點選設為啟用。
點選或 >「開啟自動化」。

從行銷自動化摘要頁面更新「放棄的購物車」或「未完成結帳作業」電子郵件

如果您已設定 abandoned checkout automations，即可透過編輯放棄的購物車或未完成結帳作業區段，將未完成結帳作業電子郵件更新為以分組檢視方式顯示套裝組合。

步驟：

電腦版

在 Shopify 管理介面中，前往「應用程式」>「Messaging」。
點擊 自動化。
按一下要編輯的行銷流程。
在活動名稱區段中，按一下您要編輯的範本縮圖。
按一下「編輯」。
在「編輯此電子郵件會將其還原為草稿」對話方塊中，按一下「繼續」。
按一下範本中未完成結帳作業或放棄的購物車區段旁的垃圾桶圖示。
按一下+ 新增區段。
按一下放棄的購物車或未完成結帳作業區段。
選用：若要檢視您的電子郵件，點選傳送測試，並輸入您要接收郵件的電子郵件地址。在您的收件匣中開啟郵件並檢視內容。
按一下「設為啟用」。

行動裝置

在 Shopify app 中，點選圖示。
在「應用程式」區段中，點選「Messaging」。
點選「Messaging」>「自動化」。
針對您想編輯的行銷工作流程，點選 >「關閉」。
點選該行銷自動化流程。
點選您要編輯的範本縮圖。
點選編輯。
在編輯此電子郵件會將其還原為草稿對話方塊中，點選繼續。
向上滑動以編輯範本。
長按未完成結帳作業或放棄的購物車區段，然後點選垃圾桶圖示。
點選+按鈕，然後點選放棄的購物車或未完成結帳作業區段。
選用：若要檢視您的電子郵件，點選傳送測試，並輸入您要接收郵件的電子郵件地址。在您的收件匣中開啟郵件並檢視內容。
點選設為啟用。