With Printess you can create feature-rich and eye-catching 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 Editor is used to create Templates, Sub Documents, 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 quickly check 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 case cover
One of the superpowers of Printess is that the Buyer Side UI is also available on mobile devices! Although it will show up as a different interface, it is completely integrated with the desktop view.
Below is the same example displayed on a mobile phone:
Although you 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.
To make it as easy as possible to customize the Buyer Side user interface, you can always switch between the 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. This ensures that one does not destroy or change the Template while testing.
For this same reason, the Undo tool for Buyer Side is limited to changes made in the Buyer Side so you cannot accidentally revert Designer Side changes.
The Paste Board is the area around the document where design elements are still visible. For example, 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.
Example: Custom T-Shirt designer
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.
You 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.
Buyer Side Page Border is disabled so that the document borders are not shown.
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 Buyer Side general settings:
Printess allows you to control how a Buyer can 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 in which to enter text. This behavior can be independently set for desktop and mobile platforms.
Notice: When Inline Editing is enabled, frames will behave differently depending on the Buyer Side setting to allow position changes of a frame. If position changes are allowed, the Buyer will need to start editing by selecting the edit icon on top of the frame. If position changes are not allowed, the frame will directly enter 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 be set for desktop only or for desktop & mobile devices.
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 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.
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 Inline Rich Text Editing is enabled.
Selection or Paragraph: The Buyer can select a portion of the text and change the format. If no selection is present the changes will be applied to the current paragraph.
Entire Text: The Buyer will not be able to change the format of single characters or words. Format changes will always be applied to the complete text.
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 be applied to the complete text.
Split Paragraphs
When editing Multi Line text in form-based mode, this option will divide it into differently formatted paragraphs and provide one Form Field for each block. This will automatically occur if the Buyer is using a mobile device or if the text frame is grouped together with other frames.
Only differently formatted paragraphs are taken into account, while different character styles are discarded. To make sure the full paragraph is selected while formatting, just place the cursor in the paragraph and change the 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 erases all character formats but keeps the paragraph Styles & formats which makes your Multi Line text safe for form-based editing.
White Text Cursor
Sometimes an inverting cursor does not cut it, especially on mid tone backgrounds. In this case, a white text cursor can be enabled to enhance visibility.
Keep Frames Inside Pages
This will ensure that the Buyer cannot accidentally move frames outside of the page boundaries. Do not use this option if Buyers need to be able to place elements into bleed.
Minimum DPI for Images
Here you can set the minimum required DPI for images.
Whenever a Buyer goes below this resolution (by 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.
Info: Resolution warnings will only be shown for image frames that have editable content switched on in Buyer Side configuration, and if the image is changed or uploaded by the Buyer. Images that are only changeable on the Designer Side (and default images) can be of any resolution.
There is also an API method to request any resolution warning or overflow text within a design at the time of saving to the basket. This ensures that your shop system gets the chance to inform the customer about potential quality issues, or to even deny the purchase.
See our API section for more information!
Show Document as Buyer Step
This will show the current document as a Buyer Step. Please read more about this powerful feature in the Steps Workflow section of this chapter!
Document Title
This defines the name of the document which will be shown on Buyer Side.
Price Category
Pricing can be influenced via Form Fields with the Price Relevant option switched on, Snippets with added price groups, or with editable documents having a price category (as shown below):
Here you can define the price category for the document.
Exchange ID
Exchange IDs are used to ensure Buyer edits are saved, even when a Layout Snippet is changed. Single Line text, Multi Line text, Text on Path, and images are all supported by this feature.
With the Exchange ID, you can mark a frame in all Buyer selectable Layout Snippets with a unique content ID. When the Buyer changes the Layout Snippet, all edits are kept and transferred to the frame with the same Exchange ID in the new Snippet.
Allow Zoom & Pan
This setting controls if the Buyer can zoom, pan into the document, or move between pages. This option is switched on by default.
Allowing Zoom & Pan will only affect the ability of a Buyer to zoom and pan. Even with the option turned off, Printess will still zoom in on edited items in mobile and to Buyer Steps on desktop if the zoom mode is set to frame mode.
Show Zoom Options
This enables the Buyer Side zoom buttons. Depending on the Buyer View Appearance settings, either a magnifying glass icon or Zoom-In and Zoom-Out buttons are shown. A drop-down menu also allows users to zoom to the left or right page (depending on the current page) or zoom to the full page.
Show Page Buttons
This will enable back and forward buttons for page navigation right and left to the document viewport. Page Buttons can be configured to appear on desktop, mobile, or both platforms.
More Options
This will open the Buyer View Appearance settings.
Buyer can add Spreads or Pages
Book Inside Pages allows for adding and removing 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 spread adding and removing.
Whenever Adding Spreads or Pages is allowed, the Buyer will also see an arrange pages button which opens a dialog to add, delete or rearrange pages by drag-dropping them to the desired position.
Layouts for new Spreads
This setting will allow you to choose a Layout Snippet to apply to any new spread created on the Buyer Side.
Add Frames from Layer
When spreads are added you 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 warning is shown, the Editor will also navigate to the first empty page.
Book Inside Pages really shines in conjunction with the Icon Page Navigation Mode in the Buyer View Preferences. In Icon mode all editable pages in a document are shown as Icons. This allows you 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:
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 Use Frame as Button at the bottom of the tab and choose either add or remove in the Add or Remove Page Action drop-down.
Note that this drop-down will be only visible if you allow adding pages and Book Inside Pages is switched on.
Read more about Buyer Side UI elements here.
Adding a Cover Page with Spine
If you want to add a customizable Cover Page with a spine to a Book template, have a look at Cover Page & Spine in the Frame Features section.
Brightness, Hue, Sepia …
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.
If a frame is selected, the Buyer Side tab will show the Buyer Side frame configuration options. By default, a frame and its content are neither selectable nor changeable on Buyer Side.
Learn more about Buyer Side settings for frames in our in-depth frame features chapter.
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 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 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 second Single Line text frames have the same color.
Printess will automatically create the following Buyer Side UI configuration 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 Sticker Snippets, which are always grouped and thus will expose one simple UI to the Buyer.
Growing Multi Line text can shift elements below it that are in the same group. This is a useful feature to let a signature below a letter move down when the letter text 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. No additional configuration beside grouping the text is necessary for the elements to be shifted.
In this example we placed a simple gray bar shape below an auto-size text:
When additional text is added the gray bar moves down:
.
Learn about Auto Size Settings here!
The Buyer Side will not allow users to click through (select frames which are behind frames). Therefore, Printess has another way to configure such frames. This is done through the Is Background Frame option.
.
Info: This option will only appear if you check one of the following Buyer Side options:
If at least one Background Frame exists within a document, the Buyer Side will show a Background tab which is used to change the allowed properties. When 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 Is Background Frame option switched on are not selectable.
A good example for this is the Puzzle example, which is also available in the create new document section. In this example, the image (which is potentially behind added Snippets) can still be changed as a background.
.
You can create a very special mode for using image frames to control the document size. For this to work, the following 3 prerequisites must be met:
The image frame must be set to Is Background Frame
The document must be set to have document size controlled by the DOCUMENT_SIZE From Field:
With these 3 prerequisites set, the Adjust Document Size option can now be enabled. This will cause the document aspect ratio to be set to match any uploaded image:
As described in Buyer Side settings - making an element editable in a document does not always need a Form Field.
But it is important to note that Form Fields have several use cases where they are mandatory, such as:
A new Form Field can be created by clicking on the Add Form Field button 
in the Form Field tab’s resource panel. This will create a Form Field with a standard text input that asks for a text on the Buyer Side.
Once a Form Field has been created, you can change its name, label, and form type at any time in the Form Field properties.
A selection of powerful preconfigured Form Fields can also be created in the Form Field or Style tabs through the Wizard button 
or with the Wizard icon 
on the resources panel.
With the Form Field and Stlye Wizard, simply select the Form Field Template you would like to insert and enter names for the Style and Form Field that the Wizard will create.
Read more about creating Form Fields here.
Below is a brief overview for the Buyer Side previews of each Form Field User Interface, to read more about each User Interface see our Form Field resources section.
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.
The Color List creates a simple color selection menu on the Buyer Side.
Image ID interfaces are used to let a Buyer choose one image to distribute across multiple frames and/or documents.
The checkbox Form Field exposes a table with only two values: True and False.
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 with the Use Frame as Button option in the Buyer Side settings. This enables a frame to be set as a part of the Buyer Side UI.
So, whenever a Buyer clicks on the button, 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.
When Use Frame as Button is enabled, the checkbox will move to the top of the Buyer Side frame features and additional options (such as setting Form Field values) will be made available.
Info: UI frames will not be part of any output (PDF or image).
If Set Form Field Value is enabled, you can select a Form Field and a value that the Form Field should be set to the moment a 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, you can add more Form Fields to set other values in parallel.
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 Use Frame as Button, enabled Set Form Field Value, 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. Below is how this example looks on the Buyer Side:
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.
For a great example of the power of the Set Form Field Value and Use Frame as Button settings, please check out our Custom Avatar T-Shirt example!
Sticker & Layout Snippets enable the Buyer to change complete layouts or add design elements themselves.
To understand how to create Layout and Sticker Snippets please read the following chapters:
Sticker Snippets Overview - This provides a great overview of Snippets, with how to create and tag them.
Layout Snippets Overview - See here for an overview on how to use these powerful page design blocks.
Sticker Snippets Tab - Here you will learn how to assign Sticker Snippets to the Buyer Side by using tags.
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 - don’t forget to set the Buyer Side settings to allow for content and maybe color control! The Buyer can then insert this text frame and edit it.
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 that is used afterward 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, as well as configure elements in their own order.
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.
The selected number is however local to its page. As Printess offers options to resort or rearrange pages, the Buyer Side editor will change it to the final step number at the 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:
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.
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 would 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.
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 a shape frame and adding a workflow step to it. Then pin all your Form Fields to this frame (Form Fields must be document-type Form Fields to be 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.
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.
Display Documents Conditionally
If either Icon-Page-Navigation is enabled and a document is set to editable, or the document is shown 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:
Document conditions cannot be applied to Primary Documents.
One can influence the appearance of the step numbers (badges) and the step captions (title) in the Buyer View Appearance dialog. (Find it here!)
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 step 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.
By default, the editor will show the Buyer Side interface in the language the browser is set to - if the language fits one of our currently implemented languages: English (en), Spanish (es), Finnish (fi), French (fr), Swedish (se) and Russian (ru).
Please contact us if a needed language is missing so we can add it. Additionally, you can explicitly set the language the browser should display when integrating the editor in your shop.
Printess also allows you to provide your own translations, change existing translations, and even include translations for example values in Templates!
Translation tables can be added or altered in the Account Management Portal under Translations.
One can also directly provide a fixed translation object when attaching the editor. Please learn more in our API section
For this please look up the translation.json inside our ‘Getting Started’ GitHub repository which contains all translatable UI text as well as all prompts and error messages.
Check out the repository here!
In this file, you will already see two reserved object namespaces - Used UI and Error - we recommend to only use these namespaces to overwrite existing translations you 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 Multi Line texts and the content will be looked up from the global translation tables before being displayed to the Buyer.
This can be 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"
}
}
The custom translation table can also be used as a reference guide to change Buyer Side UI icons and text. All text and labels can be changed. This enables you to totally customize your Buyer’s user inferface.
For example, below is the standerd Buyer Side UI text for the Custom Photo Product tab on the Buyer Side:
We easily change this in the Custom Translation table using the ui.imageTab and ui.uploadMultipleImagesInfo tags and writing the desired text:
{
"ui": {
"imageTab": "Upload Photo",
"uploadMultipleImagesInfo": "Hint: Multiple photos can be uploaded at the same time!"
}
}
This changes the Buyer Side “Upload Images” button text to “Upload Photo” and the text underneath the image upload button from “Tip: You can upload multiple images at once!” to “Hint: Multiple photos can be uploaded at the same time!”
You can use the Printess translation tables to find all labels and easily change them to best suit your product.
Info: Buyer Side Creative Photo Tab icons and text are changed through the Tab Caption and Tab Icon settings.
Changing Labels and Icons on Mobile
Labels and Icons can also be changed the same way for the Buyer Side view on mobile devices.
Let’s change the mobile shopping cart from “shopping-cart-add” icon to “Buy Now!” text:
{
"ui": {
"buttonBasketMobile": "Buy Now!"
}
}
This changed the shopping cart icon to a text:
The Buyer Side Add to Cart and Exit buttons can receive special customization via the translation feature.
You can decide if they should show a text, text & icon, or just an icon. To achieve this, these buttons will have two available translation strings, one for the icon which can 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:
For the Exit button the following icons are available:
See these example combinations and their input:
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"
}
}
Additionally you can also directly add an svg instead of an icon name for a custom basket icon.
Example:
{
"ui": {
"buttonBasketIcon": "<svg xmlns='http://www.w3.org/2000/svg' class='icon icon-cart-empty' aria-hidden='true' focusable='false' role='presentation' viewBox='10 10 20 20' fill='none'><path d='m15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33l-.78-11.61zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1 -9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z' fill='currentColor' fill-rule='evenodd'/></svg>"
}
}
This will create the following Add to Basket button
Printess allows you to Display Product pricing. The Product Pricing is 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.
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.
Below is our current list of selectable icons and their names:
