Button Placement Inside Table
Hey,
I want to style the "Shipping Update" mail from Shopify but can´t get it to work like I want.
The goal is to get 3 buttons in one line, like i did with the code below.
How can I make sure that the buttons are always the same size, regardless of the text inside.
Also, the buttons with the white border does not look like the buttons that are in the mail by default.
The border does not come from the styling.
I tried coloring the border in red with styling, instead it has all 3 buttons bordered together instead of each one individually.
It would also be nice if there was some space between the individual buttons to make it look cleaner.
<tr>
<td class="empty-line"> </td>
</tr>
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td><button class="button__cell"><a href="{{ order_status_url }}" class="button__text">Bestellung online ansehen</a></button></td>
<td><button class="button__cell"><a href="{{ fulfillment.tracking_url }}" class="button__text">Sendung verfolgen</a></button></td>
<td><button class="button__cell"><a href="SPACER">Rechnung herunterladen</a></button></td>
</tr>
</table>
</td>
</tr>
Thanks for your help but it did not work.
(the bottom below was the old one just for testing)
This is the complete html mail code from the file.
<!DOCTYPE html>
<html lang="de">
<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 }};
width: 33.33%;
text-align: center;
padding: 10px;
margin: 5px;
border: 1px solid white;
}
.button-container {
width: 100%;
text-align: center;
}
.button__text {
display: inline-block;
text-decoration: none;
color: white;
padding: 12px 20px;
font-weight: bold;
border-radius: 5px;
background-color: {{ shop.email_accent_color }};
width: 100%;
text-align: center;
}
.button__text:hover {
opacity: 0.8;
}
</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>
<td class="order-number__cell">
<span class="order-number__text">
Bestellung {{ order_name }}
</span>
</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>
{% if order_status_url %}
<table class="row actions">
<tr>
<td class="empty-line"> </td>
</tr>
<tr>
<td class="actions__cell">
<table class="button-container" role="presentation">
<tr>
<td class="button__cell">
<a href="{{ order_status_url }}" class="button__text">Bestellung online ansehen</a>
</td>
<td class="button__cell">
<a href="{{ fulfillment.tracking_url }}" class="button__text">Sendung verfolgen</a>
</td>
<td class="button__cell">
<a href="SPACER" class="button__text">Rechnung herunterladen</a>
</td>
</tr>
</table>
</td>
</tr>
<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">Bestellung online ansehen</a></td>
</tr>
</table>
{% if shop.url %}
<table class="link secondary-action-cell">
</table>
{% endif %}
</td>
</tr>
</table>
{% 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">Zu unserem Shop</a></td>
</tr>
</table>
</td>
</tr>
</table>
{% endif %}
{% endif %}
{% if fulfillment.tracking_numbers.size > 0 %}
<p class="disclaimer__subtext">
<br/>
{% if fulfillment.tracking_numbers.size == 1 and fulfillment.tracking_company and fulfillment.tracking_url %}
{{ fulfillment.tracking_company }} Trackingnummer: <a href="{{ fulfillment.tracking_url }}">{{ fulfillment.tracking_numbers.first }}</a>
{% elsif fulfillment.tracking_numbers.size == 1 %}
Trackingnummer: {{ fulfillment.tracking_numbers.first }}
{% else %}
{{ fulfillment.tracking_company }} trackingnummern:<br />
{% for tracking_number in fulfillment.tracking_numbers %}
{% if fulfillment.tracking_urls[forloop.index0] %}
<a href="{{ fulfillment.tracking_urls[forloop.index0] }}">
{{ tracking_number }}
</a>
{% else %}
{{ tracking_number }}
{% endif %}
<br/>
{% endfor %}
{% endif %}
</p>
{% endif %}
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row section">
<tr>
<td class="section__cell">
<center>
<table class="container">
<tr>
<td>
<h3>Artikel in dieser Lieferung</h3>
</td>
</tr>
</table>
<table class="container">
<tr>
<td>
<table class="row">
{% for line in fulfillment.fulfillment_line_items %}
<tr class="order-list__item">
<td class="order-list__item__cell">
<table>
<td>
{% if line.line_item.image %}
<img src="{{ line.line_item | 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.line_item.product.title %}
{% assign line_title = line.line_item.product.title %}
{% else %}
{% assign line_title = line.line_item.title %}
{% endif %}
{% if line.quantity < line.line_item.quantity %}
{% capture line_display %} {{ line.quantity }} of {{ line.line_item.quantity }} {% endcapture %}
{% else %}
{% assign line_display = line.line_item.quantity %}
{% endif %}
<span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>
{% if line.line_item.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ line.line_item.variant.title }}</span><br/>
{% endif %}
{% if line.line_item.selling_plan_allocation %}
<span class="order-list__item-variant">{{ line.line_item.selling_plan_allocation.selling_plan.name }}</span><br/>
{% endif %}
{% if line.line_item.refunded_quantity > 0 %}
<span class="order-list__item-refunded">Zurückerstattet</span>
{% endif %}
{% if line.line_item.discount_allocations %}
{% for discount_allocation in line.line_item.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">Falls du Fragen hast, kontaktiere uns unter <a href="SPACER</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>
Community Blog Articles
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025
Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025
Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025