When making packing slips using the “Shipping label” screen the labels come out a different size than when using the normal order screen.
Both were set to print at 4x6 thermal sized. The same template is used for each.
The template I use is set to autoscale to the page, but it doesn’t work in the shipping label screen.
The fact that you can’t scale a print to a 80mm receipt printer (sold by shopify) is a secondary issue.
Template:
<style>
@page {
size: Letter; /* Forces Shopify to use an 8.5x11 PDF */
margin: 0; /* Prevents Shopify from adding extra margins */
}
body {
width: 100%;
max-width: 8in;
height: 11in; /* Forces content to fit within one page */
font-size: 30px; /* Larger default font size */
font-family: sans-serif;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0;
padding: 10px;
box-sizing: border-box;
}
.receipt-container {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.section {
margin-bottom: 3px; /* Adjusted spacing */
}
.title {
text-align: center;
font-size: 50px; /* Larger title */
font-weight: bold;
}
.divider {
border-top: 3px solid black; /* Thicker divider for clarity */
margin: 2px 0;
}
.footer {
text-align: center;
font-size: 30px; /* Larger footer text */
line-height: 1.2;
flex-shrink: 0;
padding-bottom: 0px;
}
.footer-info {
font-size: 30px; /* Larger but still compact */
line-height: 1.2;
}
.header {
display: flex;
justify-content: space-between;
font-size: 30px; /* Larger header */
font-weight: bold;
}
</style>
<div class="receipt-container">
<div class="title">
{{ shop.name | upcase }}
</div>
<hr class="divider">
<div class="header">
<div>Order: {{ order.name }}</div>
<div>Date: {{ order.created_at | date: "%b %d, %Y" }}</div>
</div>
<hr class="divider">
{% if shipping_address != blank %}
<div class="section" style="font-size: 30px;">
<strong>Ship To:</strong><br>
<span style="font-size: 35px; font-weight: bold;">{{ shipping_address.name }}</span><br>
{{ shipping_address.address1 }}{% if shipping_address.address2 != blank %}, {{ shipping_address.address2 }}{% endif %}<br>
{{ shipping_address.city_province_zip }}<br>
{{ shipping_address.country }}
</div>
<hr class="divider">
{% endif %}
<div class="section" style="font-size: 30px;">
<strong>Items:</strong>
</div>
{% for line_item in line_items_in_shipment %}
<div class="section" style="display: flex; justify-content: space-between; font-size: 40px; padding: 4px 0;">
<div>
<strong>{{ line_item.title }}</strong><br>
{% if line_item.variant_title != blank %}
<span style="font-size: 30px;">{{ line_item.variant_title }}</span><br>
{% endif %}
{% if line_item.sku != blank %}
<span style="font-size: 30px;">SKU: {{ line_item.sku }}</span>
{% endif %}
</div>
<div style="text-align: right;">
Qty: {{ line_item.shipping_quantity }}
</div>
</div>
<hr>
{% endfor %}
{% unless includes_all_line_items_in_order %}
<div style="text-align: center; font-size: 30px; margin-top: 8px;">
*** Some items not included in this shipment ***
</div>
<hr class="divider">
{% endunless %}
{% if order.note != blank %}
<div class="section" style="font-size: 30px;">
<strong>Note:</strong><br>
{{ order.note }}
</div>
<hr class="divider">
{% endif %}
<div class="footer">
<div style="text-align: center; font-weight: bold; font-size: 35px;">
Thanks for your purchase!
</div>
<hr class="divider">
<div class="footer-info">
{{ shop_address.city }}, {{ shop_address.province_code }} {{ shop_address.zip }}, {{ shop_address.country }}<br>
{{ shop.email }} | {{ shop.domain }}
</div>
<div>Order: {{ order.name }}</div>
</div>
</div>