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

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 & Merge Settings

Template Preferences

Here one can change Template wide 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.

Show Image Filenames:
This enables or disables filenames for images. Filenames will only be shown in the Designer Interface.

Image Filename Example

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.

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.

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.

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

Available Font Sizes - This defines the available font sizes within the Buyer Side.

Buyer View Appearance

Buyer View Appearance

With this dialogue you can influence several general aspects of the Buyer Side. To make these settings more understandable, we have added a simulated preview. Just try out various settings to see the effect on the right.

Open Buyer View Appearance on buyer side

During testing the buyer side this dialogue is conviniently 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.

Template Title
This allows you to set a new Template title for the Buyer Side. The default Template title is the Template name.

Photo / Snippets Tab

Show Photo Snippets

If Show Photo/Snippets Tabs is enabled a tab is shown like below. This is especially useful in crowed 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.
Beside the default caption ‘ui.tabFormField’ which translates to ‘Customization’ in english browsers you can also define your own caption, even translatable ones. And you can select a custom icon for the Form Field tab as well.

Appearance

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 configuration step. You can disable this feature Template-wide with this setting.

Show Frame Warnings
Show Frame Warnings

Here you can easily 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 accidentaly move frames when selecting.

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

Page Navigation
This drop-down allows the selection of various page navigation options:

Hide No page navigation is present.
Numbers Enables a navigation bar with page numbers.
Icons Enables page navigation with thumbnails of the respective pages. 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 allows you 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

Show Steps Header
Show Steps Header
This Setting influences how steps are annotated on Buyer side.
(Please read more in the General concepts steps workflow chapter)

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.

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.

Show 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.

Image Search Bar

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

Custom Color

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

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

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!