Difference between revisions of "pickPack Quickstart"

From Moogento How-to Guides
Jump to navigation Jump to search
m
m
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
[[File:PickPack_Magento_Advanced_PDFs.png|link=http://www.moogento.com/pickpack|border|323px]][http://www.moogento.com/pickpack Get pickPack today((.buy))]
+
{{#description2:Let's get PickPack for Magento setup in a few minutes. We're going to be making beautiful customised PDFs in no time. Picklists, Packing Sheets, Invoices - all the PDFs!}}
 +
[[File:PickPack_Magento_Advanced_PDFs.png|link=https://moogento.com/pickpack|border|323px]][https://moogento.com/pickpack Get pickPack today((.buy))]
 
==Aims & Preparation==
 
==Aims & Preparation==
−
{{idea|Most of this is included if you get the [http://www.moogento.com/installation Installation & Setup Service]}}
+
{{idea|Most of this is included if you get the [https://moogento.com/installation Installation & Setup Service]}}
  
 
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 '''Magento Packing Slip PDFs''' & '''Magento Invoice PDFs''' to your business, we'll cover those here.  
 
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 '''Magento Packing Slip PDFs''' & '''Magento Invoice PDFs''' to your business, we'll cover those here.  
 
*If you haven't installed it yet, follow the [[Installing_Magento_Extensions_:_Easy_Install_Guide|Easy Install Guide]] to get pickPack running.
 
*If you haven't installed it yet, follow the [[Installing_Magento_Extensions_:_Easy_Install_Guide|Easy Install Guide]] to get pickPack running.
−
*'''pickPack works great with Magento 1.4x and later.'''
 
−
*''If you're looking to setup the '''Magento CSV Order Exports''', check the [[pickPack_Setup|pickPack Setup section]].''
 
  
 
==Sizes, Resolutions, and Nudges==
 
==Sizes, Resolutions, and Nudges==
Line 13: Line 12:
 
* 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''.  
 
* 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.
 
* 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, [http://www.prepressure.com/library/paper-size this guy] has a great summary.
+
* To get an idea of page sizes in points, [https://www.prepressure.com/library/paper-size 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.
 
* 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.
  
Line 22: Line 21:
 
#:* ''the dpi at 300dpi''
 
#:* ''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).''
 
#:* ''the color mode as 'CMYK' (this one is not so important, but is the correct setting to get the best printed color matches).''
 +
#:* ''you can set these both in the 'File > New' and the 'Image > Image Size..' sections of Photoshop.''
 
#::[[File:photoshop_logo_setup.png|link=|454px]]
 
#::[[File:photoshop_logo_setup.png|link=|454px]]
 
# Grab a high-res version of your logo, ideally a vector image.  
 
# Grab a high-res version of your logo, ideally a vector image.  
−
# 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.
+
# Copy that and paste into the template file.
−
#: ''The standard top logo size is 269 points x 41 points.''
+
# Resize your logo to fit in the template.
−
# Save this as a non-interlaced non-transparent png-8 file. (This is unfortunately important or you will generate errors when you produce PDFs.)
+
#: ''If you need to resize that logo image larger then it will print blurry - find a bigger image if possible.''
 +
#: ''The standard page-top logo size is '''269 points x 41 points''', at '''300dpi''' - pickPack will easily work with images the same width but with more height, if that suits your logo better.''
 +
# Save this as a '''non-interlaced non-transparent png-8''' file.  
 +
#:''This is important or you'll generate errors when you produce PDFs.''
  
 
==Prepare the Colors==
 
==Prepare the Colors==
−
# 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. [http://imagecolorpicker.net/ imagecolorpicker.net].  
+
# 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. [https://imagecolorpicker.com/ imagecolorpicker.com].''
 
# 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 <code>#CCCCCC</code>
 
# 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 <code>#CCCCCC</code>
−
# 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)
+
# 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.''
−
==Customise Shipping Address Format==
+
#: ''- By subtitle/horizontal bar, I mean the line which has eg. Sku, Product Name, Qty''
−
In {{menuchoice|General}} you'll see an important field to set the format of shipping addresses.
 
−
# First, set the option {{menuchoice|Override default address formatting?}} to {{menuchoice|Yes}}. You'll now see a customisable format field.
 
−
# Adjust the format to suit.
 
−
''The default setting should roughly match recommended USPS formatting - you might want to fine-tune it to your local area.''
 
−
:[[File:address_formatting.png|link=|692px]]
 
−
:* This is the USA format:
 
−
<code><nowiki>{if company}{company},|{/if}
 
−
{if name}{name},|{/if}
 
−
{if street}{street},|{/if}
 
−
{if city}{city},{/if} {if region}{region}{/if} {if postcode}{postcode}|{/if}
 
−
{if country}{country}|{/if}</nowiki></code>
 
−
:* This would be a more standard UK format:
 
−
<code><nowiki>{if name}{name},|{/if}
 
−
{if company}{company},|{/if}
 
−
{if street}{street},|{/if}
 
−
{if city}{city},|{/if}
 
−
{if region}{region},|{/if}
 
−
{if postcode}{postcode}|{/if}
 
−
{if country}{country}|{/if}</nowiki></code>
 
−
 
 
−
==Hide Your Home Country==
 
−
Let's make international orders easier to see, and filter out your home country from shipping addresses.
 
−
# Just enter your country name, as it appears in addresses, and it will be removed. Simpler PDFs!
 
−
; [[File:remove_country.png|link=|505px]]
 
  
 
==Applying==
 
==Applying==

Latest revision as of 13:19, 28 September 2020

PickPack Magento Advanced PDFs.pngGet pickPack today

Aims & Preparation

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

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 Magento Packing Slip PDFs & Magento Invoice PDFs to your business, we'll cover those here.

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.

  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).
    • you can set these both in the 'File > New' and the 'Image > Image Size..' sections of Photoshop.
    photoshop logo setup.png
  2. Grab a high-res version of your logo, ideally a vector image.
  3. Copy that and paste into the template file.
  4. Resize your logo to fit in the template.
    If you need to resize that logo image larger then it will print blurry - find a bigger image if possible.
    The standard page-top logo size is 269 points x 41 points, at 300dpi - pickPack will easily work with images the same width but with more height, if that suits your logo better.
  5. Save this as a non-interlaced non-transparent png-8 file.
    This is important or you'll 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.com.
  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.

If you have tight margins, consider using using light grey text to save money on toner

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.magento pdf paper size.png
Retrieved from "https://moogento.com/guides/index.php?title=pickPack_Quickstart&oldid=2623"