Table alignment in packing slip

hamdykp · ‎06-16-2025

Hi see attached. How do I make the headings of each column correctly aligned with the information in that column? As you can see item which is the item name is not over the name, same with the barcode, sku and price. Also, how can I space the columns a bit as they are all stuck together?

I'm using the "Order Printer" app by Shopify - https://apps.shopify.com/shopify-order-printer

Lastly, you can see on the packing slip on the button left it has this URL -

https://admin.shopify.com/store/wjhmne-yw/orders?start=MQ%3D%3D

Can we remove that?

Thanks in advanced!

hamdykp · ‎06-17-2025

hi and thanks for taking the time to reply. this is the code of the template at the moment:

<h1>Packing Slip</h1>
<img decoding="async" src="https://app.ipacky.com/App/Barcode?barcodeData={{ order.order_name | url_encode }}&barcodeType=CODE128B" width="100px" height="20px">
<div class="address">
<p style="text-align: right; margin: 0;">
Order {{ order.order_name }}<br />
{% if order.po_number %}PO # {{ order.po_number }}<br />{% endif %}
{{ order.created_at | date: "%B %e, %Y" }}
</p>
</div>
</div>
<div class="columns" style="margin-top: 1.5em;">
<div class="address">
<strong>From</strong><br/>
{{ shop.name }}<br/>
{{ shop.address | format_address }}
</div>
{% if order.shipping_address %}
<div class="address">
<strong>Ship to</strong>
{{ order.shipping_address | format_address }}
<h2>{{ order.shipping_method.title }}</h2>
</div>
{% endif %}
</div>
<hr />
<h2>Order Details</h2>
<table class=\"table-tabular\" style=\"margin: 1em 0 0 0;\">
<thead>
<tr>
<th style=\"width: 15%; text-align: left;\">Qty</th>
<th style=\"width: 15%; text-align: left;\">Item</th>
<th style=\"width: 40%; text-align: left;\">Barcode</th>
<th style=\"width: 15%; text-align: left;\">SKU</th>
<th style=\"width: 15%; text-align: left;\">Price</th>

</tr>
</thead>
<tbody>
{% for line_item in order.line_items %}
<tr>
<td style=\"text-align: left;\">{{ line_item.quantity }}</td>
<td style=\"text-align: left;\">
{% if line_item.product.featured_image %}
{{ line_item.product.featured_image | product_img_url: '150x150' | img_tag }}
{% endif %}
<td style=\"text-align: left;">{{ line_item.title }}</td>
<td style=\"text-align: left;\">{{ line_item.variant.barcode }}</td>
<td style=\"width: 40%; text-align: left;\">{{ line_item.sku}}</td>
<td style=\"width: 40%; text-align: left;\">{{ line_item.price | money }}</td>

</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>