Configure Printable Pack Slips for assign items to parcels

Get Started
Functionality
Learning
Extension
Dev Tooling
APIs
Releases

How-to Guide

Author:

Yulia Andreyanova

Changed on:

15 May 2025

Key Points

The Pack Slips can be customized using an HTML template.
This guide outlines the setup and fragment modifications required for generated PDF customization.

Prerequisites

Retailer Settings

Users, Roles, and Permissions

Settings Creation and Editing Mutations

Steps

Define the HTML Structure

Start by defining the basic HTML structure for your document. A base template is available for you to work with, which can be customized using your preferred HTML editor to match your specific layout requirements.

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>
7      Pack Slip - {{#if (eq fulfilmentById.order.type 'HD')}} Home Delivery
8      {{else}} {{#if (eq fulfilmentById.order.type 'CC')}} Click & Collect
9      {{else}} {{fulfilmentById.order.type}} {{/if}} {{/if}}
10    </title>
11    <style type="text/css">
12      * {
13        margin: 0;
14        padding: 0;
15        text-indent: 0;
16      }
17      body {
18        font-family: "Lato", sans-serif;
19      }
20      hr {
21        border-top: 1px solid black;
22      }
23      h1 {
24        font-size: 24px;
25      }
26      h2 {
27        font-size: 20px;
28      }
29      body {
30        font-size: 16px;
31      }
32      .t2 {
33        font-size: 12px;
34      }
35      h1,
36      .t1 th,
37      .section-title {
38        font-weight: 700;
39      }
40      h2 {
41        font-weight: 500;
42      }
43      body {
44        font-weight: 400;
45      }
46      h1 {
47        line-height: 28.8px;
48      }
49      .t1 th {
50        line-height: 26px;
51      }
52      h2 {
53        line-height: 24px;
54      }
55      span.deliver-to {
56        line-height: 19.2px;
57      }
58      h2 {
59        margin-top: 10px;
60        margin-bottom: 29px;
61      }
62      p.deliver-to,
63      .t1,
64      .section-title-row {
65        margin-top: 24px;
66      }
67      span.deliver-to {
68        margin-bottom: 16px;
69      }
70      span.deliver-to:last-of-type {
71        margin-bottom: 24px;
72      }
73      .section-title-row {
74        padding: 7px 16px 6px 16px;
75      }
76      body {
77        padding: 35px 44px 35px 44px;
78      }
79      .t1 th {
80        padding-bottom: 16px;
81      }
82      .t1 td {
83        padding-bottom: 8px;
84      }
85      .t2 th,
86      .t2 td {
87        padding-top: 9px;
88        padding-bottom: 9px;
89      }
90      .t2 th:first-child,
91      .t2 td:first-child {
92        padding-left: 16px;
93      }
94      .t2 th:last-child,
95      .t2 td:last-child {
96        padding-right: 20px;
97      }
98      .t1,
99      .t2 {
100        width: 100%;
101        border-collapse: collapse;
102        text-align: left;
103      }
104      .section-title-row {
105        background-color: #d7d8d9;
106      }
107      span.deliver-to {
108        display: block;
109      }
110      .t2 tr {
111        border-bottom: 1px solid #000;
112      }
113      .t2 th:last-child,
114      .t2 td:last-child {
115        text-align: right;
116      }
117      .section-title {
118        text-transform: uppercase;
119      }
120      @media print {
121        #pagebreak {
122          float: none;
123          break-after: page;
124        }
125      }
126    </style>
127  </head>
128  <body>
129    {{#each fulfilmentById.articles.edges}}
130    <h1>Pack Slip</h1>
131    <h2>
132      {{#if (eq ../fulfilmentById.order.type 'HD')}} Home Delivery {{else}}{{#if
133      (eq ../fulfilmentById.order.type 'CC')}}Click & Collect {{else}}
134      {{../fulfilmentById.order.type}} {{/if}} {{/if}}
135    </h2>
136    <hr />
137    <p class="deliver-to">
138      <span class="deliver-to">
139        {{../fulfilmentById.order.customer.firstName}}
140        {{../fulfilmentById.order.customer.lastName}}
141      </span>
142      <span class="deliver-to"
143        >{{../fulfilmentById.order.customer.primaryEmail}}</span
144      >
145      <span class="deliver-to"
146        >{{../fulfilmentById.order.customer.primaryPhone}}</span
147      >
148      <span class="deliver-to">
149        {{../fulfilmentById.toAddress.street}}
150        {{../fulfilmentById.toAddress.street2}}<br />
151        {{../fulfilmentById.toAddress.city}}
152        {{../fulfilmentById.toAddress.state}}
153        {{../fulfilmentById.toAddress.postcode}}<br />
154        {{../fulfilmentById.toAddress.country}}<br />
155      </span>
156    </p>
157    <hr />
158    <table cellspacing="0" class="t1">
159      <thead>
160        <tr>
161          <th>Order Ref</th>
162          <th>Fulfilment Id</th>
163          <th>Parcel</th>
164          <th>Fulfilment Type</th>
165        </tr>
166      </thead>
167      <tbody>
168        <tr>
169          <td>{{../fulfilmentById.order.ref}}</td>
170          <td>{{../fulfilmentById.id}}</td>
171          <td>
172            {{add @index 1}} of {{../fulfilmentById.articles.edges.length}}
173          </td>
174          <td>{{../fulfilmentById.type}}</td>
175        </tr>
176      </tbody>
177    </table>
178    <section>
179      <div class="section-title-row">
180        <span class="section-title">parcel</span>
181        <span> - ({{uppercase node.name}}, {{node.weight}} KG) </span>
182      </div>
183      <table cellspacing="0" class="t2">
184        <thead>
185          <tr>
186            <th>Product Description</th>
187            <th>Unit Price</th>
188            <th>Quantity</th>
189          </tr>
190        </thead>
191        <tbody>
192          {{#each node.items.edges}}
193          <tr>
194            <td>
195              {{node.orderItem.product.ref}}, {{node.orderItem.product.name}}
196            </td>
197            <td>{{currency node.orderItem.price node.orderItem.currency}}</td>
198            <td>{{node.quantity}}</td>
199          </tr>
200          {{/each}}
201        </tbody>
202      </table>
203    </section>
204    <section>
205      <div class="section-title-row">
206        <span class="section-title"> return information </span>
207      </div>
208      <table cellspacing="0" class="t2">
209        <tr>
210          <th></th>
211        </tr>
212      </table>
213    </section>
214    <section id="pagebreak">
215      <div class="section-title-row">
216        <span class="section-title"> contact us </span>
217      </div>
218      <table cellspacing="0" class="t2">
219        <thead>
220          <tr>
221            <th>Phone: {{../fulfilmentById.order.retailer.supportPhone}}</th>
222            <th>Email: {{../fulfilmentById.order.retailer.supportEmail}}</th>
223          </tr>
224        </thead>
225      </table>
226    </section>
227    {{/each}}
228  </body>
229</html>

Configure the Page Query in the Pack Fragment.

To populate the Pack Slip with the necessary details, you need to define the required fields within the page query of the pack fragment. Here's an example:

1query fulfilmentById($id: ID!) {
2  fulfilmentById(id: $id) {
3    id
4    type
5    order {
6      customer {
7        firstName
8        lastName
9        primaryEmail
10        primaryPhone
11      }
12      retailer {
13        supportPhone
14        supportEmail
15      }
16      type
17      ref
18    }
19    toAddress {
20      street
21      street2
22      city
23      state
24      postcode
25      country
26    }
27    articles {
28      edges {
29        node {
30          name
31          weight
32          items {
33            edges {
34              node {
35                quantity
36                orderItem {
37                  price
38                  currency
39                  product {
40                    ... on StandardProduct {
41                      ref
42                      name
43                    }
44                    ... on VariantProduct {
45                      ref
46                      name
47                    }
48                    ... on GroupProduct {
49                      ref
50                      name
51                    }
52                  }
53                }
54              }
55            }
56          }
57        }
58      }
59    }
60  }
61}

Add the Page Break Property

To divide the content into separate pages when printing, apply the `break-after` property in your CSS:

1@media print {
2#pagebreak {
3    float:none;
4    break-after: page; }
5}

This ensures that the content breaks correctly across pages when printed.

Add the Supported Fields

When iterating over an array, you can use the following notation to loop through the data:

1{{#each <field>}}
2  ... iteration happens here...
3{{/each}}

Here’s an example of how to switch context when accessing different data levels:

1<body>
2  {{#each fulfilmentById.articles.edges}}
3    <div class="section-title-row">
4      <span class="section-title">parcel</span>
5      <span> - ({{uppercase node.name}}, {{node.weight}} KG) </span> 
6    </div>
7    ...
8    <span class="deliver-to">
9      {{../fulfilmentById.toAddress.street}} <!-- if we need to display information from another part of data tree - we can switch the level with "../" notaion  -->
10      {{../fulfilmentById.toAddress.street2}}<br /> <!-- here we are swithcing from fulfilmentById.articles to fulfilmentById.toAddress with ../   -->
11      {{../fulfilmentById.toAddress.city}}
12      {{../fulfilmentById.toAddress.state}}
13      {{../fulfilmentById.toAddress.postcode}}<br />
14      {{../fulfilmentById.toAddress.country}}<br />
15    </span>
16    ...
17  {{/each}}
18</body>

Create a Setting 'fc.store.summary.print.pack.slip'

Define the setting for storing your HTML template. Here's how you can do it:

Name	fc.store.summary.print.pack.slip
Value type	`LOB`
LOB value	`<..The HTML template, from Step 1..>`
Context	`RETAILER -or- ACCOUNT`
Context ID	`<RetailerID> -or- 0`

This configuration sets up the template for later use.

Related content

Enable Store Associates to assign Items to Parcels

Edited 168 days ago

Yulia Andreyanova

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>
7      Pack Slip - {{#if (eq fulfilmentById.order.type 'HD')}} Home Delivery
8      {{else}} {{#if (eq fulfilmentById.order.type 'CC')}} Click & Collect
9      {{else}} {{fulfilmentById.order.type}} {{/if}} {{/if}}
10    </title>
11    <style type="text/css">
12      * {
13        margin: 0;
14        padding: 0;
15        text-indent: 0;
16      }
17      body {
18        font-family: "Lato", sans-serif;
19      }
20      hr {
21        border-top: 1px solid black;
22      }
23      h1 {
24        font-size: 24px;
25      }
26      h2 {
27        font-size: 20px;
28      }
29      body {
30        font-size: 16px;
31      }
32      .t2 {
33        font-size: 12px;
34      }
35      h1,
36      .t1 th,
37      .section-title {
38        font-weight: 700;
39      }
40      h2 {
41        font-weight: 500;
42      }
43      body {
44        font-weight: 400;
45      }
46      h1 {
47        line-height: 28.8px;
48      }
49      .t1 th {
50        line-height: 26px;
51      }
52      h2 {
53        line-height: 24px;
54      }
55      span.deliver-to {
56        line-height: 19.2px;
57      }
58      h2 {
59        margin-top: 10px;
60        margin-bottom: 29px;
61      }
62      p.deliver-to,
63      .t1,
64      .section-title-row {
65        margin-top: 24px;
66      }
67      span.deliver-to {
68        margin-bottom: 16px;
69      }
70      span.deliver-to:last-of-type {
71        margin-bottom: 24px;
72      }
73      .section-title-row {
74        padding: 7px 16px 6px 16px;
75      }
76      body {
77        padding: 35px 44px 35px 44px;
78      }
79      .t1 th {
80        padding-bottom: 16px;
81      }
82      .t1 td {
83        padding-bottom: 8px;
84      }
85      .t2 th,
86      .t2 td {
87        padding-top: 9px;
88        padding-bottom: 9px;
89      }
90      .t2 th:first-child,
91      .t2 td:first-child {
92        padding-left: 16px;
93      }
94      .t2 th:last-child,
95      .t2 td:last-child {
96        padding-right: 20px;
97      }
98      .t1,
99      .t2 {
100        width: 100%;
101        border-collapse: collapse;
102        text-align: left;
103      }
104      .section-title-row {
105        background-color: #d7d8d9;
106      }
107      span.deliver-to {
108        display: block;
109      }
110      .t2 tr {
111        border-bottom: 1px solid #000;
112      }
113      .t2 th:last-child,
114      .t2 td:last-child {
115        text-align: right;
116      }
117      .section-title {
118        text-transform: uppercase;
119      }
120      @media print {
121        #pagebreak {
122          float: none;
123          break-after: page;
124        }
125      }
126    </style>
127  </head>
128  <body>
129    {{#each fulfilmentById.articles.edges}}
130    <h1>Pack Slip</h1>
131    <h2>
132      {{#if (eq ../fulfilmentById.order.type 'HD')}} Home Delivery {{else}}{{#if
133      (eq ../fulfilmentById.order.type 'CC')}}Click & Collect {{else}}
134      {{../fulfilmentById.order.type}} {{/if}} {{/if}}
135    </h2>
136    <hr />
137    <p class="deliver-to">
138      <span class="deliver-to">
139        {{../fulfilmentById.order.customer.firstName}}
140        {{../fulfilmentById.order.customer.lastName}}
141      </span>
142      <span class="deliver-to"
143        >{{../fulfilmentById.order.customer.primaryEmail}}</span
144      >
145      <span class="deliver-to"
146        >{{../fulfilmentById.order.customer.primaryPhone}}</span
147      >
148      <span class="deliver-to">
149        {{../fulfilmentById.toAddress.street}}
150        {{../fulfilmentById.toAddress.street2}}<br />
151        {{../fulfilmentById.toAddress.city}}
152        {{../fulfilmentById.toAddress.state}}
153        {{../fulfilmentById.toAddress.postcode}}<br />
154        {{../fulfilmentById.toAddress.country}}<br />
155      </span>
156    </p>
157    <hr />
158    <table cellspacing="0" class="t1">
159      <thead>
160        <tr>
161          <th>Order Ref</th>
162          <th>Fulfilment Id</th>
163          <th>Parcel</th>
164          <th>Fulfilment Type</th>
165        </tr>
166      </thead>
167      <tbody>
168        <tr>
169          <td>{{../fulfilmentById.order.ref}}</td>
170          <td>{{../fulfilmentById.id}}</td>
171          <td>
172            {{add @index 1}} of {{../fulfilmentById.articles.edges.length}}
173          </td>
174          <td>{{../fulfilmentById.type}}</td>
175        </tr>
176      </tbody>
177    </table>
178    <section>
179      <div class="section-title-row">
180        <span class="section-title">parcel</span>
181        <span> - ({{uppercase node.name}}, {{node.weight}} KG) </span>
182      </div>
183      <table cellspacing="0" class="t2">
184        <thead>
185          <tr>
186            <th>Product Description</th>
187            <th>Unit Price</th>
188            <th>Quantity</th>
189          </tr>
190        </thead>
191        <tbody>
192          {{#each node.items.edges}}
193          <tr>
194            <td>
195              {{node.orderItem.product.ref}}, {{node.orderItem.product.name}}
196            </td>
197            <td>{{currency node.orderItem.price node.orderItem.currency}}</td>
198            <td>{{node.quantity}}</td>
199          </tr>
200          {{/each}}
201        </tbody>
202      </table>
203    </section>
204    <section>
205      <div class="section-title-row">
206        <span class="section-title"> return information </span>
207      </div>
208      <table cellspacing="0" class="t2">
209        <tr>
210          <th></th>
211        </tr>
212      </table>
213    </section>
214    <section id="pagebreak">
215      <div class="section-title-row">
216        <span class="section-title"> contact us </span>
217      </div>
218      <table cellspacing="0" class="t2">
219        <thead>
220          <tr>
221            <th>Phone: {{../fulfilmentById.order.retailer.supportPhone}}</th>
222            <th>Email: {{../fulfilmentById.order.retailer.supportEmail}}</th>
223          </tr>
224        </thead>
225      </table>
226    </section>
227    {{/each}}
228  </body>
229</html>

Configure Printable Pack Slips for assign items to parcels

Key Points

Prerequisites

Retailer Settings

Users, Roles, and Permissions

Settings Creation and Editing Mutations

Steps

Define the HTML Structure

Configure the Page Query in the Pack Fragment.

Add the Page Break Property

Add the Supported Fields

Create a Setting 'fc.store.summary.print.pack.slip'

Related content

Enable Store Associates to assign Items to Parcels

Yulia Andreyanova

Building Blocks

By Type

Helpful Resources

Quick Links