User Manual Quickstart General Concepts Buyer Side Intro Switching between Designer & Buyer Side Paste Board & Document General Settings Text Editing Other General Settings Photo Book Mode Buyer Side Settings for Frames Groups in Buyer Side Auto Size Text in Sticker Snippets Background Frames Form Fields User Interface Elements Sticker Snippets & Layout Snippets Steps Workflow Buyer Side Language Display Price 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

Buyer Side

Intro

With Printess you can create feature rich and good looking templates. While designing the templates you also create all the configuration options for the buyer of your products. Therefore, Printess generally has two modes of operation:

Designer Side
This is the Editor to create Templates, Snippets & Layout Snippets. The Designer Side is not available for mobile devices and should only be used on desktop browsers.

Note: The Editor will switch to a mobile(ish) buyer side view when the window size is reduced. This makes it easy to also see the mobile UI while developing a template. For a real mobile UI test use simulators or devices.

Buyer Side Mode
This is the reduced configuration UI that the Buyer of a product will see. This chapter will explain how to configure the UI while creating Templates.

Example: Buyer Side configuration of a mobile phone cover.

Desktop Configuration

One of the superpowers of Printess is that the Buyer Side UI is also available on mobile devices! Although will show up as a different interface, it is completely integrated with the desktop view.

Note: Although one can test the mobile UI in a browser by reducing the size of the browser window, we recommend using a mobile device for testing or at least a good simulation like the Chrome Developer Tools Mobile Device Simulator.

Example: The same configuration done on a mobile phone.

Mobile Configuartion

Switching between Designer & Buyer Side

To make it as easy as possible to create and refine the Buyer Side user interface, one can always switch between Designer and Buyer side by clicking on the Shopping Basket icon in the top menu bar.

Switch to Buyer Side

When leaving the buyer side, Printess will revert all changes made during buyer side. This ensures that one does not destroy or change the template while testing. For the same reason, the undo buffer for buyer side is limited to changes made in the buyer side so you cannot accidently revert changes previously made in the Designer side.

Paste Board & Document

The Paste Board is the area around the document where design elements are still visible. E.g. Bleed is part of the Paste Board.

But the Paste Board gets especially useful for Buyer Side configurations, as sometimes a document does not span the complete product.
A good example is a T-Shirt where the printable area is just a small area in the center, but you’d still like to show the complete shirt to the Buyer.
Here the Paste Board does the trick. Set the Document Size to your printable area and enlarge the Paste Board to fit the size of the entire product.

T-Shirt example

There is also a convenient function for this in the Frame Context menu. Just select the frame containing the shirt image and right-click on it.

Set as Paste Board in Context Menu

Select Set As Paste Board and the Paste Board will be set to the size of the frame.

One can also manually set the Paste Board dimensions by inputting the distance to all four edges in the Document tab to the right.

Paste Board Settings

In this example Page Zoom to Paste Board is enabled. This will initially zoom the editor to the Paste Board instead of the document when editing.
Also Buyer Side Page Border is disabled so that the document borders are not shown. Furthermore, Show Frames is set to 100%, causing everything in the Paste Board to appear with 100% opacity. Reduce this value if frames outside the document area should have less opacity (e.g. one would just like to show elements that are in bleed but they should appear lighter).
To round things off, Paste Board Color sets the color of the Paste Board.

General Settings

Buyer Side Icon

The Buyer Side settings are located in the features panel under the Shopping Cart icon. If no frame is selected Printess will show the general Buyer Side settings as shown below.

General Buyer Side Settings

Text Editing

Inline or form-based editing

Printess allows you to control how a buyer should edit text. This can be set to inline allowing the buyer to type directly in the text. If inline is switched off Printess will instead show a form field to enter the text. This behavior can be set for desktop and mobile platforms independent.

Note: When inline editing is enabled frames will behave different depending on the buyer side setting to allow position changes of a frame. If position changes are allowed the buyer will need to start the editing by selecting the edit icon on top of the frame. If position changes are not allowed the frame will directly enter the inline edit mode when selected.

Inline Single Line Text Editing
When this option is enabled, the buyer can edit single line and text on path directly within the Frame. This setting can either be set for desktop only or for desktop & mobile devices.

Inline Text editing Single and Path

Inline Rich Text Editing
When this option is enabled, Printess allows for rich text editing of multi-line texts. This also gives the Buyer the option to format a text with different fonts, sizes, and colors down to the character level. This setting can either be set for desktop only or for desktop & mobile devices. If switched off, Printess will instead show one or multiple form field(s) to edit the text.

Warning: Use a Style to define the Base Style of the Frame which should get used for Rich Text Editing. Otherwise, once the Buyer deletes all content there is no Text Style left and the Frame will return to the default base Style (Noto Sans, 12pt, black). (Please read more about assigning a base Paragraph Style to a Frame here)

Restrict Text Formatting
This will set the range at which allowed format changes take effect in Multi Line text. This option is only available when Rich Text Editor is enabled.

Restrict Text Formatting

Selection or Paragraph: The buyer can select a portion of the text and change the format. If no selection is present the changes will get applied to the current paragraph. Selection or Entire Text: The buyer can select a portion of the text and change the format. If no selection is present the changes will get applied to the complete text.
Entire Text: The buyer will not be able to change the format of single characters or words. Format changes will always get applied to the complete text.

Split Paragraphs

When editing Multi Line text in form-based mode, this option will divide it into all differently formatted paragraphs and provide one form field for every block. This will automatically happen if the buyer is using a mobile device or if the text frame is grouped together with other frames.

Note: Only differently formatted paragraphs are taken into account, different character styles are discarded. To make sure the full paragraph is selected while formatting, just place the cursor in the paragraph and change formatting, this will automatically select the full paragraph for the changes.

Important: To ensure your text formats will be consistent in form editing mode you should select the text frame and press Reset Character Styles in the buyer side tab before publishing. This will erase all character formats but keep the paragraph styles & formats. Which makes your Multi Line Text safe for form-based editing.

Other General Settings

General Buyer Side Settings 2

White Text Cursor
Sometimes an inverting cursor does not cut it especially on mid tone backgrounds. In this case a white text cursor enhances visibility.

General Buyer Side Settings 2

Keep Frames Inside Pages
This will ensure that the Buyer cannot accidentally move frames outside the page boundaries. Please do not use this option if Buyers must be able to place elements into bleed.

Minimum DPI for Images
Here one can set the minimum required DPI for images.
Whenever a Buyer goes below this resolution uploading low quality images, a warning will appear that the image is not fit for this purpose and needs to be scaled down or exchanged.

Note: Resolution warnings will only be shown for image frames which have content editable switched on in buyer side configuration and if the image gets changed or uploaded by the buyer. Images which are only changeable on design side and default images can be of any resolution.

Minimum Image DPI

There is also an API method to request any resolution warning or overflow text within a design at the time of saving to basket so that the shop system gets the chance to inform the customer about potential quality issues or deny buying such a product at all.

Show Document as Buyer Step
Show Doc as Buyer Step
This will show the current Document as Buyer Step. Please read more in the Steps Workflow description in this chapter.

Document Title
Show Doc as Buyer Step
This defines the name of the document which will be shown on buyer side e.g. in icon mode navigation.

Allow Zoom & Pan

With this switch you can control if the buyer can zoom, pan into the document, and also move between pages. This option is switched on by default.
Allow Zoom & Pan will only affect the user’s ability to zoom and pan. Even with the option turned off, Printess will still zoom in on edited items in mobile and to steps on desktop if zoom-mode is set to frame mode.

Show Zoom Options
Show Zoom Options enables the buyer side zoom buttons. Depending on the Buyer View Appearance settings either just a magnifying glass icon or additionally zoom in and out buttons are shown additionally. A menu allows to quick execute a zoom to the right or left page or to the complete spread. Zoom Options

More Options
This will open the Buyer View Appearance settings. Learn more about the available settings here.

Show Page Buttons
This will enable back and forward buttons for page navigation right and left to the document viewport. Page Buttons are configurable to appear only on desktop, mobile, or on both platforms.

Show Page Buttons

Show My Images Tab
Show My Images Tab
When enabled Images either uploaded or provided will be shown permanently in the configuration when no frame is selected. Additional options like Form Fields and Sticker Snippets will then be shown in additional tabs. As Form Fields can be any type of item to configure one can also define the caption for the form field tab. By default this is the translatable UI text ui.formFiledTab which in English translates to customizations. Feel free to put your own caption in here or alter the translations in the account portal. Here is an example of a document with switched on My Images Tab additional Form Fields and Sticker Snippets:
Show My Images Tab Example

Photo Book Mode

Show Image Filters

Buyer can add Spreads or Pages
Photo Book Mode adds a spine shadow on pages and allows for adding and removing of Spreads within a range of spreads (a spread is one page in single page mode and two pages in facing pages mode). Depending on the binding option one has the choice of 1 or 2 spreads adding and removal.

Whenever Adding Spreads or Pages is allowed the buyer will also will see an arrange pages button which opens a dialogue to add, delete or rearrange pages by drag-dropping them to the desired position.

Rearrange Pages

Add Frames from Layer
When spreads are added one can also choose a layer to copy elements from. If this option is selected the frames on this layer on the last page of the book will be copied onto the new spread, allowing for paper backgrounds etc. to be present across the book and appear on new spreads as well.

Warn on Empty Pages
Enabling this option will show a warning in case no user content has been added to new pages. If the Wrning is shown the editor will also navigate to the first empty page.

Show Image Filters

Photo Book mode really shines in conjunction with the Icon Page Navigation Mode in the Buyer View Preferences. In Icon mode All editable documents in a document are shown as Icons for Navigations this allows to show a separate cover document in line with the inside pages for navigation. Additionally, this mode will display add and remove page buttons in the navigation pane. Here is an example of a photo book type navigation:

Photo Book example

Adding or removing pages via in document UI-elements
Adding and removing additional Pages can be done via a user interface feature button which can be placed anywhere in the book. Select any frame and select the buyer side tab. Then switch on User Interface and select either add or remove in the Add or Remove Page Action drop down. note this drop down will be only visible if you allow to add pages an photo book mode is switched on.

Show Image Filters

Brightness, Hue, Sepia …
Show Image Filters

Enabling this option gives the Buyer all available Image Filters when uploading or selecting an image.
If switched off, one can choose which filters should be available to the Buyer for all editable images in this template.

Buyer Side Settings for Frames

If a frame is selected, the Buyer Side tab will show the Buyer Side configuration options for the frame. By default, a frame and its content are neither selectable nor changeable on Buyer Side.

Buyer Side Settings

Learn more about buyer side settings for frames in the frame features panel chapter

Groups in Buyer Side

Groups are a powerful addition to control the Buyer Side UI. Normally, each element you set up to have controllable features such as content or color will show its features when you select it on the Buyer Side.
Groups take this to the next level. Just group frames with controllable features. Then, Printess will analyze all the features and assign them all equal properties with just one intuitive control on the Buyer Side. So all frames with the same text (only Single Line text) will have just one input field, and all frames using the same color will have just one collective color selector. By just grouping frames, you will create an optimized configuration group.

Let’s have a look at an example. Here is a group containing a shape and two text frames, with their respective Buyer Side settings to the right:

Frame Group settings example.

As one can see, the Single Line text frames have the same text, and the shape and the second Single Line text have the same color. Printess will automatically create the following Buyer Side configuration UI when they are grouped:

Frame Group UI example.

Changing the text will now change the text in both Single Line text frames. Changing the green color will change the color of the shape and the color of the lower text frame.

Therefore, grouping provides an easy way to change several properties at once if they are on the same page. If one would like to change several frames at once across multiple pages, consider using Form Fields. Learn more about Form Fields here

A good example of the power of grouped configurations are the Sticker Snippets, which are always grouped and therefore expose just one simple UI to the Buyer.

Auto Size Text in Sticker Snippets

Growing multi line text can shift elements below it which are in the same group. This is a useful feature to e.g. let a signature below a letter move down when the letter gets longer.

For this to work the element(s) to be shifted must be positioned below the top of the multi line text frame and Auto Frame Size must be switched on in vertical mode for the text Learn about Auto Size Settings here. No additional configuration beside grouping the text and the elements to be shifted is necessary.

In this example we placed a simple bar shape below an auto size text:
Frame Group UI example

When additional text is added the bar moves down:
Frame Group UI example .

Background Frames

The buyer side will not allow users to click through (select frames which are behind frames). This is simply too complicated to understand and near to impossible on mobile platforms. Therefore, Printess has another way to still make such frames configurable. This is achieved by the option Is Background Frame.

Is Background.

Note: This option will only appear if you check one of the following buyer side options:

  • single-line text content
  • text-on-path content
  • shape-color
  • image content
  • sub-document form-fields

If in minimum one Background Frame in a document exists, the buyer side will show a button Change Background to change the allowed properties. If multiple frames have this option switched on, all their options will be shown together as if they would be part of a Sticker Snippet. Frames with the option Is Background switched on are not selectable any longer. A good example for this is the Puzzle example which is also available in the new document section. In this example the image which is potentially behind added snippets can still get changed as a background.

Is Background Puzzle Example.

Adjust Document Size

Is Background Puzzle Example.
One can create a very special mode for image frames to control the document size. For this to work the following prerequisites must be met:

After this the document aspect ratio will be set to match any uploaded image.

Form Fields

As described in Buyer Side settings - making an element editable in a document does not always need a form field.

Form fields have several use cases where they are mandatory:

Creating a form field is done in the resources panel - Create one by clicking on Add Form Field .
Once the form field has been created, one can change its name, its label and also the form type.

(Read more on creating form fields here)

In general, there are three types of form fields for the Buyer Side.

Textbox

A simple text field to enter text:

Add Form Field

Additionally, one can set Text-Before or Text-After in the Form Field properties, which will add additional text before or after the entered text, but only if the entered text is not empty.

Text Area

The Text Area is meant for text input spanning several lines of text. It does not support Text Before or Text After.

Text Area

Select List

A Select List is useful for letting a user choose from different options.

Select List Example

Image List

The Image List is made for all options where every value should be represented by an image. Image List Example

Data Table

If the data type of a form field is set to Table the Buyer Side will show a table editor where the Buyer can enter data as well as add or delete rows.

Data Table

User Interface Elements

User Interface Buyer Side

Another option to build easy to use Buyer experiences is to use the User Interface option in the Buyer Side settings. A frame can be set to being a part of the UI.

So, whenever a Buyer clicks on it, the document will react. Currently, there is one option - the click action - that one may select for a UI frame but we will extend options in the future.

UI frames will not be part of any output (PDF or image) and will always be on top in the Editor.

Add or Remove Page Action

With this Action Spreads of the Document can be added or removed in Photo Book mode.
Read more about Photo Book Mode here

Set Form Field Action

User Interface Buyer Side

If Click Action is enabled, one can select a form field and a value the form field should be set to at the moment the Buyer clicks on the frame. This enables users to store whatever is controllable via a form field inside of the document.
With the Add Form Field button one can add more form fields to set other values in parallel.

User Interface Buyer Side

For example, a Buyer can control a color scheme by clicking on colored shapes. Here we just created colored circle shapes, put them into the Paste Board (Set Show Frames in Paste Board settings to 100% to make them opaque), enabled User Interface, enabled Click Action and selected them in this document’s existing color scheme form field + the respective color scheme name for each circle.

Control Color Scheme

Now the Buyer can change the color scheme just by clicking on the circles.

A handy trick to make the user interface functional even on the Designer Side is to collect them all in a separate layer and lock the layer. Then they will react in Designer Side as well.

Locked UI elemenst

Sticker Snippets & Layout Snippets

Sticker & Layout Snippets enable the Buyer to change complete layouts or add design elements themselves.

Group and Layer Snippets on Buyer Side

To understand how to create Layout and Sticker Snippets please read the following chapter.
Snippets Overview - This will give a good overview of Snippets, with how to create and tag them.
Snippets Tab - Here you will learn how to assign Snippets to the Buyer Side by using tags.

Pro Tip: Sticker Snippets are the only way (and a nice one) to provide Buyers with the ability to insert their own text and image frames. For example, you can just create a Sticker Snippet with a Single Line text frame and the style you like and create a Sticker Snippet from it - don’t forget to set the correct Buyer Side settings to allow for content and maybe color control. The Buyer can then insert this text frame and edit it.

Steps Workflow

The buyer side steps workflow allows for guiding the user step-by-step through the configuration process. Given the ability of the step interface to zoom to the elements configured it is also a great help on mobile devices as the point of interest and configuration is automatically zoomed and centered. Another ability of the steps workflow is to jump between several documents of a template. This allows you to configure an element which is afterwards used several times in the main document as a sub document frame.

The Steps interface co-exists with normal configuration, so a buyer can still zoom or change pages and configure elements in his own order.

Steps Interface Example

The Step interface is automatically shown once steps exist in a template. To configure a Frame to be configured via steps, select the frame and then at the bottom of the buyer side settings tab select a buyer step number. This number defines the order in which the elements are configured.

Configure the Steps Interface

The selected number is however local to its page. As Printess offer options to rs or rearrange pages the buyer side editor will change it to the final step number at start of the editing process by sorting all steps first by document order, page order and finally by step number on the page.

Additional configuration for each step can be taken:

Documents as Buyer Steps

As noted above Printess allows for configuring documents as part of the steps process. To add a document to the steps deselect all frames, go to the buyer side settings and enable the Show document as buyer step switch.

Add a document to the Steps Interface

This is necessary in case your documents have form fields, color schemes, or other global settings which need to be customized. If the document has items to configure you can still add them as steps as well. This option is also useful to show a final photorealistic preview before the buyer adds the product to a basket and if you mark your document as preview document type the step interface will even display ‘Preview’ in the button where normally ‘Next Step’ would be shown.
If you don’t want to zoom into the first element of a steps workflow immediately and in first like to show the complete page at start, switch on Show document as buyer step for the document. The first step will then be the complete document overview and after clicking on the Next Step button the editor will zoom into the first configurable element.

Pro Tip If you influence a certain area in a document with form field values you can set them as a workflow step with defined zooming by taking an (invisible or only buyer side visible) shape frame and add a workflow step on it. Then pin all your form fields to this frame (Form fields must be document type form fields to let them get pinned). The Shape Frame will then set the Zoom area and all pinned form fields will be shown for configuration.

As documents do not have an order number, they can get sorted by changing their order in the document selection on top of the editor. Documents are configured from left to right.

Sort documents for the Steps Interface

To change the order of a document use the little arrows beside the document name. The left arrow will shift the document to the left and the right arrow will shift it one place to the right.

After the last step in the configuration has been entered the steps interface will automatically show the button ‘Add to Basket’ which finalizes the configuration, creates a save token and thumbnail and will return to the shop workflow.

Steps Interface add to basket

Display Documents Conditionally
If either Icon-Page-Navigation is enabled and a document is set to editable or the document is show as Document-Step, the User can set a condition if this particular Document will be shown or not. To create a show condition click on Edit Condition which will open the condition editor.

Show Document Conditional

Document conditions cannot get applied to Primary Documents.

Appearance configuration for the Steps Workflow

One can influence the appearance of the step numbers (badges) and the step captions (title) in the Buyer View Appearance dialogue (find it here)

Template Wide Steps Presets

never Neither a step number nor a headline will be shown
only title Just the headline of a step will be shown
only badge Just a step number will be shown
title and badge Both headline and step number will be shown
badge list A breadcrumb type list of steps numbers will be shown, providing the buyer with an overview of the steps to configure and where they are in the configuration process.
tabs list All steps will be represented by tabs containing the caption of the step.

Template Wide Steps Presets

Buyer Side Language

By default the editor will show the buyer side interface in the language the browser is set to - at least if the language fits one of our implemented languages - these are currently: English (en), Spanish (es), Finnish (fi), French (fr), Swedish (se) and Russian (ru), and if a needed language is missing we can add it. Additionally, you can explicitly set the language the browser should display when integrating the editor in your shop.

Buyer Side Multi Language

Printess also allows to provide your own translation / change existing translation and even include translations for example values in templates.

Translation tables can be added or altered in the Account Management Portal under Settings.

One can also directly provide a fixed translation object when attaching the editor. Please learn more in our API section

For this please lookup the translation.json inside our getting started GitHub repository which contains all translatable UI text as well as all prompts and error messages. In this file you will already see two reserved object namespaces being used UI and error we recommend to only use these namespaces to overwrite existing translations one would like to change and add your own custom namespaces for translations of user values and is resolved by the internal function gl(). Simply write ${gl(translatableObject)} anywhere in Text Fields or multiline texts and the content will be looked up from the global translation tables before being displayed to the buyer.

This can get used to translate example text used throughout the template. As an example, we can translate the typical sample names and addresses into their local variants.

${gl(“example.first”)} in a single line text will look up the object example.first for a translatable example first name. The Buyer will then see “John” in their input box. The translation object table for this could look like this:

{
  "example": {
    "first": "John",
    "last": "Doe",
    "street": "123 Main St",
    "city": "Anytown, PA 12345"
  }
}

Add to Cart and Exit Button Customization

The buyer side Add to Cart button as well as the Exit button can receive special customization via the translation feature.

One can decide if they should show a text or text & an icon or just an icon. To achieve this these buttons will have to available translation strings, one for the icon which can either be empty to show no icon or contain an icon name.

For the Add To Cart button the UI translation objects are:

For the Exit button the UI translation objects are:

For the Add To Cart button the following icons are available:

Add To Cart Button Icons

For the Exit button the following icons are available:

Exit Button Icons

See these example combinations and their input:
Exit Button Icons
From left to right the values for the above are:

Here is a full example for a customized Add To Cart button and the translation table:

{
  "ui": {
    "buttonBasket": "Buy it your way",
    "buttonBasketIcon": "shopping-basket-light"
  }
}

Add To Cart Button Icons

Display Price

Printess Allows to Display Product pricing. The Product Pricing is also decoupled from the editor itself to allow for pricing via the shop system or a coupled PIM.

Pricing can be influenced via Form Fields with the Price Relevant option switched on. Via Snippets with added price groups or with editable documents having a price category.

Price Relevant

The priceChanged() callback of the editor will inform the shop on used snippets, form field values and edited/added elements on documents. As a response the shop can set a product price by calling refreshPriceDisplay(). Please read more in our Embed the Editor API chapter