User Manual Quickstart General Concepts Buyer Side Intro Switching between Designer & Buyer Side Paste Board & Document General Buyer Side 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 Snippets Styles and Form Fields Flex Designs Sub Documents Scripting Workflows Print Workflow Tutorial Videos Frame Features Resources Style Reference Change Log 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 Buyer Side 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

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.

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

Show Image Filters

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

Show Image Filters

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.

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 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:

One can also completly disable step numbers in the template preferences (See here)

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