Why is HTML showing in my Shopify abandoned checkout email notification?

diecasthangar
New Member
14 0 0

Hello,

I was going through and testing all my email notifications out and noticed that in my Abandoned Checkout email, that some basic html is showing up in my product title.  This basic HTML does not appear in the order confirmation and many other email previews.  I have studied the code line by line but can't seem to find any difference in that part of the table body to make the product title appear different.  I have added screen shots to help with my issue.  You will see some of my code to bold and put a break on a product in my store.  Notice the difference highlighted in red between the two images.

ANY HELP MUCH APPRECIATED!!

abandoned checkout.pngorder confirmation.png

Thanks

Ben

Replies 4 (4)

IttantaTech
Shopify Partner
525 55 102

@diecasthangar 

Thanks 

can you please share  Notification Email code so i will check.

Thanks,
Ittanta Technologies Pvt. Ltd. | Shopify Expert
If reply is helpful, please Like and Accept Solution.
To hire us, contact us at info@ittanta.com
diecasthangar
New Member
14 0 0

Hello,

Here is the code from the Notification email:

There error in there somewhere. Again, it only works incorrectly in the Abandoned checkout email.

{% capture email_title %}
  {% if item_count == 1 %}
    You left an item in your cart
  {% else %}
    You left items in your cart
  {% endif %}
{% endcapture %}
{% capture email_body %}
  {% if billing_address.first_name %}
    {% if item_count == 1 %}
      Hi {{ billing_address.first_name }}, you added an item to your shopping cart and haven't completed your purchase. You can complete it now while it's still available.
    {% else %}
      Hi {{ billing_address.first_name }}, you added items to your shopping cart and haven't completed your purchase. You can complete it now while they're still available.
    {% endif %}
  {% else %}
    {% if item_count == 1 %}
      Hi, you added an item to your shopping cart and haven't completed your purchase. You can complete it now while it's still available.
    {% else %}
      Hi, you added items to your shopping cart and haven't completed your purchase. You can complete it now while they're still available.
    {% endif %}
  {% endif %}
{% endcapture %}

<!DOCTYPE html>
<html lang="en">
  <head>
  <title>{{ email_title }}</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
  <style>
    .button__cell { background: {{ shop.email_accent_color }}; }
    a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
  </style>
</head>

  <body>
    <table class="body">
      <tr>
        <td>
          <table class="header row">
  <tr>
    <td class="header__cell">
      <center>

        <table class="container">
          <tr>
            <td>

              <table class="row">
                <tr>
                  <td class="shop-name__cell">
                    {%- if shop.email_logo_url %}
                      <img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
                    {%- else %}
                      <h1 class="shop-name__text">
                        <a href="{{shop.url}}">{{ shop.name }}</a>
                      </h1>
                    {%- endif %}
                  </td>

                </tr>
              </table>

            </td>
          </tr>
        </table>

      </center>
    </td>
  </tr>
</table>

          <table class="row content">
  <tr>
    <td class="content__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              
            <h2>{{ email_title }}</h2>
            {% if custom_message != blank %}
              <p>{{ custom_message }}</p>
            {% else %}
              <p>{{ email_body }}</p>
            {% endif %}
            <table class="row actions">
  <tr>
    <td class="empty-line"> </td>
  </tr>
  <tr>
    <td class="actions__cell">
      <table class="button main-action-cell">
        <tr>
          <td class="button__cell"><a href="{{ url }}" class="button__text">Items in your cart</a></td>
        </tr>
      </table>
      {% if shop.url %}
    <table class="link secondary-action-cell">
      <tr>
        <td class="link__cell">or <a href="{{ shop.url }}">Visit our store</a></td>
      </tr>
    </table>
{% endif %}

    </td>
  </tr>
</table>


            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

          <table class="row section">
  <tr>
    <td class="section__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              <h3>Complete your purchase</h3>
            </td>
          </tr>
        </table>
        <table class="container">
          <tr>
            <td>
              
            
<table class="row">
  {% for line in subtotal_line_items %}
  <tr class="order-list__item">
    <td class="order-list__item__cell">
      <table>
        <td>
          {% if line.image %}
            <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
          {% endif %}
        </td>
        <td class="order-list__product-description-cell">
          {% if line.quantity < line.quantity %}
            {% capture line_display %} {{ line.quantity }} of {{ line.quantity }} {% endcapture %}
          {% else %}
            {% assign line_display = line.quantity  %}
          {% endif %}

          <span class="order-list__item-title">{{ line.title }} × {{ line_display }}</span><br/>

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

            {% if line.refunded_quantity > 0 %}
              <span class="order-list__item-refunded">Refunded</span>
            {% endif %}

          {% if line.discount_allocations %}
            {% for discount_allocation in line.discount_allocations %}
              {% if discount_allocation.discount_application.target_selection != 'all' %}
                <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_allocation.discount_application.title | upcase }}
                    (-{{ discount_allocation.amount | money }})
                  </span>
                </span>
              {% endif %}
            {% endfor %}
          {% endif %}
        </td>
      </table>
    </td>
  </tr>{% endfor %}
</table>


            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

          <table class="row footer">
            <tr>
              <td class="footer__cell">
                <center>
                  <table class="container">
                    <tr>
                      <td>
                        <p class="disclaimer__subtext">Don't want to receive cart reminders from us? <a href="{{ unsubscribe_url }}">Unsubscribe</a></p>
                      </td>
                    </tr>
                  </table>
                </center>
              </td>
            </tr>
          </table>
          <img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />
        </td>
      </tr>
    </table>
  </body>
</html>

 

IttantaTech
Shopify Partner
525 55 102

@diecasthangar 

Please give your store access. to check this and provide solution. I have sent store access request from our Shopify Partner account. 

Thanks,
Ittanta Technologies Pvt. Ltd. | Shopify Expert
If reply is helpful, please Like and Accept Solution.
To hire us, contact us at info@ittanta.com
HexGaming
Visitor
2 0 0

Can you check my email code? The preview of the email notification is different from the actual one.

{% capture email_title %}
{% if item_count == 1 %}
THE PERFECT ITEM IS STILL IN YOUR CART.
{% else %}
THE PERFECT ITEMS ARE STILL IN YOUR CART.
{% endif %}
{% endcapture %}
{% capture email_body %}
{% if billing_address.first_name %}
{% if item_count == 1 %}
Hi {{ billing_address.first_name }},<br><br>This is just a quick courtesy emal to remind you about your cart which will expire soon. Click below to let us transport you right back where you left off!<br><br>Use this exclusive discount code "custom5" to save 5% on orders over $180.
{% else %}
Hi {{ billing_address.first_name }},<br><br>This is just a quick courtesy emal to remind you about your cart which will expire soon. Click below to let us transport you right back where you left off!<br><br>Use this exclusive discount code "custom5" to save 5% on orders over $180.
{% endif %}
{% else %}
{% if item_count == 1 %}
Hi,<br><br>This is just a quick courtesy emal to remind you about your cart which will expire soon. Click below to let us transport you right back where you left off!<br><br>Use this exclusive discount code "custom5" to save 5% on orders over $180.
{% else %}
Hi,<br><br>This is just a quick courtesy emal to remind you about your cart which will expire soon. Click below to let us transport you right back where you left off!<br><br>Use this exclusive discount code "custom5" to save 5% on orders over $180.
{% endif %}
{% endif %}
{% endcapture %}

<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ email_title }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
<style>
.button__cell { background: {{ shop.email_accent_color }}; }
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
</style>
</head>
<body>
<table class="body">
<tr>
<td>
<table class="header row">
<tr>
<td class="header__cell">
<center>
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="shop-name__cell">
{%- if shop.email_logo_url %}
<img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
{%- else %}
<h1 class="shop-name__text">
<a href="{{shop.url}}">{{ shop.name }}</a>
</h1>
{%- endif %}
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row content">
<tr>
<td class="content__cell">
<center>
<table class="container">
<tr>
<td>
<h2>{{ email_title }}</h2>
{% if custom_message != blank %}
<p>{{ custom_message }}</p>
{% else %}
<p>{{ email_body }}</p>
{% endif %}
<table class="row actions">
<tr>
<td class="empty-line"> </td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row section">
<tr>
<td class="section__cell">
<center>
<table class="container">
<tr>
</tr>
</table>
<table class="container">
<tr>
<td>
<table class="row">
{% for line in subtotal_line_items %}
<tr class="order-list__item">
<td class="order-list__item__cell">
<table>
<td>
{% if line.image %}
<img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
{% endif %}
</td>
<td class="order-list__product-description-cell">
{% if line.product.title %}
{% assign line_title = line.product.title %}
{% else %}
{% assign line_title = line.title %}
{% endif %}

{% if line.quantity < line.quantity %}
{% capture line_display %} {{ line.quantity }} of {{ line.quantity }} {% endcapture %}
{% else %}
{% assign line_display = line.quantity %}
{% endif %}
<span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>
{% if line.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
{% endif %}
{% if line.selling_plan_allocation %}
<span class="order-list__item-variant">{{ line.selling_plan_allocation.selling_plan.name }}</span><br/>
{% endif %}
{% if line.refunded_quantity > 0 %}
<span class="order-list__item-refunded">Refunded</span>
{% endif %}
{% if line.discount_allocations %}
{% for discount_allocation in line.discount_allocations %}
{% if discount_allocation.discount_application.target_selection != 'all' %}
<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_allocation.discount_application.title | upcase }}
(-{{ discount_allocation.amount | money }})
</span>
</span>
{% endif %}
{% endfor %}
{% endif %}
</td>
</table>
</td>
</tr>{% endfor %}
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ url }}" class="button__text">RECLAIM MY CART!</a></td>
</tr>
</table>
{% if shop.url %}
<table class="link secondary-action-cell">
<tr>
<td class="link__cell">or <a href="{{ shop.url }}">Visit our store</a></td>
</tr>
</table>
<p style="color: #777; line-height: 150%; font-size: 16px; margin: 0;">
<br>If you have any other concerns, please feel free to message us at service@hexgaming.com
{% endif %}
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row footer">
<tr>
<td class="footer__cell">
<center>
<table class="container">
<tr>
<td>
<p class="disclaimer__subtext">Don't want to receive cart reminders from us? <a href="{{ unsubscribe_url }}">Unsubscribe</a></p>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />
</td>
</tr>
</table>
</body>
</html>