User Manual Quickstart General Concepts Buyer Side Intro Switching between Designer & Buyer Side Paste Board & Document General Settings Text Editing General Settings Buyer Side Settings for Frames Groups in Buyer Side Auto Size Text in Group Snippets Background Frames Form Fields User Interface Elements Group Snippets & Layout Snippets Steps Workflow Buyer Side Language Snippets Styles and Form Fields Flex Designs Sub Documents Scripting Workflows 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

Buyer Side

Intro

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.

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 byuer side. This ensures that one does not destroy or change the template while testing. For the same reson 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

Rich Text Editor
When this option is enabled, Printess allows for rich text editing, giving the Buyer the option to format a text with different fonts, sizes and colors down to the character level. If switched off, Printess will instead show one or multiple form field(s) to edit the text. Note, rich text editing only works on desktop browsers - the Mobile UI for Multi Line text will still be form based for a better user experience.

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. If the Buyer should not be able to change the format of single characters or words switch this option to ‘Entire Text’.

Restrict Text Formatting

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 Multi Line fraem 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.

General Settings

Keep Frames Inside Pages
ShowUdoRedo0 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. Frames which are only changeable on design side can be of any resolution.

Minimum Image DPI

There is also an API method to requeest 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.

Allow Zoom & Pan
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.

Show Undo & Redo
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 Page Navigation
Show Page Navigation
By default a page navigation is shown on Buyer Side for every document with more than one page. Page Navigation

Switching the page navigation off may make sense for some documents or UI approaches (e.g. when using back & forward icons within the view-container on the pages).

Show Page Buttons
Show Page Buttons
This switch enables page navigation directly in the view container by providing a forward and back button. Here is an example Buyer Side with Page Buttons switched on.
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 isselected. Additional options like Form Fields and Group 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. Herre is an example of a document with switched on My Images Tab additional Form Fileds and Group Snippets:
Show My Images Tab Example

Show All Image Filters
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.

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 Group Snippets, which are always grouped and therefore expose just one simple UI to the Buyer.

Auto Size Text in Group Snippets

Growing multi line text can shift elements below it which are in the same group. This is a usefull 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 neccesary.

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 to complicated to understand and near to impossible on mobile platforms. Therfore 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 Group 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 prerequisits 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.

(Please 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.

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

Click 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 fileds 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

Group Snippets & Layout Snippets

Group & 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 Group 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: Group Snippets are the only way (and a nice one) to provide Buyers with the ability to insert their own text and image frames. E.g. Just create a Group Snippet with a Single Line text frame and the style you like and create a Group 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 to e.g. 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 exists 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 merge documents 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 neccesary in case your documents has form fields, color schemes or other global settings which needs to get 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 imidiatly 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

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 breadcrump 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 russion (ru) if a needed language is missing it can get added. 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 an 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 e.g. translate example text used througout the template. As an example we can translate the typical sample names and adresses 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 his 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 Cutomization

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