PixelPrinter
From Shopify Wiki
PixelPrinter is a Shopify application for generating invoices, packing slips and other documents related to orders.
Contents |
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:
- An invoice that you can send along with the packing to your customer.
- A packing slip with the recipient's address (and your shop's address as sender).
- 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
Click the EDIT button in the sidebar to start editing the templates. This will display additional links for each template allowing you to update or permanently delete them. You can also create new templates to a maximum of ten in total!
After clicking edit for a template, a dialog will pop up that looks like this:
The templates can be customized via a combination of HTML, CSS and Liquid - analogous to what is used for editing the store's templates or your email notifications.
To get familiar with the syntax check out the template named Variable reference or any of the following links:
- Basics of the Liquid template language
- Liquid variables you can use
- Available filters to modify output from variables
- HTML and CSS introduction (external)
Print dialog
To get a clean printout of your templates make sure to remove the default header and footer in the print dialog of your operating system (it looks different for different browsers):
Internet Explorer
Before (default print dialog in Internet Explorer):
After (clean print dialog in Internet Explorer):
Safari
Saving as PDF
The PixelPrinter application itself doesn't support conversion to PDF, but there are other ways of creating PDF files:
Under Apple OS X you can simply use the built in functionality from the print dialog of your browser.
Microsoft Windows: Unfortunately Windows doesn't ship with a PDF converter, but you can easily install a free utility like PDFCreator. This will add 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 new App Store.
When running the application for the first time, you will be redirected to your store admin, where you have to login (if you haven't already done so). You will then be asked to grant PixelPrinter permission to read data from your store (it needs access to all your orders). This step has to be done only once, after that PixelPrinter is sucessfully installed in your shop!
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:
- 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.
- 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
- It is a great example for other developers on how (and why) to use the Shopify API!
Pixel Printer Template Downloads
If you accidentally delete your templates they can be downloaded and re-added to the application from the master files at git hub.
Invoice: https://github.com/Shopify/pixelprinter/blob/master/db/printing/invoice.liquid
Packing Slip: https://github.com/Shopify/pixelprinter/blob/master/db/printing/packing_slip.liquid
Variable References: https://github.com/Shopify/pixelprinter/blob/master/db/printing/variable_reference.liquid