pickPack Quickstart

Most of this is included if you get the Installation & Setup Service

Aims & Preparation

pickPack will produce good-looking output from install, but there are some quick things you can do to step these up a level and brand the PDFs to your business, we'll cover those here.

If you're looking to setup the csv order exports, check the pickPack Setup section.

First out the door, let's get colors matched and logos sharp.

If you haven't installed it yet, follow the Easy Install Guide to get pickPack running.

 

Sizes, Resolutions, and Nudges

Let's say right away that we will be working with points not pixels. As we are creating PDFs, these count as printed paper, which are measured by points, versus screens which are measured in pixels. An average screen display resolution is 72dpi, whereas an average printed resolution is 300dpi. If you measure your logos in pixels or less-than-300dpi, your PDF logos will print blurry.

• In the pickPack settings, when we nudge or move items, a positive number moves the item up or right on the page, and a negative number moves the item left or down.
• If you are changing an actual position, bottom left of the final PDF is 0,0 - eg, 100,200 will move that item 100 points right, and 200 points up.
• To get an idea of page sizes in points, this guy has a great summary.
• If you want to precisely move elements in the PDF, and don't want to do the trial-and-error method, you can load the output PDF into Photoshop, and set the page units to points. If you resize the PDF in that page to match what you see printed, then you can directly see X and Y point positions on the page.

Prepare your Logo

1. Load, into Photoshop or equivalent, the logo image template which came with your extension zipfile > _sample_images/Template-for-header-logo.psd

   If you're making your own (instead of using the template), make sure you set :

   • the dimensions in points, not pixels
   • the dpi at 300dpi
   • the color mode as 'CMYK' (this one is not so important, but is the correct setting to get the best printed color matches).

   

2. Grab a high-res version of your logo, ideally a vector image.
3. Copy that and paste into the template file. You'll need to resize this to fit in the template. If you need to size that logo image _bigger_ then it will come out more blurry than ideal - find a bigger image if possible.

   The standard top logo size is 269 points x 41 points.

4. Save this as a non-interlaced non-transparent png-8 file. (This is unfortunately important or you will generate errors when you produce PDFs.)

Prepare the Colors

1. Go back to your logo image, and use the eyedropper tool in Photoshop. If you don't have Photoshop there are a few free options - eg. imagecolorpicker.net.
2. The aim here is to get the dominant color, so that we can use that in your PDFs. We're aiming at the HEX figure, eg. for grey it'll be about #CCCCCC.
3. If you have 2 dominant colors, great, grab them both. We'll make the darker one the subtitle text color, and the lighter one the horizontal bar background color. (By subtitle/horizontal bar, I mean the line which has eg. Sku, Product Name, Qty)

Applying

1. Find your config page for pickPack SystemConfig > Moogento / pickPack.
2. Let's add the logo images first. These are going to go in the PDF Packing Sheet and PDF Invoice sections, so open those up. Set the option Show logo? > Yes. A new option will appear Logo image. Choose your newly-saved .png file from above for both sections.
3. Now let's set the colors. Head on down the config page until you see the General section.
   • Our first target is the slightly hidden-away Horizontal bars : Background Color section. This is going to be the most dominant color on your PDFs. We have two options here, a dark color with a white (or light) text, or a light color with a darker text on top. The choice is up to you and will probably depend on your logo colors. Paste in the color that you prepared above, or just click the color picker that is built in and choose a new color.
   • Target 2 is the text which will go on top of these bars. Look for Subheadings and either paste in your 2nd color from your logo, or choose a new one. If you're going for white text on a dark background, maybe try 'bold' here. I'd leave the other settings as they are for now - it's best to make changes step-by-step with these things.

Test

Let's see how we did, save that config page, and head to the SalesOrders page.

1. Look for the massaction dropdown menu, top right of the orders grid. You should see the pickPack options in there. Maybe try PDF Packing Sheet so that we can see how the initial setup is looking. Once you've selected that, hit Submit and it should download.

   You should now have great-looking, customised PDFs in Magento!

2. If the colors look off, go back and tweak :) Bear in mind that printed colors can look different to screen colors.

To save money on toner, try using light-greys.

Additional

There are loads of config options for pickPack, but the ones above are the most important to get done first. You can now happily print customer-exciting PDFs, and more importantly, blag to friends.

1. Let's add another important one, your company address. Find the Add company address to header? section, and set to yes.
   • Add in your company address.
   • Save and check the result.
2. Before we celebrate and get a cuppa on the go, let's just check our paper size is set correctly. In PDF Packing Sheet PDF Invoice and General, you'll find a paper-size option. Set the correct one for your country.