Atualizações do modelo de notificação por e-mail para a visualização agrupada de pacotes

A partir de 6 de dezembro de 2024, os pedidos que contêm pacotes agora são exibidos como um grupo aninhado de itens de linha em muitos modelos de e-mail.

Qualquer modelo de notificação que usa o modelo padrão foi atualizado automaticamente para exibir a visualização agrupada para pacotes de produtos. Se você personalizou algum dos seus modelos de notificação por e-mail antes de 6 de dezembro de 2024, eles não foram atualizados. Para atualizar seus modelos de notificação para a visualização de pacotes, use um dos seguintes métodos:

  • Para todas as notificações na seção Configurações > Notificações , use um dos seguintes métodos:
    • Faça backup das personalizações, reverta os modelos e reaplique as personalizações.
    • Atualize as personalizações atuais editando o código para adicionar o objeto do Liquid componente de pacotes aos modelos.
  • Para as automações de checkout abandonado com o Shopify Messaging, edite os modelos existentes para revertê-los.

Considerações sobre a atualização de modelos de e-mail personalizados

Analise as considerações a seguir antes de fazer alterações nos modelos de notificação por e-mail:

  • Os modelos de notificação na seção Configurações > Notificações do admin da Shopify contêm Liquid, a linguagem do modelo da Shopify, além de HTML e CSS. Edite o código de um modelo de notificação somente se você souber HTML e CSS e tiver noções básicas de Liquid.
  • Salvar as alterações nos modelos de notificação substitui o código anterior. É possível reverter o modelo para o padrão, mas, se você fizer isso, as personalizações anteriores feitas no código serão perdidas e não poderão ser recuperadas.
  • Se você quiser atualizar os modelos, mas não tiver experiência em editar o código do modelo de notificação, talvez seja possível obter ajuda:
    • O Atendimento ao cliente da Shopify não faz edições extensas em modelos de notificação, mas talvez possa ajudar com pequenos ajustes em temas gratuitos da Shopify no escopo da Política de design da Shopify.
    • Para alterações mais complexas, contrate um parceiro da Shopify.

Antes e depois das alterações na visualização agrupada

Antes de atualizar os modelos de notificação por e-mail, os pacotes de produtos são exibidos como itens de linha individuais:

Antes das alterações na visualização agrupada

Depois de atualizar os modelos de notificação por e-mail, os pacotes de produtos são exibidos em um grupo aninhado de itens de linha:

Depois das alterações na visualização agrupada

Lista de notificações por e-mail atualizadas para pacotes de produtos

Os modelos de notificação a seguir exibem uma visualização agrupada ou uma visualização simples para pacotes de produtos.

Notificações do cliente

Descrição das notificações por e-mail atualizadas para a visualização agrupada de pacotes de produtos
Modelo de notificaçãoLocal no adminTipo de exibição
Confirmação de pedidoProcessamento de pedidosOs pacotes são exibidos como um grupo aninhado.
Fatura do pedidoExceções de pedidoOs pacotes são exibidos como um grupo aninhado.
Erro de pagamento pendentePagamentosOs pacotes são exibidos como um grupo aninhado.
Pagamento pendente bem-sucedidoPagamentosOs pacotes são exibidos como um grupo aninhado.
E-mail do POS para o clientePonto de vendaOs pacotes são exibidos como um grupo aninhado.
Comprovante do POS e celularPonto de vendaOs pacotes são exibidos como um grupo aninhado.
Devolução criadaDevoluçõesCada produto de um pacote é exibido como um item separado.
Solicitação de devolução recebidaDevoluçõesCada produto de um pacote é exibido como um item separado.
Solicitação de devolução aprovadaDevoluçõesCada produto de um pacote é exibido como um item separado.
Solicitação de devolução recusadaDevoluçõesCada produto de um pacote é exibido como um item separado.

Notificações da equipe

Descrição das notificações por e-mail atualizadas para a visualização agrupada de pacotes de produtos
Modelo de notificaçãoTipo de exibição
Novo pedidoOs pacotes são exibidos como um grupo aninhado.
Nova solicitação de devoluçãoCada produto de um pacote é exibido como um item separado.
Atribuição de vendas editadaCada produto de um pacote é exibido como um item separado.
Novo rascunho de pedidoOs pacotes são exibidos como um grupo aninhado.
Checkout abandonado (no Shopify Messaging)Os pacotes são exibidos como um grupo aninhado.

Reverter modelos de notificação personalizados

Para atualizar os modelos de notificação personalizados na seção Configurações > Notificações do admin da Shopify, faça o backup manual das personalizações do modelo de e-mail, reverta o modelo para o padrão e reaplique as personalizações.

Etapas:

Desktop
  1. No admin da Shopify, acesse Configurações > Notificações.

  2. Clique em Notificações do cliente ou Notificações da equipe.

  3. Clique na notificação que você quer atualizar.

  4. Clique em Editar código.

  5. Faça backup das personalizações existentes: destaque as que deseja manter no modelo, copie o código e salve-o em um lugar seguro, como um arquivo de texto.

  6. Clique em Reverter para o padrão. Após a reversão, as personalizações não poderão ser recuperadas. Portanto, verifique se você fez um backup seguro das alterações.

  7. Na caixa de diálogo, clique em Reverter alterações para confirmar.

  8. Reaplique as personalizações ao modelo atualizado.

  9. Clique em Salvar.

Celular
  1. No app da Shopify, toque em Menu e, depois, em Settings Configurações.

  2. Na seção Configurações da loja, toque em Notificações.

  3. Toque em Notificações do cliente ou Notificações da equipe.

  4. Toque na notificação que você deseja atualizar.

  5. Toque no botão Editar código para editar o código do modelo.

  6. Faça backup das personalizações existentes: destaque as que deseja manter no modelo, copie o código e salve-o em um lugar seguro, como um arquivo de texto.

  7. Toque em Reverter para o padrão. Após a reversão, as personalizações não poderão ser recuperadas. Portanto, verifique se você fez um backup seguro das alterações.

  8. Na caixa de diálogo, toque em Reverter alterações para confirmar.

  9. Reaplique as personalizações ao modelo atualizado.

  10. Toque em Salvar ou .

Editar o código dos modelos de e-mail personalizados

Se você personalizou o código dos modelos de e-mail, pode atualizá-lo manualmente para que ele seja compatível com a visualização agrupada para pacotes de produtos. O código do modelo padrão varia entre os modelos. Para atualizar os modelos de notificação personalizados na seção Configurações > Notificações do admin da Shopify, siga as instruções de cada modelo que precisa ser editado.

Atualizar notificações de e-mail de pedidos

Siga estas etapas para atualizar os modelos personalizados para as seguintes notificações de e-mail de pedido:

  • Confirmação de pedido
  • E-mail de novo pedido
  • Fatura do pedido
  • Pagamento pendente bem-sucedido
  • Erro de pagamento pendente
  • Comprovante do POS e celular

Etapas:

  1. No admin da Shopify, acesse Configurações > Notificações.

  2. Clique em Notificações do cliente ou Notificações da equipe.

  3. Clique na notificação que você quer atualizar.

  4. Clique em Editar código.

  5. Faça backup das personalizações existentes: destaque as que você quer manter no modelo, copie o código e salve-o em um local seguro, como um arquivo de texto. Você também pode destacar o modelo inteiro, copiá-lo e salvá-lo em um local seguro.

  6. Encontre o loop do item de linha no modelo pesquisando por subtotal_line_items. Será exibido algo assim:

{% for line in subtotal_line_items %}
  1. Envolva todo o código dentro do loop subtotal_line_items com uma condição if. Para isso, adicione {% if line.groups.size == 0 %} logo abaixo do loop subtotal_line_items de abertura e feche a condição if adicionando {% endif %} logo acima do loop {% endfor %} de fechamento.
{% if line.groups.size == 0 %}
        <Your old code>
    {% endif %}
  1. O código deve ficar assim:
{% for line in subtotal_line_items %}
        {% if line.groups.size == 0 %}
            <Your old code>
        {% endif %}
    {% endfor %}
  1. Cole o código a seguir logo abaixo da tag de fechamento {% endfor %} do loop de item de linha subtotal_line_items:
{% 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. Clique em Salvar.

Atualizar notificações de e-mail de rascunhos de pedido e checkouts abandonados

Siga estas etapas para atualizar os modelos personalizados para as seguintes notificações por e-mail:

  • Novo rascunho de pedido
  • Carrinho abandonado
  • Fatura de rascunho de pedido
  • E-mail do POS para o cliente

Etapas:

Desktop
  1. No admin da Shopify, acesse Configurações > Notificações.

  2. Clique em Notificações do cliente ou Notificações da equipe.

  3. Clique na notificação que você quer atualizar.

  4. Clique em Editar código.

  5. Faça backup das personalizações existentes: destaque as que deseja manter no modelo, copie o código e salve-o em um lugar seguro, como um arquivo de texto.

  6. Encontre o loop do item de linha no modelo pesquisando por subtotal_line_items. Será exibido algo assim:

{% for line in subtotal_line_items %}
  1. Cole o código a seguir logo após a abertura do loop {% for line in subtotal_line_items %}:
{% assign expand_bundles = true %}
  1. Encontre o bloco que renderiza a imagem do produto. Ele deve ser algo como:
<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. Modifique a classe order-list__image-cell envolvendo-a em uma condição if {% if expand_bundles and line.bundle_parent? %} e adicionando uma classe alternativa. Isso altera o modelo de imagem para que, se a variável {% assign expand_bundles = true %} for verdadeira, a classe da imagem mude de order-list__parent-image-cell para order-list__image-cell. O código do modelo deve ficar assim:
<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. Encontre o código que renderiza o título da variante. Ele deve ser algo como:
{% if line.variant.title != 'Default Title' %}
        <span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
    {% endif %}
  1. Para ocultar o título da variante do pacote de produto, adicione and line.bundle_parent? == false à condição if {% if line.variant.title != 'Default Title' %} e, em seguida, adicione uma condição elsif. Será exibido algo assim:
{% 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. Opcional: encontre o código que renderiza o preço. Ele deve ter a classe order-list__price-cell. A notificação de e-mail de carrinho abandonado não tem essa classe, mas os modelos de notificação de rascunhos de pedido, sim. O código deve ser algo como:
<td class="order-list__price-cell">
  1. Adicione uma instrução if e uma classe adicional para o preço a fim de atualizar o preço do pacote principal. O código deve ser algo como:
<td
    {% if expand_bundles and line.bundle_parent? %}
        class="order-list__parent-price-cell"
    {% else %}
        class="order-list__price-cell"
    {% endif %}
    >
  1. Pesquise o código flat view ou Part of: em um loop for {% for group in line.groups %}. É possível que os modelos de e-mail antigos não tenham esse código.
{% for group in line.groups %}
        <span class="order-list__item-variant">Part of: {{ group.display_title }}</span><br/>
    {% endfor %}
  1. Substitua todo o loop {% for group in line.groups %} pelo seguinte código:
{% 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.
  • Atualizar e-mails de carrinho abandonado ou checkout abandonado editando o fluxo de trabalho

    Se você configurou automações de checkout abandonado, pode atualizar o e-mail de checkout abandonado para exibir visualizações agrupadas de pacotes de produtos editando o modelo de e-mail Recuperar checkout abandonado existente.

    Etapas:

    Desktop
    1. No admin da Shopify, acesse Apps > Messaging.

    2. Clique em Automações.

    3. Clique no fluxo de marketing que você deseja editar.

    4. Clique em Editar.

    5. Clique em Desativar automação.

    6. Na caixa de diálogo, clique em Desativar.

    7. Clique em Editar.

    8. Na automação de fluxo, clique em Enviar e-mail de marketing.

    9. Clique em Editar e-mail.

    10. Na caixa de diálogo A edição deste e-mail o reverterá para rascunho, clique em Continuar.

    11. Faça uma das seguintes edições no modelo de e-mail:

    • Adicione um assunto à linha Assunto
    • Adicione outros textos ou seções ao modelo
    1. Opcional: para analisar o e-mail, clique em Enviar teste e insira o endereço de e-mail no qual deseja recebê-lo. Na caixa de entrada, abra o e-mail e analise-o.
    2. Clique em Definir como ativo.
    3. Clique em Ativar automação.
    Celular
    1. No app Shopify, toque no ícone Menu.

    2. Na seção Apps, toque em Messaging.

    3. Toque em Messaging > Automações.

    4. No fluxo de marketing que você quer editar, toque em Menu horizontal > Desativar.

    5. Na caixa de diálogo, toque em Desativar.

    6. Toque no fluxo de marketing.

    7. Ao lado do e-mail de marketing, toque em Menu horizontal > Editar.

    8. Na caixa de diálogo A edição deste e-mail o reverterá para rascunho, toque em Continuar.

    9. Adicione um assunto à linha Assunto e, depois, inclua outros textos ou seções no modelo.

    10. Opcional: para analisar o e-mail, toque em Enviar teste e insira o endereço de e-mail em que quer recebê-lo. Na sua caixa de entrada, abra o e-mail e analise-o.

    11. Toque em Definir como ativo.

    12. Toque em Menu horizontal ou Menu vertical > Ativar automação.

    Atualizar e-mails de carrinho ou checkout abandonado na página de resumo da automação de marketing

    Caso tenha configurado automações de checkout abandonado, será possível atualizar o e-mail correspondente para exibir visualizações agrupadas de pacotes de produtos. Para isso, edite a seção Carrinho abandonado ou Checkout abandonado.

    Etapas:

    Desktop
    1. No admin da Shopify, acesse Apps > Messaging.

    2. Clique em Automações.

    3. Clique no fluxo de marketing que você deseja editar.

    4. Na seção Nome da atividade, clique na miniatura do modelo que você quer editar.

    5. Clique em Editar.

    6. Na caixa de diálogo A edição deste e-mail o reverterá para rascunho, clique em Continuar.

    7. Clique no ícone de lixeira ao lado da seção Checkout abandonado ou Carrinho abandonado do modelo.

    8. Clique em + Adicionar seção.

    9. Clique na seção Carrinho abandonado ou Checkout abandonado.

    10. Opcional: para analisar o e-mail, toque em Enviar teste e insira o endereço de e-mail em que quer recebê-lo. Na sua caixa de entrada, abra o e-mail e analise-o.

    11. Clique em Definir como ativo.

    Celular
    1. No app Shopify, toque no ícone Menu.

    2. Na seção Apps, toque em Messaging.

    3. Toque em Messaging > Automações.

    4. No fluxo de marketing que você quer editar, toque em Menu horizontal > Desativar.

    5. Toque no fluxo de marketing.

    6. Toque na miniatura do modelo que você quer editar.

    7. Toque em Editar.

    8. Na caixa de diálogo A edição deste e-mail o reverterá para rascunho, toque em Continuar.

    9. Deslize para cima para editar o modelo.

    10. Pressione e segure a seção Checkout abandonado ou Carrinho abandonado e, depois, toque no ícone de lixeira.

    11. Toque no botão + e, depois, na seção Carrinho abandonado ou Checkout abandonado.

    12. Opcional: para analisar o e-mail, toque em Enviar teste e insira o endereço de e-mail em que quer recebê-lo. Na sua caixa de entrada, abra o e-mail e analise-o.

    13. Toque em Definir como ativo.