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 Documents section, click Packing slip template.

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 }}

4. Highlight this code, and delete it.
5. 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
6. Click Preview template to see your changes.
7. Click Save.

Remove product images

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

Steps:

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

2. In the Documents section, click Packing slip template.

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 %}

4. Highlight this code, and delete it.
5. Click Preview template to preview your changes.
6. Click Save.

Edit logo

Before you add your store logo to your packing slips, you need to upload your logo to your Shopify admin. After uploading note the name of the uploaded file in order to use it later in the packing slip template.

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. Note the file name when the upload is complete, including the file extension (for example, .png, or .jpg).

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 Documents section, click Packing slip template.

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

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

4. Highlight this code, and delete it.
5. In the space you have created, write the following code using the file name previously uploaded:

{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}

The file_img_url filter generates the URL for the uploaded file with the specified size, and the img_tag filter creates an HTML image tag with the alt text you provide.

For example if the uploaded file is shop_logo.png the corresponding liquid code will be :

{{ 'shop_logo.png' | file_img_url: 'small' | img_tag: 'Logo' }}

Caution

The file name must match exactly, including case sensitivity. For example, Shop_Logo.png is different from shop_logo.png.

6. Select Preview template to preview your changes.
7. 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 Documents section, click Packing slip template.

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">

4. In the space you have created, write the following code using the file name you uploaded earlier (for example, shop_logo.png):

{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}
<br>

5. Select Preview template to preview your changes.
6. 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 Documents section, click Packing slip template.

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

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

4. Highlight this code, and delete it.
5. In the space you have created, write the following code using the file name you uploaded earlier (for example, shop_logo.png):

{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}
<span class="to-uppercase">
  {{ shop.name }}
</span>

6. Find the following Liquid variables:

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

7. 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;
}

8. Select Preview template to preview your changes.
9. 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"
>