Custom PDF Templates

Magento Go includes a set of default templates which can be customized to produce invoices, credit memos, and packing slips. You can use the editor to add your logo, edit the text, and change the style, or make more extensive changes by modifying the code. It is possible to create an unlimited variety of templates from scratch, and incorporate variables and frontend apps that are especially designed for the particular type of document. However, the easiest way is to start with one of the prepared templates, and modify it to meet your requirements. When you finish a template, you can set the configuration to use it as the default for the type of document.

Page Size

The page size can be set to Letter, which is the standard document size in the US, or to A4, which is widely used in Europe.

Letter: 8.5 x 11 inches (216 x 279 mm)
A4: 210 x 297 mm (8.3 x 11.7 inches)

image
image

Page Orientation

The page orientation of each template can be set to either portrait or landscape.

  • Portrait
  • Landscape

Step 1: Enable PDF Print-outs

  1. From the Admin panel, select System > Configuration.
  2. In the Configuration panel on the left, under Sales, select PDF Print-outs.
  3. Click to expand the General section.
  4. Set Enable Printed Templates to “Yes.”
  5. Click the Save Config button.

Step 2: Create a Custom Template

  1. From the Admin panel, select System > Templates > PDF Print-outs.
  2. In the upper-right corner, click the Add New Template button.
  3. Set Template Type to one of the following:
    • Invoice
    • Credit Memo
    • Shipment
  4. Click the Continue button.
  5. In the Load Sample Template section, do the following:
    1. Select the prepared Template that you want to customize.
    2. Select the Sample Template for your locale.
    3. Click the Load Template button.
    The template information appears in the section below.
image
Template Information

Step 3: Edit the Template Information

  1. In the Template Information section, do the following:
    1. Enter a descriptive Template Name.
    2. Select the Page Size.
    3. Select the Page Orientation.
  2. To set the height of the header and footer, do either of the following:
    • To have the system automatically determine the height of the header and footer, select the Auto Header Height and Auto Footer Height checkboxes.
    • If you prefer to have a fixed height for the header and footer, do the following:
      1. Enter the Header Height and select the unit of measurement.
      2. Enter the Footer Height and select the unit of measurement.

    Step 4: Edit Template Content

    1. Make the necessary changes to the Template Content.

      To make simple changes to the text and formatting, you might prefer to work in the text editor and use the toolbar to make changes. As you scroll down through the Template Content section, you will see inserted comments that mark the location of the header and footer. You will also notice sections of code called “Widgets,” which is another term for “Frontend App.” Be careful not to delete these sections, because they provide the dynamic data for the document.

      If you prefer to make changes to the code, click the Show / Hide Editor button. You change to the HTML and CSS, and insert images, variables and frontend apps.

      As you scroll through the Template Content section, you will see inserted comments that mark the location of the header and footer. You will also notice sections of code called “Widgets,” which is another term for “Frontend App.” Be careful not to delete these sections, because they provide the dynamic data for the document.

      The existing templates use conditional expressions, or if-then-else logic. This code determines what content displays when a PDF or HTML template is created. The conditional expressions begin with {{if}}, use {{else}} to determine between multiple courses of action, and end with {{/if.}}

    2. If you prefer to make changes to the code, click the Show / Hide Editor button. Use the buttons at the top of the code editor to add different features to the template.
    3. To insert a frontend app, click Insert Frontend App... and do the following:
      1. Select a Frontend App Type from the list.
      2. Click Insert Frontend App.
      3. When complete, click the Save button.
    4. To insert an image, click Insert Image... and do the following:
      1. Click the Browse Files button to select an image from your computer.
      2. Select and open the image(s) you would like to insert.
      3. Once images are in the media storage window, highlight them and click the Upload Files button.
      4. When complete, click the Save button.
    5. To insert a variable, click Insert Variable... and do the following:
      1. Click to expand the section containing the variable you want to use.
      2. Click the variable name to insert it into the template.
      3. When complete, click the Save button.
    6. To insert a footer indicator, click Insert Footer Separator.
    7. To insert a header indicator, click Insert Header Separator.
    8. To preview the template, click either of the following buttons:
      • Preview HTML
      • Preview PDF
    9. When the template is complete, click the Save button.
    10. Step 5: Add the Template to Your Configuration

      1. On the Admin menu, select System > Configuration.
      2. In the Configuration panel on the left, under Sales, select PDF Print-outs.
      3. Click to expand the section for the template you created. Then, set Printed Template to the name of the new template you created.
      4. Click the Save Config button.

      Logical Expressions

      {{if order.is_virtual_raw}} [function] This line displays the content for virtual product printouts only.
      {{else}} [alternative function] This line is for all other product types.
      {{/if}} This line concludes the if-then statement.

      Field Descriptions

      Button Description
      Insert Frontend App... Allows you to insert a frontend app into the template.
      Insert Image... Allows you to insert an image into the template. Supported file types are: JPG, PNG, and GIF.
      Insert Variable... Allows you to insert a variable into the template.
      Insert Footer Separator Inserts a comment to indicate a footer.
      Insert Header Separator Inserts a comment to indicate a header.

      See also:

      Configuration: Sales - PDF Print-outs

Discussion:

Explore the Knowledge Base