PDF Preview

Zakeke Support

Updated April 26, 2024 13:26

Summary

Introduction to the tool
Managing the tool
Create your own version of the PDF layout
- Easy changes
  - Changing the font
- Advanced changes

1. Tool intro

The PDF Preview allows your customers to download a PDF of their personalization along with other information directly from the Zakeke UI.

See examples below:

The PDF is a low-resolution version of the design, it can't be used to print. Customers can use it as proof or generate a product sheet.

In order to make your life easier, we have already provided you with a default PDF Preview template. if you wish, you can customize the layout of the PDF and include the information you prefer.

Please note

This feature is available only for Grow and Scale plans.

2. Managing the tool

The PDF Preview is enabled by default. If you wish to disable it for your product(s), you do it by creating or editing a Printing Method.

3. How to customize the PDF Preview

Go to Settings > PDF Preview > Choose between Product Customizer and 3D Product Configurator based on the Zakeke tool you're using.

Here you find an HTML editor that you can use to customize the PDF. The HTML you see is for the default template.

The default template is composed of two sections:

Head
Body

If you have HTML skills, you can easily change any part of the template by modifying the CSS classes and properties. We also provide you with a few placeholders that you can use to add dynamic content:

{{product_name}}: it gets the name of the product.
{{side.name}}: it gets the name of the product side.
{{side.image}}: it gets the image of the product side where the personalization is made.
{{selected_variant}}: it gets the name of the selected product variant.

Learn more on how to use the placeholders in the Liquid Templates section below.

3.1 Easy Changes

For those who do not have HTML skills, here below a few quick how-to guides to make changes to the default templates.

Changing the font

The GoogleFont "Roboto" is the default font. Follow the guide here below to change it:

Go to https://fonts.google.com/ and search for your desired font.

This is the page on the browser:

Click on the font and click on one of the available styles for the font and then you should see the following interface popping up from the right to the left:

Now you have to embed the selected font into the HTML template. Look at the right menu, there are two sections:
1. the red highlighted section is the chunk of code that you should copy in the head of the HTML template;
2. the gree highlighted one is the css rule to apply.

Copy the red highligthed code and past it between the tag <head> and </head> in the HTML template in Zakeke, as follows:
Now, copy the green highlighted code and past it in tshis secion of the HTML template and you're done:

3.2 Advanced changes

If you need to make advanced changes, you'll need to work on liquid code. Liquid uses a combination of objects, tags, and filters inside template files to display dynamic content. We recommend you rely on a skilled developer or send us a message to support@zakeke.zendesk.com.