Printess generally has two modes of operation:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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’.
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.
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.
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.
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:
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:
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.
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:
When additional text is added the bar moves down:
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.
Note: This option will only appear if you check one of the following buyer side options:
- single-line text content
- text-on-path content
- 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.
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:
Whenever you need a value (e.g. a name) to be populated in several places of a document.
A visual selection of options or additional info for a selection is needed.
If one needs to expose a configuration option from a Sub Document.
For special options like color schemes or document size selection.
If one likes to create a pure form based edit UI.
If values should be set before starting the editor (e.g. prefilled forms from a database).
Creating a form field is done in the resources panel - Create one by clicking on .
Once the form field has been created, one can change its name, its label and also the form type.
In general, there are three types of form fields for the Buyer Side.
A simple text field to enter text:
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.
The Text Area is meant for text input spanning several Lines of text. It does not support Text-Before or Text After.
A Select List is useful for letting a user choose from different options.
The Image List is made for all options where every value should be represented by an image.
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.
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.
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.
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.
Group & Layout Snippets enable the Buyer to change complete layouts or add design elements themselves.
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.