Introducing PixelPrinter

PixelPrinter is a Shopify application for generating invoices, packing slips and other documents related to orders.

Usage

Basics

When you visit the PixelPrinter application for the first time, it will show three default templates in the sidebar on the left side already created for your convenience:

1. An invoice that you can send along with the packing to your customer.
2. A packing slip with the recipient’s address (and your shop’s address as sender).
3. The variable reference which shows all the available Liquid variables. Utilize it as a reference to help you create your own templates.

The Invoice template is already selected per default. Notice how you see a live preview of every selected template in the center part:

To print all selected templates just click that big green button on the left! This will open the print dialog of your operating system from where you can either directly print the templates or save them to PDF (see below).

Template editing

To start editing the templates click the edit button in the sidebar. This will display additional links for each template that will allow you to edit or permanently delete them. You can also create new templates to a maximum of ten in total!

PixelPrinter in edit mode:

After clicking edit for a template, a dialog will popup that looks like this:

Saving as PDF

The PixelPrinter application itself doesn’t support conversion to PDF (generating a PDF out of arbitrary HTML/CSS code is not trivial and would require either an incredible amount of work or a heavy money investment), but there are other ways of creating PDF files:

If you need to save a template as PDF, we recommend using the built in functionality from the print dialog of your browser (Apple OSX).

Microsoft Windows: Unfortunately Windows doesn’t ship with a PDF converter, but you can easily install a free utility like PrimoPDF (Note: requires Microsoft .NET Framework 2.0). This adds a new virtual printer to which you can send any print job and save it in PDF format.

How to integrate PixelPrinter into your store

Just like any other Shopify application, PixelPrinter will be activated through the app store at
http://apps.shopify.com.

The PixelPrinter application will add a link to the sidebar of an order’s details page in the Shopify admin interface. Clicking that link will take you directly to the order print preview screen in PixelPrinter:

Background

A lot of Shopify customers need the ability to print various documents based on incoming orders. Some want to be able to print a packing slip or an invoice for the customer, others need to store receipts for taxation purposes.

We wanted to make sure the printable documents are fully customizable, very similar to the email templates found in Shopify’s preferences. Instead of packing this functionality directly into Shopify, we decided to implement it as an external application for basically the following reasons:

1. The functionality for template editing and printing required a lot of new code. We want to keep Shopify’s code base as small as possible.
2. Having an external application means we can open source the code, so that other people can improve or modify the app to extend it for further use cases. If you are interested in the source code, you can check it out at: http://github.com/Shopify/pixelprinter
3. It is a great example for other developers on how (and why) to use the Shopify API!

Implementation Details

This is a Rails application built using the shopify_app generator to integrate into Shopify.

TODO

If anyone is interested in extending this application, consider implementing the following functionality:

• Batch printing for multiple orders on the same page
• Automatically send HTML email to customer on incoming orders (requires web hook or other means of notification)