How can I center a button in an email template?

LoveMalita · ‎08-21-2023

Hi all,

I've been trying the last few days and searching google to find out how to centre buttons in the email templates which are send to customers. I can't find anything. I've tried style="text-align: center;" which works on the logo a the text that says 'or visit our store'. However, this isn't woking on 'view your order' button.

Here is my code;

{% capture email_title %}
{% if has_pending_payment %}
Thank you for your order!
{% else %}
Thank you for your order!
{% endif %}
{% endcapture %}
{% capture email_body %}
{% if has_pending_payment %}
{% if buyer_action_required %}
You’ll get a confirmation email after completing your payment.
{% else %}
Your payment is being processed. You'll get an email when your order is confirmed.
{% endif %}
{% else %}
{% if requires_shipping %}
{% case delivery_method %}
{% when 'pick-up' %}
You’ll receive an email when your order is ready for pickup.
{% when 'local' %}
Hi {{ customer.first_name }}, we're getting your order ready for delivery.
{% else %}
We're getting your order ready to be shipped. We will notify you when it has been sent.
{% endcase %}
{% if delivery_instructions != blank %}
<p><b>Delivery information:</b> {{ delivery_instructions }}</p>
{% endif %}
{% if consolidated_estimated_delivery_time %}
<p>
Estimated delivery <b>{{ consolidated_estimated_delivery_time }}</b>
</p>
{% endif %}
{% endif %}
{% endif %}
{% assign gift_card_line_items = line_items | where: "gift_card" %}
{% assign found_gift_card_with_recipient_email = false %}
{% for line_item in gift_card_line_items %}
{% if line_item.properties["__shopify_send_gift_card_to_recipient"] and line_item.properties["Recipient email"] %}
{% assign found_gift_card_with_recipient_email = true %}
{% break %}
{% endif %}
{% endfor %}
{% if found_gift_card_with_recipient_email %}
<p>Your gift card recipient will receive an email with their gift card code.</p>
{% elsif gift_card_line_items.first %}
<p>You’ll receive separate emails for any gift cards.</p>
{% 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>

<table class="row">
<tr>
<td class="shop-name__cell" style="text-align: center;">
{%- 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>

<td>
<tr>
<td class="order-number__cell" style="text-align: left;" >
<span class="order-number__text" style="text-transform: capitalize;">
Your Order Number is: {{ order_name }}
</span>
</td>
</tr>
{%- if po_number %}
<tr>
<td class="po-number__cell">
<span class="po-number__text">
PO number #{{ po_number }}
</span>
</td>
</tr>
{%- 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>
<p>{{ email_body }}</p>
{% assign transaction_count = transactions | size %}
{% if transaction_count > 0 %}
{% for transaction in transactions %}
{% if transaction.show_buyer_pending_payment_instructions? %}
<p> {{transaction.buyer_pending_payment_notice}} </p>
<p>
<table class="row">
<tr>
{% for instruction in transaction.buyer_pending_payment_instructions %}
<td>{{ instruction.header }}</td>
{% endfor %}
<td>Amount</td>
</tr>
<tr>
{% for instruction in transaction.buyer_pending_payment_instructions %}
<td>{{ instruction.value }}</td>
{% endfor %}
<td>{{transaction.amount | money}}</td>
</tr>
</table>
</p>
{% endif %}
{% endfor%}
{% endif %}

{% if order_status_url %}

{% else %}
{% if shop.url %}
<table class="row actions">
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ shop.url }}" class="button__text">Visit our store</a></td>
</tr>
</table>
</td>
</tr>
</table>
{% endif %}

{% endif %}

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

<table class="row section">
<tr>
<td class="section__cell">
<center>
<table class="container">
<tr>
<td>
<h3>Order summary</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>

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

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

{% if line.gift_card and line.properties["__shopify_send_gift_card_to_recipient"] %}
{% for property in line.properties %}
{% assign property_first_char = property.first | slice: 0 %}
{% if property.last != blank and property_first_char != '_' %}
<div class="order-list__item-property">
<dt>{{ property.first }}:</dt>
<dd>
{% if property.last contains '/uploads/' %}
<a href="{{ property.last }}" class="link" target="_blank">
{{ property.last | split: '/' | last }}
</a>
{% else %}
{{ property.last }}
{% endif %}
</dd>
</div>
{% endif %}
{% endfor %}

{% 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' %}
<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_allocation.discount_application.title | upcase }}
(-{{ discount_allocation.amount | money }})
</span>
</span>
</p>
{% endif %}
{% endfor %}
{% endif %}
</td>
<td class="order-list__price-cell">
{% if line.original_line_price != line.final_line_price %}
<del class="order-list__item-original-price">{{ line.original_line_price | money }}</del>
{% endif %}
<p class="order-list__item-price">
{% if line.final_line_price > 0 %}
{{ line.final_line_price | money }}
{% else %}
Free
{% endif %}
</p>
</td>
</table>
</td>
</tr>{% endfor %}
</table>

{% assign order_discount_count = 0 %}
{% assign total_order_discount_amount = 0 %}
{% assign has_shipping_discount = false %}

{% 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 = discount_application.title %}
{% assign shipping_amount = discount_application.total_allocated_amount %}
{% endif %}
{% endfor %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Subtotal</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ subtotal_price | plus: total_order_discount_amount | money }}</strong>
</td>
</tr>

{% if order_discount_count > 0 %}
{% if order_discount_count == 1 %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Order Discount</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>-{{ total_order_discount_amount | money }}</strong>
</td>
</tr>

{% endif %}
{% if order_discount_count > 1 %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Order Discounts</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>-{{ total_order_discount_amount | money }}</strong>
</td>
</tr>

{% endif %}
{% for discount_application in discount_applications %}
{% if discount_application.target_selection == 'all' and discount_application.target_type != 'shipping_line' %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span class="subtotal-line__discount">
<img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
<span class="subtotal-line__discount-title">{{ discount_application.title }} (-{{ discount_application.total_allocated_amount | money }})</span>
</span>
</p>
</td>
</tr>

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

{% if delivery_method == 'pick-up' %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Pickup</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ shipping_price | money }}</strong>
</td>
</tr>

{% else %}
{% if has_shipping_discount %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Shipping</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>Free</strong>
</td>
</tr>

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span class="subtotal-line__discount">
<img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
<span class="subtotal-line__discount-title">{{ shipping_discount }} (-{{ shipping_amount | money }})</span>
</span>
</p>
</td>
</tr>

{% else %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Shipping</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ shipping_price | money }}</strong>
</td>
</tr>

{% endif %}

{% if total_duties %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Duties</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ total_duties | money }}</strong>
</td>
</tr>

{% endif %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Taxes</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ tax_price | money }}</strong>
</td>
</tr>

{% if total_tip and total_tip > 0 %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Tip</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ total_tip | money }}</strong>
</td>
</tr>

{% endif %}
</table>
{% assign transaction_size = 0 %}
{% assign transaction_amount = 0 %}
{% for transaction in transactions %}
{% if transaction.status == "success" %}
{% unless transaction.kind == "authorization" or transaction.kind == "void" %}
{% assign transaction_size = transaction_size | plus: 1 %}
{% assign transaction_amount = transaction_amount | plus: transaction.amount %}
{% endunless %}
{% endif %}
{% endfor %}
<table class="row subtotal-table subtotal-table--total">
{% if payment_terms and payment_terms.automatic_capture_at_fulfillment == false or b2b?%}
{% assign due_at_date = payment_terms.next_payment.due_at | date: "%b %d, %Y" %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Total paid today</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ transaction_amount | money_with_currency }}</strong>
</td>
</tr>

<div class="payment-terms">

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Total due {{ due_at_date }}</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ payment_terms.next_payment.amount_due | money_with_currency }}</strong>
</td>
</tr>

</div>
{% else %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Total</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ total_price | money_with_currency }}</strong>
</td>
</tr>

{% endif %}

</table>

{% if total_discounts > 0 %}
<p class="total-discount">
You saved <span class="total-discount--amount">{{ total_discounts | money }}</span>
</p>
{% endif %}

{% unless payment_terms %}
{% if transaction_size > 1 or transaction_amount < total_price %}
<table class="row subtotal-table">
<tr><td colspan="2" class="subtotal-table__line"></td></tr>
<tr><td colspan="2" class="subtotal-table__small-space"></td></tr>

{% for transaction in transactions %}
{% if transaction.status == "success" and transaction.kind == "capture" or transaction.kind == "sale" %}
{% if transaction.payment_details.credit_card_company %}
{% capture transaction_name %}{{ transaction.payment_details.credit_card_company }} (ending in {{ transaction.payment_details.credit_card_last_four_digits }}){% endcapture %}
{% else %}
{% capture transaction_name %}{{ transaction.gateway_display_name }}{% endcapture %}
{% endif %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>{{transaction_name}}</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ transaction.amount | money }}</strong>
</td>
</tr>

{% endif %}
{% if transaction.kind == 'refund' %}
{% if transaction.payment_details.credit_card_company %}
{% assign refund_method_title = transaction.payment_details.credit_card_company %}
{% else %}
{% assign refund_method_title = transaction.gateway %}
{% endif %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Refund</span>
<br>
<small>{{ refund_method_title | capitalize }}</small>
</p>
</td>
<td class="subtotal-line__value">
<strong>- {{ transaction.amount | money }}</strong>
</td>
</tr>

{% endif %}
{% endfor %}
</table>
{% endif %}

{% endunless %}
</td>
</tr>
</table>

<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="{{ order_status_url }}" class="button__text">View your order</a></td>
</tr>
</table>

{% if shop.url %}

{% endif %}

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

<center>
<table class="link secondary-action-cell">
<tr>
<td>or <a href="{{ shop.url }}">Visit LoveMalita.com</a></td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>

<table class="row section">
<tr>
<td class="section__cell">
<center>
<table class="container">
<tr>
<td>
<h3>Your information</h3>
</td>
</tr>
</table>
<table class="container">
<tr>
<td>

<table class="row">
<tr>
{% if requires_shipping and shipping_address %}
<td class="customer-info__item">
<h4>Shipping address</h4>
{{ shipping_address | format_address }}
</td>
{% endif %}
{% if billing_address %}
<td class="customer-info__item">
<h4>Billing address</h4>
{{ billing_address | format_address }}
</td>
{% endif %}
</tr>
</table>
<table class="row">
<tr>
{% if company_location %}
<td class="customer-info__item">
<h4>Location</h4>
<p>
{{ company_location.name }}
</p>
</td>
{% endif %}
{% if transaction_size > 0 or payment_terms and payment_terms.automatic_capture_at_fulfillment == false or b2b? %}
<td class="customer-info__item">
<h4>Payment</h4>
<p class="customer-info__item-content">
{% if payment_terms %}
{% assign due_date = payment_terms.next_payment.due_at | default: nil %}
{% if payment_terms.type == 'receipt' or payment_terms.type == 'fulfillment' and payment_terms.next_payment.due_at == nil %}
{{ payment_terms.translated_name }}<br>
{% else %}
{{ payment_terms.translated_name }}: Due {{ due_date | date: format: 'date' }}<br>
{% endif %}
{% endif %}
{% if transaction_size > 0 %}
{% for transaction in transactions %}
{% if transaction.status == "success" or transaction.status == "pending" %}
{% if transaction.kind == "capture" or transaction.kind == "sale" %}
{% if transaction.payment_details.credit_card_company %}
<img src="{{ transaction.payment_details.credit_card_company | payment_icon_png_url }}" class="customer-info__item-credit" height="24" alt="{{ transaction.payment_details.credit_card_company }}">
<span>ending with {{ transaction.payment_details.credit_card_last_four_digits }}</span><br>
{% elsif transaction.gateway_display_name == "Gift card" %}
<img src="{{ transaction.gateway_display_name | downcase | replace: ' ', '-' | payment_type_img_url }}" class="customer-info__item-credit" height="24">
ending with {{ transaction.payment_details.gift_card.last_four_characters | upcase }}<br>
&emsp;&emsp;&emsp; Gift card balance - <b>{{ transaction.payment_details.gift_card.balance | money }}</b>
{% elsif transaction.gateway_display_name != "Shop Cash" %}
{{ transaction.gateway_display_name }}<br>
{% endif %}
{% elsif transaction.kind == "authorization" and transaction.gateway_display_name == "Shop Cash" %}
<span>Shop Cash - <b>{{ transaction.amount | money }}</b></span>
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
</p>
</td>
{% endif %}
</tr>
<tr>
{% if requires_shipping and shipping_address %}
{% if shipping_method %}
<td class="customer-info__item">
<h4>Shipping method</h4>
<p>
{% if delivery_promise_branded_shipping_line %}
{{ delivery_promise_branded_shipping_line }}
{% else %}
{{ shipping_method.title }}
{% endif %}
</p>
</td>
{% endif %}
{% endif %}
</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">If you have any questions, reply to this email or contact us at <a href="mailto:{{ shop.email }}">{{ shop.email }}</a></p>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>

</td>
</tr>
</table>
</body>
</html>

DaisyVo · ‎02-19-2025

Hi @LoveMalita

Maybe email HTML is different from web design, so buttons need extra styling to align properly.

To center the "View your order" button in your Shopify email template, modify the <td> containing the button by ensuring it has text-align: center;. Also, make sure the table wrapping the button is centered.

You can try these steps to fix this:

Find this part of your code

<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ order_status_url }}" class="button__text">View your order</a></td>
</tr>
</table>

Modify it like this

<table class="button main-action-cell" align="center">
<tr>
<td class="button__cell" style="text-align: center;">
<a href="{{ order_status_url }}" class="button__text" style="display: inline-block; text-align: center;">View your order</a>
</td>
</tr>
</table>

Hope this work for you

Best regards,

Daisy.

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

How can I center a button in an email template?