Customizing packing slips

You can customize the template of your packing slips. Changing the template allows you to add your own branding and change the look and feel of the packing slip.

Change store address

If you want to edit or change your store address, then you can go to Settings > General and edit your store information.

If you want to change just the address on your packing slips, then follow the steps below.

Steps:

1. From your Shopify admin, go to Settings > Shipping and delivery.

2. In the Packing slips section, click Edit.

3. Find the {{ shop_address.summary }} Liquid variable that references your store address. If you can't find this variable, then try the following one:

{{ shop_address.address1 }}, {{ shop_address.city }}, {{ shop_address.province_code }}, {{ shop_address.zip }}, {{ shop_address.country }}

1. Highlight this code, and delete it.
2. Type the address you want to have on your packing slips in this empty space. For example, you could type your address to look like this: 123 Example Street, New York, NY, 10000, United States
3. Click Preview template to see your changes.
4. Click Save.

Remove product images

You can remove the images of your products that appear next to the product titles on your packing slips.

Steps:

1. From your Shopify admin, go to Settings > Shipping and delivery.

2. In the Packing slips section, click Edit.

3. Find the following Liquid variables that reference your product images:

{% if line_item.image != blank %}
       <div class="flex-line-item-img">
         <div class="aspect-ratio aspect-ratio-square" style="width: {{ desired_image_size }}px; height: {{ desired_image_size }}px;">
           {{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }}
         </div>
       </div>
       {% endif %}

1. Highlight this code, and delete it.
2. Click Preview template to see your changes.
3. Click Save.

Edit logo

Before you add your store logo to your packing slips, you need to upload your logo to your Shopify admin. You need the URL that is assigned to your file to use on your packing slips.

After you upload your logo to your store, you can add your logo and remove your store name, add your logo above your store name, or add your logo next to your store name.

Steps:

1. From your Shopify admin, go to Content > Files.
2. Click Upload files.
3. Select and upload your store logo from your device.
4. Copy the file URL when the upload is complete.

Add logo and remove store name

You can remove your store name and replace it with your store logo at the top of your packing slips.

Steps:

1. From your Shopify admin, go to Settings > Shipping and delivery.

2. In the Packing slips section, click Edit.

3. Find the following code that references your store name:

<p class="to-uppercase">
  {{ shop.name }}
</p>

1. Highlight this code, and delete it.
2. In the space you have created, write the following code, and paste the copied URL where indicated:

<img src="PASTE FILE URL HERE" style="width: 60px; height: 60px;">

1. Select Preview template to see your changes.
2. Click Save.

Add logo above store name

If you want to add your logo above your store name at the top of your packing slips, then follow the steps below.

Steps:

1. From your Shopify admin, go to Settings > Shipping and delivery.

2. In the Packing slips section, click Edit.

3. Find the following Liquid variable that references your store name, and add a line break between the two lines:

<div class="shop-title">
      |
      <p class="to-uppercase">

1. In the space you have created, write the following code, and paste the copied URL where indicated:

<img src="PASTE FILE URL HERE" style="width: 60px; height: 60px;">
<br>

1. Select Preview template to see your changes.
2. Click Save.

Add logo next to store name

If you want to add your logo next to your store name at the top of your packing slips, then follow the steps below.

Steps:

1. From your Shopify admin, go to Settings > Shipping and delivery.

2. In the Packing slips section, click Edit.

3. Find the following Liquid variable that references your store name:

<p class="to-uppercase">
{{ shop.name }}
</p>

1. Highlight this code, and delete it.
2. In the space you have created, write the following code, and paste the copied URL where indicated:

<img src="PASTE FILE URL HERE" style="width: 60px; height: 60px;">
<span class="to-uppercase">
  {{ shop.name }}
</span>

1. Find the following Liquid variables:

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

1. Add a new line at the end of the variables listed above, and paste the following code:

.shop-title img {
 vertical-align: middle;
}

.shop-title span {
 vertical-align: middle;
}

1. Select Preview template to see your changes.
2. Click Save.

Style packing slips using CSS

Tip

Styling your templates with CSS requires advanced knowledge of HTML and CSS.

You can customize your packing slip using the CSS files that you upload to Shopify. CSS files hosted outside of Shopify won't be properly rendered.

Steps:

1. From your Shopify admin, go to Content > Files.

2. Click Upload files.

3. Select and upload your CSS file.

4. Copy the file URL when the upload is complete.

5. Include the following code:

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.shopify.com/path_to_file/styles.css"
>