Create a Custom Printable Pack Slip

Get Started
Functionality
Learning
Extension
Dev Tooling
APIs
Releases

How-to Guide

Author:

Fluent Commerce

Changed on:

14 May 2025

Key Points

The Pack Slip on Fluent Store can be customised via an HTML template.
This guide will take you through the setup and fragment changes required to customise the Pack Slip.

Prerequisites

Settings Overview

Settings Creation and Editing Mutations

Steps

Overview

To aid with the packing process, Users can print a pack slip which details the items required to complete the fulfilments. Customisable via a setting, the custom pack slip allows for developers to define their own fields and layouts to create a more efficient packing process.

Enabling the Custom Pack Slip

This Custom Pack Slip setting can only be enabled if the `WAVE_RUBIXIFIED` setting is set to true. For more information, see Retailer Settings, then make sure the role has GraphQL Permissions.

Configure the page query in the Waves fragment

Add the required fields in the page query of the waves fragment to populate the details on the custom pack slip.The sample configured page query is as follows:

1"data": {
2    "query": "query ($id: ID!) {  waveById(id: $id) {    id    ref    status    location {      id      ref    }    fulfilments {      edges {        node {          id          ref          status          fromAddress {            id            ref          }          toAddress {            id            ref     street street2 city state postcode country  }          items {            edges {              node {                ref                filledQuantity                rejectedQuantity                requestedQuantity              }            }          }          order {            id            ref            type            status            fulfilmentChoice {              deliveryType            }            customer {              firstName              lastName              primaryEmail              primaryPhone            }          }          articles {            edges {              node {                ref                consignmentArticles(first: 1) {                  edges {                    node {                      consignment {                        id                        ref                        carrier {                          name                        }                        trackingLabel                        status                        updatedOn                      }                    }                  }                }              }            }          }        }      }    }  }}",
3    "variables": {
4        "id": "{{params.id}}"
5    }
6}

Create a setting fc.store.print.packslip

Name	fc.store.print.packslip
Value type	`LOB`
LOB value	`<..The HTML template example provide below>`
Context	`RETAILER -or- ACCOUNT`
Context ID	`<RetailerID> -or- 0`

There is a base template to get started with. Please use your preferred HTML editor to edit the fields and layout to your desired outcome.

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

Configure the Waves fragment to include the “Custom Pack Slip“ button

If the Waves fragment has not been configured previously then you will first need to get the content of the baseline waves fragment. Otherwise, if you have already configured the waves fragment on your account, then get the content from your account settings instead.Once you have accessed the baseline waves fragment, copy the content into your preferred text editor.Define the following component to the second step of the wizard (PACK stage), just below the component `fc.button.print`

1{
2    "component": "fc.button.print",
3    "props": {
4        "label": "i18n:fc.sf.ui.waves.detail.action.packslip.custom.label",
5        "setting": "fc.store.print.packslip",
6        "behavior":"print"
7    }
8}

Make sure the JSON is validated.

Note

behavior property can take one of the three values:

`print`: Opens the browser's print preview
`preview`: Opens the modal preview with the print button that triggers the browser's print action
`newTab`: Opens the HTML document in a new tab of the browser

Testing the outcome

Once you have successfully updated the waves fragment with the Custom Pack Slip button, now create/ update the waves fragment setting on your account. Manifest documents should be stored as a JSON Setting at the Account context.You can now log on to Fluent Store with your location username and password. Select a Wave in the status "PACK" or Create a new Wave. You should then be able to see the “Custom Pack Slip” button on the PACK step of the Wave. No alt provided

Related content

Enable Store Associates to assign Items to Parcels

Edited 176 days ago

Fluent Commerce

Knowledge Tracks Related To This Topic

Getting Started with Fluent Store

How to enable Returns in Fluent OMS and Fluent Store

Enable Fluent Store Multi-Parcel

Enable Store Associates to select Fulfilments to add to Waves

Customise the Printable Pick List Setting

Create a Custom Printable Pack Slip

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

Create a Custom Printable Pack Slip

Key Points

Prerequisites

Settings Overview

Settings Creation and Editing Mutations

Steps

Configure the page query in the Waves fragment

Create a setting fc.store.print.packslip

Configure the Waves fragment to include the “Custom Pack Slip“ button

Testing the outcome

Related content

Enable Store Associates to assign Items to Parcels

Fluent Commerce

Knowledge Tracks Related To This Topic

Building Blocks

By Type

Helpful Resources

Quick Links