How to Customize Packing Slips with Custom CSS

What is the Custom Packing Slip CSS feature?

The Custom Packing Slip CSS feature allows you to fully customize the appearance of your Packing Slips using your own CSS.

This is an advanced feature. To use it effectively, you (or someone on your team) should be familiar with how HTML and CSS work. Otherwise, identifying elements and applying styles may be difficult.

How to add Custom CSS to Packing Slips

To add custom CSS:

1. Go to the Reports page
2. Click on Packing Slips
3. Click Settings
4. Scroll to the bottom to find the Custom Packing Slip CSS section.

You will see a field where you can add your CSS code.

Using the View In Browser button

You will also see the View In Browser button.

This allows you to inspect the Packing Slip’s HTML and identify the class names you can target in your CSS.

⚠️ Important: This preview is only for inspecting elements and class names. It does not represent the final PDF output. In fact, you will notice the Packing Slip shown here does not include your store’s name or information, as it is a generic template meant only for identifying elements. To see how your Packing Slip looks after making adjustments, generate one as usual.

 

Example

We want to target the Total row and make both the label and the value red and bolder. 

To do this, we click View in Browser, inspect the element, and find its class.

In this case, the class is .ps-total-row.ps-grand-total-row, so we apply the following CSS, click Save and print packing slips again. 

We will notice the Total row is now red and bolder.

 

Important Notes

This feature gives you full flexibility over styling, but any changes made via CSS are outside of GoPrep’s control. Incorrect CSS may affect how your Packing Slips render, so we recommend testing your changes carefully before using them in production.

 

 

Don't hesitate to contact GoPrep's Customer Support Team for further assistance.

You can do so by submitting a request or sending an email to [e-mail].