Created
September 8, 2021 12:54
-
-
Save zorzv/9ebb656d6ccbc2d8e25060c6e179582b to your computer and use it in GitHub Desktop.
Shopify Abandoned Checkout with Line Properties
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% 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.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 %} | |
{% for p in line.properties %}{% unless p.last == blank %} | |
<span class="order-list__item-personalised-box">{{ p.first }}: {{ p.last }}</span><br/> | |
{% endunless %}{% endfor %} | |
{% 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 %} | |
</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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment