How can I center the 'Complete Order' button in an Abandoned Cart email?

Store Design
1

I’m trying to update my Abandoned Cart email. I’ve managed to center everything, however, I am struggling to get the ‘Complete Order’ button to center on all devices. I’d also like the ‘Visit Our Store’ link to be underneath the ‘Complete Order’ button.

I’ve tried lots from the Shopify forum but nothing is working - hope someone can help me! :slightly_smiling_face:

Abandoned cart email.jpg
Abandoned cart email.jpg965×526 30.9 KB

1 Like
2

@quiztrail

can you please share Abandoned Cart email template code

1 Like
3

{% capture email_title %}
{% if item_count == 1 %}
A great day out is only a click away!
{% else %}
Great days out are only a click away!
{% endif %}
{% endcapture %}
{% capture email_body %}
{% if billing_address.first_name %}
{% if item_count == 1 %}
Hi {{ billing_address.first_name }},

We didn’t want you to miss out on making great memories, so we’ve saved your basket for you. Don’t forget - we offer free P&P on all orders.

{% else %}
Hi {{ billing_address.first_name }},

We didn’t want you to miss out on making great memories, so we’ve saved your basket for you. Don’t forget - we offer free P&P on all orders.



Lets get out there and explore!
{% endif %}
{% else %}
{% if item_count == 1 %}
We didn’t want you to miss out on making great memories, so we’ve saved your basket for you. Don’t forget - we offer free P&P on all orders.



Lets get out there and explore!
{% else %}
We didn’t want you to miss out on making great memories, so we’ve saved your basket for you. Don’t forget - we offer free P&P on all orders.



Lets get out there and explore!
{% endif %}
{% endif %}
{% endcapture %}

{{ email_title }} .button__cell { background: {{ shop.email_accent_color }}; } a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
{%- if shop.email_logo_url %} {{ shop.name }} {%- else %}

{{ shop.name }}

{%- endif %}

{{ email_title }}

{% if custom_message != blank %}

{{ custom_message }}

{% else %}

{{ email_body }}

{% endif %}

Your Basket:
{% for line in subtotal_line_items %} {% endfor %}
{% if line.image %} {% endif %} {% 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 %}

{{ line_title }} × {{ line_display }}

{% if line.variant.title != ‘Default Title’ %}
{{ line.variant.title }}

{% endif %}

{% if line.selling_plan_allocation %}
{{ line.selling_plan_allocation.selling_plan.name }}

{% endif %}

{% if line.refunded_quantity > 0 %}
Refunded
{% endif %}

{% if line.discount_allocations %}
{% for discount_allocation in line.discount_allocations %}
{% if discount_allocation.discount_application.target_selection != ‘all’ %}



{{ discount_allocation.discount_application.title | upcase }}
(-{{ discount_allocation.amount | money }})


{% endif %}
{% endfor %}
{% endif %}
Complete Order
{% if shop.url %}
or Visit our store
{% endif %}


★ ★ ★ ★ ★

“Such a great time exploring and following the clues. Fantastic family time and such amazing value, we've learned so much about the towns close to where we live. We've completed a few of these now and would highly recommend for all ages.” - Helen



If you have any questions - contact us at info@quiztrail.co.uk

Don't want to receive cart reminders from us? Unsubscribe
1 Like
4

@quiztrail

i have check this code its already center if any issue please add them access

1 Like
5

Hi @KetanKumar - thank you for your quick response. It looks to be that the button left aligns once the browser is maximised. That’s ok though - it stays centre before maximise.

1 Like
6

@quiztrail

yes if possible to give me theme access so i will check and guide you

7

I’m having the same issue! I’ve been trying to fix this for ages, please help!

1 Like
8

@AreaRugShop

yes, please share code

9

{% capture email_title %}
{% if item_count == 1 %}
You left something behind!
{% else %}
You left something behind!
{% 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. Did you know we now offer checkout with Afterpay? Shop now and pay over 4 equal payments with no interest when you pay on time! You can checkout now while your item is still available.
{% else %}
Hi {{ billing_address.first_name }}, you added items to your shopping cart and haven’t completed your purchase. Did you know we now offer checkout with Afterpay? Shop now and pay over 4 equal payments with no interest when you pay on time! You can checkout now while your items are still available.
{% endif %}
{% else %}
{% if item_count == 1 %}
Hi, you added an item to your shopping cart and haven’t completed your purchase. Did you know we now offer checkout with Afterpay? Shop now and pay over 4 equal payments with no interest when you pay on time! You can checkout now while your item is still available.
{% else %}
Hi, you added items to your shopping cart and haven’t completed your purchase. Did you know we now offer checkout with Afterpay? Shop now and pay over 4 equal payments with no interest when you pay on time! You can checkout now while your items are still available.
{% endif %}
{% endif %}
{% endcapture %}

{{ email_title }} .button__cell { background: {{ shop.email_accent_color }}; } a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
{%- if shop.email_logo_url %} {{ shop.name }} {%- else %}

{{ shop.name }}

{%- endif %}

{{ email_title }}

{% if custom_message != blank %}

{{ custom_message }}

{% else %}

{{ email_body }}

{% endif %}
 
Items in your cart
{% if shop.url %}
or Visit our store
{% endif %}

Complete your purchase
{% for line in subtotal_line_items %} {% endfor %}
{% if line.image %} {% endif %} {% 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 %}

{{ line_title }} × {{ line_display }}

{% if line.variant.title != ‘Default Title’ %}
{{ line.variant.title }}

{% endif %}

{% if line.selling_plan_allocation %}
{{ line.selling_plan_allocation.selling_plan.name }}

{% endif %}

{% if line.refunded_quantity > 0 %}
Refunded
{% endif %}

{% if line.discount_allocations %}
{% for discount_allocation in line.discount_allocations %}
{% if discount_allocation.discount_application.target_selection != ‘all’ %}



{{ discount_allocation.discount_application.title | upcase }}
(-{{ discount_allocation.amount | money }})


{% endif %}
{% endfor %}
{% endif %}

Don't want to receive cart reminders from us? Unsubscribe
10

This is how it is displayed when sent:

ARSemail.png
ARSemail.png1322×1141 84.3 KB

1 Like
11

@AreaRugShop

yes, please try this code

{% capture email_title %}
{% if item_count == 1 %}
You left something behind!
{% else %}
You left something behind!
{% 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. Did you know we now offer checkout with [Afterpay](https://www.afterpay.com/en-CA/how-it-works)? Shop now and pay over 4 equal payments with **no interest** when you pay on time! You can checkout now while your item is still available.
{% else %}
Hi {{ billing_address.first_name }}, you added items to your shopping cart and haven't completed your purchase. Did you know we now offer checkout with [Afterpay](https://www.afterpay.com/en-CA/how-it-works)? Shop now and pay over 4 equal payments with **no interest** when you pay on time! You can checkout now while your items are still available.
{% endif %}
{% else %}
{% if item_count == 1 %}
Hi, you added an item to your shopping cart and haven't completed your purchase. Did you know we now offer checkout with [Afterpay](https://www.afterpay.com/en-CA/how-it-works)? Shop now and pay over 4 equal payments with **no interest** when you pay on time! You can checkout now while your item is still available.
{% else %}
Hi, you added items to your shopping cart and haven't completed your purchase. Did you know we now offer checkout with [Afterpay](https://www.afterpay.com/en-CA/how-it-works)? Shop now and pay over 4 equal payments with **no interest** when you pay on time! You can checkout now while your items are still available.
{% endif %}
{% endif %}
{% endcapture %}

<table>

<table>

<table>

<table>

<tr>

<td>

{%- if shop.email_logo_url %}

{%- else %}
# 
{{ shop.name }}

{%- endif %}

</td>

</tr>

</table>

</table>

</table>

<table>

<table>

## {{ email_title }}
{% if custom_message != blank %}

{{ custom_message }}

{% else %}

{{ email_body }}

{% endif %}
<table>

<tr>

<td>

 

</td>

</tr>

<table>

<tr>

<td>

Items in your cart

</td>

</tr>

</table>
{% if shop.url %}
<table>

<tr>

<td>

or Visit our store

</td>

</tr>

</table>
{% endif %}

</table>

</table>

</table>

<table>

<table>

<tr>

<td>

### Complete your purchase

</td>

</tr>

</table>
<table>

{% for line in subtotal_line_items %}
{% endfor %}
<table>

<table>

<tr>
<td>

{% if line.image %}

{% endif %}

</td>

<td>

{% 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 %}

{{ line_title }} × {{ line_display }}

{% if line.variant.title != 'Default Title' %}
{{ line.variant.title }}

{% endif %}

{% if line.selling_plan_allocation %}
{{ line.selling_plan_allocation.selling_plan.name }}

{% endif %}

{% if line.refunded_quantity > 0 %}
Refunded
{% endif %}

{% if line.discount_allocations %}
{% for discount_allocation in line.discount_allocations %}
{% if discount_allocation.discount_application.target_selection != 'all' %}

{{ discount_allocation.discount_application.title | upcase }}
(-{{ discount_allocation.amount | money }})

{% endif %}
{% endfor %}
{% endif %}

</td>

</tr>
</table>

</table>

</table>

</table>

<table>

<table>

<tr>

<td>

Don't want to receive cart reminders from us? Unsubscribe

</td>

</tr>

</table>

</table>

</table>
12

Didn’t work :disappointed_face: