I changed my image size in packing slip template and lost my images completely

Store Design

Topic summary

A user modified the image size parameter in their packing slip template from 58% to 100%, which caused product thumbnails to disappear completely from printed packing slips.

Troubleshooting attempts:

  • Reverting the size back to 58% did not restore the images
  • Switching to the default theme template also failed to bring back thumbnails
  • Images remain missing despite multiple restoration attempts

Current situation:
The user shared their current template code (with their modification highlighted) seeking help to identify what’s causing the thumbnail loss. The template appears to contain some corrupted or reversed text in portions of the CSS styling code, which may be contributing to the rendering issue.

One community member began responding with a recommendation about styling the CSS with images, but their response was cut off. The issue remains unresolved, with the user still unable to display product thumbnails on packing slips.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

Calling all code experts! :slightly_smiling_face:

I changed my desired image size in my packing slip template from %58 to %100.

The next day my thumbnails were missing completely.

I reverted back to %58, no change.

I reverted back to the theme default template, and our packing slips are still printing without the thumbnails.

I replaced the default with my txt code that includes all our modifications, but I’m wondering if anyone out there can help me identify the missing piece? I highlighted our change in green.

Thank you in advance. :slightly_smiling_face:

Here is my current template:

{{ shop.name }}

Order {{ order.name }}

{{ order.created_at | date: "%B %e, %Y" }}

Ship to

{% if shipping_address != blank %} {{ shipping_address.name }} {% if shipping_address.company != blank %}
{{ shipping_address.company }} {% endif %}
{{ shipping_address.address1 }} {% if shipping_address.address2 != blank %}
{{ shipping_address.address2 }} {% endif %} {% if shipping_address.city_province_zip != blank %}
{{ shipping_address.city_province_zip }} {% endif %}
{{ shipping_address.country }} {% else %} No shipping address {% endif %}

Bill to

{% if billing_address != blank %} {{ billing_address.name }} {% if billing_address.company != blank %}
{{ billing_address.company }} {% endif %}
{{ billing_address.address1 }} {% if billing_address.address2 != blank %}
{{ billing_address.address2 }} {% endif %} {% if billing_address.city_province_zip != blank %}
{{ billing_address.city_province_zip }} {% endif %}
{{ billing_address.country }}
{{ billing_address.phone }} {% else %} No billing address {% endif %}
{{ customer.email }}

Items

Quantity

{% comment %}
To adjust the size of line item images, change desired_image_size.
The other variables make sure your images print at high quality.
{% endcomment %}
{% assign desired_image_size = %100}
{% assign resolution_adjusted_size = desired_image_size | times: 300 | divided_by: 72 | ceil %}
{% capture effective_image_dimensions %}
{{ resolution_adjusted_size }}x{{ resolution_adjusted_size }}
{% endcapture %}

{% for line_item in line_items_in_shipment %}

{% if line_item.image != blank %}
{{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }}
{% endif %}

{{ line_item.title }} {% if line_item.variant_title != blank %} {{ line_item.variant_title }} {% endif %} {% if line_item.sku != blank %} {{ line_item.sku }} {% endif %}

{{ line_item.shipping_quantity }} of {{ line_item.quantity }}

{% endfor %}
{% unless includes_all_line_items_in_order %}

There are other items from your order not included in this shipment.

{% endunless %}
{% if order.note != blank %}

Notes

{{ order.note }}

{% endif %}

Thank you for shopping with us!

And try out the new Chef Equation App! Calculating Costs, Creating Quote Sheets, and Magically Planning Your Baking Weeks! app.chefequation.com

{{ shop.name }}
{{ shop_address.address1 }}, {{ shop_address.city }}, {{ shop_address.province_code }}, {{ shop_address.zip }}, {{ shop_address.country }}
{{ shop.email }}
{{ shop.domain }}

body { font-size: 15px; }
  • {
    box-sizing: border-box;
    }

.wrapper {
width: 831px;
margin: auto;
padding: 4em;
font-family: “Noto Sans”, sans-serif;
font-weight: 250;
}

.header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
}

.header p {
margin: 0;
}

.shop-title {
-webkit-box-flex: 6;
-webkit-flex: 6;
flex: 6;
font-size: 1.9em;
}

.order-title {
-webkit-box-flex: 4;
-webkit-flex: 4;
flex: 4;
}

.customer-addresses {
width: 100%;
display: inline-block;
margin: 2em 0;
}

.address-detail {
margin: 0.7em 0 0;
line-height: 1.5;
}

.subtitle-bold {
font-weight: bold;
margin: 0;
font-size: 0.85em;
}

.to-uppercase {
text-transform: uppercase;
}

.text-align-right {
text-align: right;
}

.shipping-address {
float: left;
min-width: 18em;
max-width: 50%;
}

.billing-address {
padding-left: 20em;
min-width: 18em;
}

.order-container {
padding: 0 0.7em;
}

.order-container-header {
display: inline-block;
width: 100%;
margin-top: 1.4em;
}

.order-container-header-left-content {
float: left;
}

.order-container-header-right-content {
float: right;
}

.flex-line-item {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: center;
margin: 1.4em 0;
page-break-inside: avoid;
}

.flex-line-item-img {
margin-right: 1.4em;
min-width: {{ desired_image_size }}px;
}

.flex-line-item-description {
-webkit-box-flex: 7;
-webkit-flex: 7;
flex: 7;
}

.line-item-description-line {
display: block;
}

.flex-line-item-description p {
margin: 0;
line-height: 1.5;
}

.flex-line-item-quantity {
-webkit-box-flex: 3;
-webkit-flex: 3;
flex: 3;
}

.subdued-separator {
height: 0.07em;
border: none;
color: lightgray;
background-color: lightgray;
margin: 0;
}

.missing-line-items-text {
margin: 1.4em 0;
padding: 0 0.7em;
}

.notes {
margin-top: 2em;
}

.notes p {
margin-bottom: 0;
}

.notes .notes-details {
margin-top: 0.7em;
}

.footer {
margin-top: 2em;
text-align: center;
line-height: 1.5;
}

.footer p {
margin: 0;
margin-bottom: 1.4em;
}

hr {
height: 0.14em;
border: none;
color: black;
background-color: black;
margin: 0;
}

.aspect-ratio {
position: relative;
display: block;
background: #fafbfc;
padding: 0;
}

.aspect-ratio::before {
z-index: 1;
content: “”;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid rgba(195,207,216,0.3);
}

.aspect-ratio–square {
width: 100%;
padding-bottom: 100%;
}

.aspect-ratio__content {
position: absolute;
max-width: 100%;
max-height: 100%;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}

2

I would recommend styling your image with CSS