User Manual Quickstart File Dialogue Designer Side Top Menu Bar Switching to Buyer Side Settings Preferences Buyer View Appearance Photo / Snippets Tab Resources Panel Frame Features Panel Frame Context Menu Document Context Menu General Concepts Buyer Side Snippets Engraving Styles and Form Fields Flex Designs Sub Documents Scripting Workflows Editing Workflow Production Workflow Tutorial Videos Frame Features Resources Account Portal Style Reference Change Log Known Bugs & Limitations Glossary Acknowledgements Api Reference Authorization Tokens Embedding The Editor Custom Integration Backend Api Price Display

Quick Start

File Dialogue

After login, Printess will start the File Dialogue. Here you can create and manage Templates as well as open any previously created Templates for editing.

The File Dialogue opens with the Recent tab on the left preselected. This provides you with easy access to your recent work.

But first, let’s switch to the Open tab and have a look at some additional Printess management options.

Portal Overview

Templates are organized into folders with the current user being the uppermost folder. You can create or delete folders using their respective icons on the top toolbar.

The Templates saved inside the currently selected folder are shown in the center. Select a Template to open, copy, or delete it. Once a Template is selected, the pages saved within the contained documents will be previewed on the right.

Portal Overview

You can search for template names with the search box on top. If you select a template within the search result the path to the template is shown aat the bottom and if you click on the path the folder containing this template is shown.

To close the File Dialogue, just click on the X in the top right of the window.

On the top left, you will see the currently logged in user. Here you can also log out. In the tab directly under this, you can create a new Template.

New Template

Select a Page Size from the drop-down (don’t worry, this can be easily changed at any point) and press the Create button. Alternatively, you may also select one of our pre-built example Templates as the basis for a new document. In either case, once a new Template is created the File Dialogue closes and the Editor opens up in Designer Side.

Designer Side

This is the Printess Designer Side Interface. This mode is where Templates are designed and configured for further personalization by the Buyer.

Editor Overview

Top Menu Bar

Top Menu Bar

Undo Redo
On the left side of the top menu bar you can Undo/Redo previous operations. This may also be done by keyboard with CTRL-Z for Undo and CTRL-Shift-Z for Redo.

Template

In the center of the top menu bar, Printess shows the name of the currently opened Template (or in case of a new Template [Unsaved Template]). If a Template from another user is opened you will see the user of origin in a circle.

By clicking on the Cloud icon, the Template Context menu will open as a drop-down.

File Context

The Template Context Menu contains the following actions:

Switching to Buyer Side

With Printess it is easy to create a powerful and intuitive Buyer Side experience while designing a document, without coding! The Buyer Side is what the end customer will use to configure and personalize their documents. To check the behavior of the Buyer Side, the designer can easily switch between the Designer and Buyer Side views by simply clicking on the Shopping Basket icon.

You can Zoom with CTRL + and CTRL -, your mouse CTRL scroll wheel, or by simply pinching on the trackpad.

Auto Save (Don’t Panic!)

As you edit a document Printess constantly auto saves any changes in the browser storage. So if you happen to accidently close the browser, or if a fatal error occurs, don’t panic because in most cases a backup exists. This is true even for new and unsaved documents.

To recover an unsaved document, you just need to open the Editor and close the initial File Dialogue by clicking either the X to the right or the arrow to the left. This returns you directly to your unsaved document in the state you left it.

Do not open or create a another document - as this will delete your unsaved changes!

For this to work you need to open the same browser on the same device where the document was last edited within the next 24 hours.

Additionally, all previously saved documents will keep their last saved state in the same browser. To access the last saved state just open the document again. If changes are stored, a popup dialogue will appear informing you that unsaved changes exist.

Unsaved Version

If OK is selected the local, auto-saved version is loaded. Selecting Cancel will load the most recent saved version from the server. Do not press Cancel if the changes might be important! This will load the most recently saved version and overwrite your local changes. Just press OK and you can reload the document again at any time if you would prefer the most recently saved version.

Scope conflicts

If you load a document which is already opened in another tab within the same browser, Printess will ask you to close the current tab or browser window to avoid any conflicts within the local backup.

Settings Context

The solution is to simply close the other browser or tab before opening.

Settings

Settings Context

The Settings Menu gives you control over various important Template-wide settings:

Show Smart Guides: Enables or disables the Smart Guide positioning aid. This useful aid can snap frames to edges or maintain a user-set distance to other frames while you are moving them around.

Show Grid Lines: This displays a grid on which all frame positions and sizes will snap to whenever you move or scale frames.

Grid Gap-Size (actual): Sets the size of the grid.

Show Layer Matrix: This opens the Layer Matrix settings on the bottom of the window. Learn more about Layer Matrix here.

Show Styles: This activates small label tags for all frames that have a Style. Multi Line texts will also show labels for paragraph and character styles.

Show Exchange ID: Shows Labels for Exchange IDs (used for content persistence when changing layout Snippets).

Show UI Hints: This enables or disables UI hints.

Search in Global Snippets: This is a useful feature for multi-user scenarios where a separate global account is used to publish all Templates and Snippets stored within the user’s eCommerce/Shop system. To see all published Snippets in this type of global account while not logged in, enable this option.

List Template Snippets: By default, each Template Snippet you create within a Template will be automatically displayed in the Snippets Layout tab (a sub-tab located at the top of the Snippets tab) for insertion. If this feature is unwanted, you can simply disable this option.

Show Document Size Form Field: This enables or disables the Document Size Form Field which a Buyer can use to control the size of the document (useful for products with size variations such as signs, posters, etc.).

Preferences

Template Preferences
Here one can change Template wide preferences.

Template Preferences

Show Page Thumbnails:
This enables or disables the creation of thumbnails for the Template - This can save time when working with large documents.

Show Frame Borders:
If switched on, all frames will have visible borders on the Design Side. This is especially helpful for adjusting text frame layouts where the border is normally not visible.

Merge Settings

Merge Settings determine the behavior of a Template when it is merged into another document (Learn more in the Merge Documents chapter).
This setting allows you to build Templates for merging. Besides page content, this setting also allows you to merge different colors, fonts, images, and Snippets.

Please also read about the possibility of multi-document merges and the IsMergeTargetProperty in the above workflows chapter.

Merge Pages:
When a Template document is merged with another document the page content of the merged document will be incorporated into the target document. Pages which do not exist in the master document will not be added.

For more complex templates there is also the option to merge multiple documents in one merge. To enable this feature one must execute the merge without naming a document and the target (master) template will need to have at least one additional merge target documents with Is Merge Target switched on like shown below (except the primary doc which is always marked).

Buyer View Appearance

The order of merging is determined by the order of documents in both the source and target template. If there are more merge target documents then source documents Printess will simply loop over the source documents and repeat merging for all defined merge targets.

When initially merging documents there is the option of merging designs as layout snippets (so that they get removed later on if the buyer switches the layout). This will be controlled by the mergeMode property. Read more here

Use as Template Name: When enabled, the selected document will define the Template name shown to the buyer instead of the default document template name.

Merge Resources

Buyer View Appearance

Buyer View Appearance

With this dialogue you can influence several general aspects of the Buyer Side. We recently completely reworked this dialogue and added explanations and screenshots to make the powerful options easier to understand.

Open Buyer View Appearance on buyer side

During testing the buyer side this dialogue is conveniently available by selecting the UI Settings Tab on the bottom. (Only available when the buyer side was opened from within the designer)

Note: Most of the settings here are document-wide properties (can be different per document), so make sure you have the correct Buyer Side document selected while changing settings. Some settings are also duplicates from the Buyer Side or document tab.

UI-Selection

Here you set the general type of UI the buyer should see its either a most of the time form-based Configuration Product where the settings for the template are to the right of the document view, or if the document is a Creative Photo Product where the buyer can edit more freely and has a well sorted tab with Layout and Sticker selection to the left (Photo / Snippets Tab).

Photo / Snippets Tab

Show Photo Snippets

If Creative Photo Product is enabled a tab is shown like below. This is especially useful in crowded user interfaces and whenever you let users create beyond simple configuration. This tab also tidies up the different configuration options. The Tab gets automatically filled with layouts, stickers and form fields once configured so don’t worry if initially no tab is available once switched on.

Tab Navigation example

Whenever a changable image frame exists Printess shows a tab where all uploaded images are visible. Clicking on one of the uploaded images will instantly put it into the image frame on the page. If several image placeholders are present, selecting another image will fill the second placeholder and so on.

Tabs are present depending on further configuration or appear automatically for some elements like the Photos or Layouts tab.

Tab Navigation example

If Layout Snippets are present on a page a Layouts tab will appear. Layouts cannot appear in other tabs.

Sticker Snippets can be assigned to either one of the by standard available tabs (Text, Stickers, Elements, Images) or you can define your own name and icon for a tab.

Custom tab

To set your own caption and icon choose custom in the drop down then you can select an icon and also overwrite the caption custom with your own.

Tab Navigation example

The #PHOTOS tab is special as here you can add an another choice to the photos tab. Choosing #Photos means that these stickers will be shown in a Add Photo Frame tab next to the images like shown above. This tab should therefore only be choosen for Stickers with photo content. If Photo Stickers in a ‘Add Photo Frame’ tab are present the buyer can dragdrop images to image frames. If images are drag dropped to a place where there is no image frame, a new image frame is created containing this image at that place.

Show Form Field Tab will enable a tab where all Form Fields are shown. If you have Form Fields to configure this is highly recommended, as otherwise the buyer will need to go back/finalize a configuration to see available form fields.
The default caption is ‘Customization’ in english browsers you can also define your own caption. And you can select a custom icon for the Form Field tab as well.

Page navigation settings

These settings control how the buyer can navigate between pages and documents within your template.

Single Document Pages
If enabled the buyer can navigate the pages by directly selecting a page or by clicking the previous or next page arrows. If pages are named the page name will be shown instead of the page number.

Multiple Documents and Page Icons
Enables page & document navigation with thumbnails of the respective pages/documents. Additionally, you can enable live updating of the thumbnails whenever a page’s content is changed. This mode disables step headers and will show the pages of all editable documents within the Template. This setting is mandatory to add and remove pages and is the recommended mode for buyer-created documents such as photo books.

Photo Book Example

Please read more about our Photo Book Mode in the Buyer Side general concepts chapter

Multiple Documents as Tabs
This option will allow you to display documents as tabs without using steps or Page Icons to navigate through single page documents. This Mode is an enhancement to previous versions where the only other option has been using a step workflow.

Hide Page and Document Navigation Hide all navigation elements to have more space for the document or for single page documents.

Show Page Buttons
This enables back and forth page navigation buttons on the right and left of the document viewport. Page buttons can be configured to appear never, only on desktop, mobile, or both platforms.

Step Navigation

Step Navigation

These settings influence how steps are annotated on Buyer side.
(Please read more in the General concepts steps workflow chapter)

To enable these settings at least one step must exist in the template.

Frame Display

Frame Display

Here one can control appearance and available options of editable frames.

Buyer Frame Style
In the Buyer View there are two ways a frame can be positioned, resized, and changed:

1. Super Simple
This mode presents frames in a minimalistic way which shows one resize point on the bottom right and (when allowed) a trashcan icon on the top left for deleting the frame. Right-clicking the frame will show the context menu for more advanced manipulation tools such as arrange, align, duplicate, and mirroring.
Frame Super Simple

2. With all Options
This mode is perfect for more advanced users. Frames are presented with the usual plethora of options found in frame-oriented graphical software. Therefore, the frame corners are not available for additional functionality, as Printess presents them in a separate menu below the frame.
Frame With All Options

Highlight Editable Frames
Here you can select when editable frames will show a border to the buyer: Never Only the selected element will have a border.
On Hover Frames will be shown when the buyer hovers over the view container (desktop only).
Always All editable frames will show a border.

Show Frame Icons
When switched on, editable frames on the Buyer Side will show an icon with the content type indicated on the top left of each frame.

Animate Selection Border
When switched on, the selected frame on the Buyer Side will be animated with a moving dotted line to highlight the frame being configured.

Show Step Numbers
The Steps Interface will by default show rounded numbers beside each frame with a Buyer-Step set. You can control this feature for the buyer side template-wide with this setting. On Design-Side the step number will be always visible but appear grey when its turned of for Buyer-Side.

Show Frame Warnings
Show Frame Warnings

Here you can influence the way the buyer is informed about various validation issues such as low-resolution images, overflowing text or missing characters. Besides showing no warning (none), you have the option to show a warning icon (sign) and/or a warning text (hint) on top of the frame.

Note: Only frames that have buyer-editable content will show warnings.

Below is the outcome of the settings shown for a low-resolution warning (sign and hint, sign only, hint only):

Frame Warnings Example

The following situations will generate error messages with warning signs & hints:

Error message at the time of checkout:

Show Expert Mode Button
This will show the Expert Mode Button on buyer side - but only if Sticker Snippets are available on the page (To protect layouts which should not get altered). In Expert Mode every frame can be moved, rotated, deleted and the frame menu will show up. This allows the experienced buyer to layout like wanted while protecting the unexperienced buyer from accidentally move frames when selecting.

Show Exit-Text-Edit Button This enables the additional exit text edit button for inline editing (Only Desktop Mode).

Exit-Text-Edit Button

Template Title

Template Title

Here you can set a title which will be shown on Buyer-Side. Additionally you can provide a url to additional product info which will be displayed as overlay form.

Ui Hints Display

UI Hints

When enabled, buyers will get useful hints on how to use the enabled items:

Additionally editable frames can show a ‘click-me’ icon on top.

Layout Snippets Display

Show Layout Dialog When active the buyer will be forced to select a layout from the available layout snippets. This happens for every page with assigned layout snippets the buyer visits first time.

Show Layout Dialog

Layout Snippet List Allows to control the number of columns shown for the layout snippet selection. Show Layout Dialog

Image

Image Settings

Image distribution
This controls how multiple uploaded images should get distributed. The default behavior is filling all empty image frames with uploaded images until either no empty frame is available or all uploaded images have been used. Additionally you can switch it to fill all frames and repeat the uploaded images until no frame is empty anymore.

Show Image Search Bar
Image Search Bar
If you wish to provide a lot of selectable images across many groups, simply select this function to enable a search bar for finding image groups within the provided image library.

Allow PDF Upload By default printess does not allow buyers to upload PDFs as faulty pdfs might make output files unusable. You can allow for PDF upload and to ensure error free output limit the upload to PDF/X-4 standard which grants well formed output.

Screen Image Width:
This setting determines the maximum image width which may be loaded on Buyer Side. Adaptive means the Buyer Side UI will load higher resolution versions of the same image when the buyer zooms into the image, up to the maximum existing resolution. In rare situations where one must limit the maximum resolution for Buyer Side image previews, simply use this setting to select a specific maximum width.

Other Settings

Other Settings

Available Font Sizes
This defines the available font sizes within the Buyer Side. This also controls the available sizes for the buyer side copy-fitting function.

Enable Custom Colors
Custom Color
This allows buyers to use a color picker (Chrome only) or enter an RGB color value (wherever color change is allowed).

Show Undo & Redo
This switch controls the visibility of the Undo & Redo icons in the Buyer Side. This can save precious screen space on mobile devices. Show Undo & Redo is mandatory if Expert mode is switched on.

Force [Shift + Enter] on Buyer-Side
This options forces the use of pressing [SHIFT+ENTER] to input a soft-break in rich text editing. [ENTER] without [SHIFT] will insert a new paragraph. The default behavior is that the buyer only needs to press [ENTER] to insert a soft-break and twice [ENTER] to insert a new paragraph.

Enable PriceTest

Enable Price Test

This region is all about testing the price display functionality of Printess which is otherwise quite hard. Normally testing price display would involve coding as prices will originate in the shop or PIM system of your business. Please note that this is clearly only for testing within the Designer and will not display if you call the template from within your integration (you will still need to connect your shop backend).
Please read more about price display functionality in the Buyer Side chapter

These and other Buyer Side settings with documents scope are explained in further detail in the General Settings chapter here.

Resources Panel

resources Panel

The Resources Panel tab area contains most of the resources used in a Template. In addition to images, fonts, and colors there are also special Printess resources such as Styles and Form Fields.

Learn more about the Resources Panel

Frame Features Panel

Features Panel

The Features Panel contains all of your tools and settings for creating and manipulating layout elements and Buyer Side configurations.

Each frame can have multiple frame features. A frame feature may be an image, text, text on a path, shape, or sub document. These various frame features can be integrated within a single frame, providing users with powerful creative combinations.

Example: The frame below contains a shape, an image, a text, and a path text. As you can see, the text flows through the heart shape, the image is masked into the shape of a heart, and the path text follows the border around the left side of the heart.

Features Example

Learn more about Frame Features

Frame Context Menu

Whenever a frame or multiple frames are selected, right clicking on them will open the Frame Context menu.
Frame Context

With the Frame Context menu, frames can be reordered to the front or back, the spacing between them changed, spacing relative to the page can be set, or they can be aligned.
Read more about arranging and alignment here.

You can also copy and paste frames here.

Pro Tip: In Printess, frames can be effortlessly copied between different documents and Templates. When a frame is copied it will automatically add its resources (images, fonts, and colors) to the document or Template it is copied to.

Frames can also be grouped together which is quite important for the Buyer Side.
Read more about Buyer Side Grouping here.

Set as Paste Board allows you to select a frame and define the dimensions of the Paste Board.
Read more about the Paste Board and this function here.

Document Context Menu

With Printess one Template can contain several documents serving different purposes. If you want to create special output layouts, previews, or product thumbnails Printess helps make this fun and easy by allowing for separate documents.

Pro Tip: Sub documents make it a breeze to replicate one central design across all documents in a Template. This lets you avoid maintaining graphics across several documents!

To do so, just right-click on a document name in the title bar to open the Document Context menu.
Frame Context

Here you can set the document type:

In this same menu you can also rename, duplicate, or copy paste any document into another Template!

Icons beside the document name will also indicate these and other properties of the document.
Frame Context

From left to right: is editable, price group set, gets size from form field, Is template thumbnail, is merge target.