Please see our in-depth Buyer Side section for more information on how to create powerful user interfaces for documents.
Info: If no Frame is selected, you will access the Buyer Side general settings. Read more about the general settings here
Set a condition on whether or not this Document should be shown on Buyer-Side.
For this example we set the condition to only show the Document on Desktop:
You can add multiple conditions and connect them via “and” or “or”. When a condition is currently true, it will show a green border and state “true” after “Show Document:”.
When 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.
Rotation: The Buyer can rotate the frame. This will show a rotation slider on the Buyer Side.
When both Rotation and Position are enabled, a rotation icon will appear on top of the selected frame:
Groups and Rotation
If rotation is used for a group, no slider will be shown and the group frame must be rotated using the rotation icon on the frame. As rotating groups will also reposition frames, you must also enable the Position option, otherwise no rotation icon will be shown.
Position: The Buyer can resize and position the frame freely on the page. As long as Keep Frames inside Pages is not enabled in the Buyer Side general settings, a Buyer can also move frames outside the page or onto other pages.
Mirror: Allows the Buyer to mirror a frame horizontally or vertically by right-clicking on the frame.
Delete: The Buyer can delete the frame by selecting the trashcan icon or right-clicking on the frame.
Depending on the existing frame features, additional options will be displayed:
Arch: Controls the angle of an Arch (-90 to 90). Arch Warp needs to be switched on for the frame for this option to appear.
A powerful image frame manipulation tool, the Splitter option allows Buyers to vertically and horizontally split images as well as reposition image frames, all while keeping a set distance on the provided grid.
Take the Splitter tool for a test drive with our Baby Photo Book example (Pages 4 & 6):
Notice: To enable the Splitter tool, you must also enable Content in the Image feature Buyer Side settings:
The default distance between split images is set as a percentage of the document width. This can be changed on the Buyer Side with the Scissor toolbar or by right-clicking on an image frame in the Editor and selecting the desired gap size from the Frame Context menu.
When using the Frame Context menu to set the gap distance, simply select two frames with Splitter enabled and then right click on one of them:
The Scissor options in the Frame Context menu also allow users to further manipulate the gaps around the frame with Add Gap Around and Remove Gap Around. These options resize the outside borders of the frames to the defined gap size settings and the settings are saved when the document is placed as a Layout Snippet.
Additionally, you can configure the Splitter-Snippet tags for your frames. The default values are as shown below:
Check out our quick Splitter tool video tutorial below for more information on this feature:
Content: Will let the Buyer upload new images and/or select a template image. The Buyer can also scale and pan them and use image filters, depending on your general settings.
Note: Image Size for upload is limited to max. 160 MPixel and 50MB file size.
Selecting Content will also enable additional Buyer Side image options:
Mandatory: The Buyer must change this image and will be informed accordingly. This is useful to dissuade customers from accidentally buying products with example images in the final product.
Placement: Allows Buyers to choose a fitting mode for an uploaded image.
With placement, the Buyer can choose between:
We recommend to allow placement especially for stickers as you never know what the buyers intend is. e.g. if the buyer wants to upload a Logo and the image frame is set to Fill there is no chance for the buyer to insert the logo uncropped unless he can switch placement to fit.
Reset to Default: Allows the Buyer to reset the image frame to the default image set in the Editor.
Depending on the UI settings (with or without groups), a button or thumbnail will appear on the Buyer Side Photo Frame tab to restore the image back to a default image.
Don’t Print if not Changed: Disable output of this image unless it is changed by the Buyer.
ExchangeID: Define an ID for this image to keep its content when the layout is changed. Learn more in the Snippets Chapter.
SVG Colors: This is a special feature only for SVG graphics. It lets Buyers change the colors of a SVG graphic. In order to use this feature you have to define the customizable colors first. Read more about replacing colors in SVG.
The Buyer Upload Image Group is a special Image Group. It is always there by default and is also the group where all of the images a customer uploads will be shown in. So if one does not enable the Buyer Upload Group, customers will not be able to upload new images.
If the Buyer should be able to additionally or exclusively select an image from a given library of images, one must select at least one Image Group containing an uploaded image.
Read more about creating Image Groups here.
Enabling the Auto Distribute feature for an image frame will autofill the frame with an image when a Buyer uploads multiple images.
This means that all unused Buyer uploaded images will be distributed across all image frames in the document with the Auto Distribute this Image feature switched on.
As Auto Distribute can happen in a lot of scenarios we strongly recommend not to use this feature for image frames within Stickers as it may lead to confusion (e.g. buyer is inserting a photo sticker frame and it instantly gets filled with an unused image sometimes).
Auto Distribute will also override placement settings distributed images will be inserted in fill mode.
If a document is designated as a Snippet, then enabling this feature allows an image frame to be selected as the target of an image to be inserted within an Image Filter Snippet. With this feature, you can build decorations around images and apply wonderful effects on photos to be further personalized by the Buyer.
Please see the Snippet chapter on Image Filter Snippets for more information on this feature!
Content - Will allow the Buyer to change the text in the frame. You may also limit the number of characters allowed in this frame by setting a Max. Chars value in the Single-Line text properties tab.
Selecting Content also enables additional features:
Color: Lets Buyers select a different color for the text. The available colors are defined by the selected Color Groups.
Mandatory: This forces the Buyer to change the text and will prompt a warning when it is left unchanged. This is very useful to prevent customers from accidentally buying products with example text in the final product.
Clear on Focus: When enabled, the text content will be deleted when the Buyer starts editing.
For this feature to work with Single Line texts, Inline Editing needs to be switched off.
To disable Inline Single Line Text Editing, simply deselect the text frame and enter the Buyer Side general settings:
Keep Form Fields: Allows Buyers to enter or change expressions (e.g. ${data.firstname}) which will get evaluated. This is needed for data-driven workflows as expressions otherwise can be only entered in Designer Side.
Don’t Print if not Changed: Disables output of this content unless it is changed. This allows text frames with instructions such as, “Put optional text here …” which simply disappears if not changed.
This is very useful for creating optional image titles.
Font: Allows the Buyer to select from various fonts uploaded to the Font resource tab.
Stroke Color: Allows Buyers to select a color for the stroke of the text (must have a stroke enabled). The selection of available colors is shared with Color.
Stroke Width: Allows Buyers to smoothly adjust the stroke width of the text.
Offensive: Enables a check against the defined offensive word list (either supplied in the Printess Account Portal or via API).
Caption: Enter an optional caption for the input field of this frame.
ExchangeID: This is a special setting for Layout Snippets. Here one can set an identifier for the content of this frame. Using the same identifier between different Snippets allows customers to change the design but keep the content already entered. Read more in the Snippets chapter.
Content: Will allow the Buyer to change the text in the frame. You may also limit the number of characters allowed in this frame by setting a Max. Chars value in the Text on Path feature properties tab.
Color: Lets Buyers select a different color for the text. The available colors are defined by the selected Color Groups.
Mandatory: When mandatory is enabled, the Buyer must change this text and will be informed accordingly. This is useful to avoid customers accidentally buying products with example text in the final product.
Keep Form Fields: Allows Buyers to enter or change expressions (e.g. ${data.firstname}) which will be evaluated. This is needed for data-driven workflows, as otherwise expressions can be only entered in Designer Side.
Offensive: Enables the check against the defined offensive word list (either supplied in the Printess Account Portal or via API).
Don’t Print if not Changed: Disables output of this frame unless it is changed. This allows for text frames with instructions like ‘put optional text here …’ which simply disappear if not changed.
Font: Allows the Buyer to select from various fonts uploaded to the Font resource tab.
Stroke Color: Allows Buyers to select a color for the stroke of the text (must have a stroke enabled). The selection of available colors is shared with color.
Stroke Width: Allows Buyers to smoothly adjust the stroke width of the text.
Clear on Focus: When enabled, the text content will be deleted when the buyer starts editing.
Caption: Enter an optional caption for the input field of this frame.
ExchangeID: Define an ID for this text to keep its content when the layout is changed Learn more in the Snippets Chapter.
Shape: These settings refer to the path (shape) the text runs on. Learn more about Shape Feature Settings.
Content: Allows the Buyer to change the text in the frame. Depending on the general edit settings for Multi Line text, Buyers can either directly use the rich text Editor on desktop browsers or edit the form-based text.
Color: Allows choosing a different color for the text. Granularity works the same as for font. The available colors are defined by the selected Color Groups. Selected Text-Color will set also the text-effect colors.
Horiz. Align: When selected, customers can change the horizontal alignment of paragraphs. Depending on the general edit settings for Multi Line text this can affect the complete text or only paragraphs.
Bullet: Allows Buyers to set the horizontal alignment to a list with bullets. Read more about Bullet Lists.
Vert. Align: When selected, Buyers can control the vertical alignment of the text within the frame.
Mandatory: When selected, the Buyer must change this text or a warning message will prompt them to change it before continuing. This is useful to avoid customers accidentally buying products with example text in the final product.
Clear on Focus: When this is enabled the text content will be deleted when the Buyer starts editing.
Keep Form Fields: Allows Buyers to enter or change expressions (e.g. ${data.firstname}) which will be evaluated. This is needed for data-driven workflows, as expressions otherwise can be only entered in the Designer side.
Insert Form Fields: This lets a Buyer insert Form Fields by right-clicking on the page (currently only available on desktop). Makes sense to be used in conjunction with Keep Form Fields, because only enabling the latter feature will not actually resolve Form Fields on the Buyer Side.
Don’t Print if not Changed: Disables the output of this frame unless it is changed. This allows for text frames with instructions like ‘put optional text here …’ which simply disappear if not changed.
Font: Lets the Buyer choose a different font for the text. Depending on the general edit settings for Multi Line text, Buyers can control text down to the character level, paragraph level, or for the complete text. Available fonts are defined by the selected Font Groups.
Size: Allows choosing a different font size for the text. Granularity works the same as for font and color.
Offensive: Enables the check against the defined offensive word list (either supplied in the Printess Account Portal or via API).
Upload Handwriting Image: This gives the Buyer an option to exchange the text with a photographed handwritten message. Printess will automatically apply a monochrome filter to eliminate gradients in the background and provide a crisp look for the message.
The Buyer can adjust the contrast level for optimal visibility as well as the color of the writing. If the Buyer selects Back to Text Editing, the uploaded photo will be discarded and the previous Multi Line text will appear again.
Caption: Enter an optional caption for the input field of this frame.
ExchangeID: Define an ID for this text to keep its content when the layout is changed Learn more in the Snippets Chapter.
Paragraph Styles: Opens a search box that lets you apply paragraph styles to the Multi Line text frame which the Buyer can then select from.
This Buyer Side tab setting will tell Printess to automatically adjust the overall document size as a Multi Line text frame is expanded with additional text.
To enable the Adjust Document Height setting, select a Multi Line text frame and in the Text tab set the Auto Frame Size to Height:
Then simply enable Adjust Document Height in the Buyer Side tab.
This text feature forces text validation for frames that are not editable but contain Form Fields. This is to detect for example a text overflow when the user just edits the content of a form field that is used in a text box.
Color: Allows Buyers to select a different color for the shape. The available colors are defined by the selected Color Groups.
Stroke Color: Lets Buyers also select a color for the stroke of the shape (must have a stroke enabled). The selection of available colors is shared with Color.
Stroke Width: Allows Buyers to smoothly adjust the stroke width of the shape.
Opacity: Allows Buyers to smoothly adjust the frames opacity.
Form Fields: Allow Buyers to click on the Sub Document frame and configure its Form Fields.
Exchange ID:
Original Properties: Allow Buyers to select the Sub Document frame and configure properties of the original document that are set as editable on the Buyer Side. This feature is enabled by default when inserting a sub document frame.
Notice: If you have multiple occurrences of the same Sub Document be aware that this will change the property of all of them.
Enabling Show Spread as Form Field will create a document level auto-generated Form Field for the selected frame, that controls the displayed spread (page) of a Sub Document.
This will allow the Buyer to change the displayed spread (page) on the Buyer Side.
Only appears when Form Fields or Original Properties is checked.
All frames with Is Background Frame enabled will only be selectable from the Background button on the Buyer Side:
Here you can set up a Step Workflow to create an intuitive and fun Buyer Side experience for your customers! Use this to assign steps to frames and change the step indicator button’s position on each frame.
Auto Focus pre-selects the indicated frame on the Buyer Side, applying the first uploaded image to this frame (when image frame) or having any other enabled frame features for this frame already accessible when a Buyer begins to edit the page.
Auto Focus can only be applied to one frame per page.
This enables a frame to be set as a part of the Buyer Side UI. So whenever a Buyer clicks on the frame/button, the document will react.
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.
Check out our Buyer Side General Concepts chapter for more on this feature and its functionalities!