With this dialog, you can influence several general aspects of the Buyer Side. We recently completely reworked this dialog and added explanations and screenshots to make these powerful customization options easier to understand.
Notice: Most of the settings here are document-wide properties (can be different per document), so make sure you have the correct Buyer Side document selected while changing settings. Some settings are also duplicated from the Buyer Side or Document tab.
Here you set the general type of UI the Buyer will see.
You can select between a form-based Configuration Product where the settings for the Template are located to the right of the document view, or a Creative Photo Product which has a well-sorted tab on the left with the layout and sticker selection. This allows the Buyer to edit more freely. Here you can also create new custom tabs for the Buyer Side.
If Creative Photo Product is enabled, a Photo tab is shown at the Buyer Side. This is especially useful for crowded user interfaces or whenever you want to let users create beyond simple configurations.
Whenever a changeable image frame exists, Printess shows a tab where all uploaded images are visible. Clicking on one of the uploaded images will instantly put it into the image frame on the page. If several image placeholders are present, selecting another image will fill the second placeholder, and so on.
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.
To activate this default image setting, select Content on the Buyer Side frame features tab. This will cause additional options to appear, allowing you to select Reset to Default:
To enable this setting for groups, simply select the groups to include (or All). You must have image groups created for this setting to appear.
Tabs are present depending on further configuration and appear automatically for some elements, like the Photos, Layout Snippets or Sticker Snippets.
If Layout Snippets are present on a page a Layouts Tab will appear. Layout Snippets cannot appear in other Tabs.
Sticker Snippets can be assigned to one of the standard available tabs (Text, Stickers, Elements, Images) or you can define your own name and icon for a tab.
To set your own caption and icon choose custom in the drop down. This allows you to select an icon and overwrite the caption “custom” with your own.
There are two option to customize the Tab Navigation Bar.
Activate the checkbox to display Form Field Tab. By default it got the caption “Settings” but you can just type in your own in the input field “Tab Caption”. In addition you can choose from a large range of icons available for displaying. Click on the small triangle of the option “Tab Icon” to choose one.
To display a large number of Form Fields they can be organized across three different Tabs. Each Form Field must be assigned to a specific “Tab No.” to facilitate this distribution. This method streamlines the organization and enhances usability.
Learn how to define a Tab No. here.
Note: This feature is only available at the Panel UI!
By default the two options TEXT and PHOTOS are turned on.
In this case the local Sticker Snippet groups for TEXT and PHOTOS will be shown at the Buyer Side. If there are no local groups available, they fall back to the system Sticker Snippets.
If you like to add these groups to your Template you just need to press the buttons “Add Text Frames” and “Add Photo Frames” at the Sticker Snippet Tab of the Resources Panel.
By default there is a Sticker Snippet Group defined for each option.
You can assign additional Sticker Snippet Tags if you click into the search input field. To remove the predefined group just click the cross at the right of the blue bar.
At the Buyer Side two small icons will appear in the Tab Bar.
If the Buyer clicks on one of these the available Sticker Snippets will be displayed.
The Sticker Snippets are displayed sorted by their Topics. The Buyer can browse through these topics to select from the various Sticker Snippets available.
The Sticker Snippets “Single line text” and “Multi line text” are the only way to enable the Buyer to add basic text frames to a Printess Template!
As soon as the Buyer is placing a Text Sticker Snippet, the Text Frame Style button will be displayed at the Frame Bar or the Properties Panel.
If the Buyer clicks it, the Text Sticker Snippets will be displayed again to replace the current one selected.
After the Buyer placed a Photo Sticker Snippet and uploaded an image, the Image Tools will be displayed at the Properties Panel and/ or the Frame Bar.
If the Buyer clicks on the Image Tool button the available Photo Sticker Snippets will be displayed again at the Style Tab. Here another Photo Sticker Snippet could be selected to replace the current one.
And at the Adjustments Tab the Buyer can adjust the Image Settings.
These settings control how the Buyer can navigate between pages and documents within your Template.
Single Document Pages
When enabled, the Buyer can navigate the pages by directly selecting a page or by clicking the previous or next page arrows. If pages are named then the page name will be shown instead of the page number.
Multiple Documents and Page Icons
Enables page & document navigation with thumbnails of the respective pages/documents. Additionally, you can enable live updating of the thumbnails whenever a page’s content is changed. This mode disables step headers and will show the pages of all editable documents within the Template. This setting is required to add and remove pages, and is the recommended mode for Buyer-created documents such as books.
Please read more about our Book Mode in the Buyer Side general concepts chapter
Multiple Documents as Tabs
This option will allow you to display documents as tabs without using steps or Page Icons to navigate through single page documents. This is an enhancement to previous versions where the only other option was to use a step workflow.
Hide Page and Document Navigation
Hides all navigation elements to have more space for the document. This is useful for single page documents.
Show Page Buttons
This enables back and forth page navigation buttons on the right and left of the document viewport. Page buttons can be configured to appear only on desktop, mobile, both platforms, or never.
These settings influence how steps are annotated on the Buyer Side.
Read more in the Steps Workflow chapter.
To enable these settings at least one step must exist in the Template.
Here you can control the appearance and available options of editable frames.
Buyer Frame Style
In the Buyer View there are two ways a frame can be positioned, resized, and changed:
1. Super Simple
This mode presents frames in a minimalistic way which shows one resize point on the bottom right and (when allowed) a trashcan icon on the top left for deleting the frame. Right-clicking the frame will show the context menu for more advanced manipulation tools such as arrange, align, duplicate, and mirroring.
2. With all Options
This mode is perfect for more advanced users. Frames are presented with the usual plethora of options found in frame-oriented graphical software. Therefore, the frame corners are not available for additional functionality, as Printess presents them in a separate menu below the frame.
Highlight Editable Frames
Here you can select when editable frames will show a border to the buyer:
Never Only the selected element will have a border.
On Hover Frames will be shown when the buyer hovers over the view container (desktop only).
Always All editable frames will show a border.
Show Frame Icons
When switched on, editable frames on the Buyer Side will show an icon with the content type indicated on the top left of each frame.
Animate Selection Border
When switched on, the selected frame on the Buyer Side will be animated with a moving dotted line to highlight the frame being configured.
Show Step Numbers
The Steps Interface will by default show rounded numbers beside each frame with a Buyer-Step set. You can control this feature for the buyer side Template-wide with this setting. On Design-Side the step number will be always visible but appear grey when its turned of for Buyer Side.
Show Frame Warnings
Here you can influence the way the buyer is informed about various validation issues such as low-resolution images, overflowing text or missing characters. Besides showing no warning (none), you have the option to show a warning icon (sign) and/or a warning text (hint) on top of the frame.
Info: Only frames that have buyer-editable content will show warnings.
Below is the outcome of the settings shown for a low-resolution warning (sign and hint, sign only, hint only):
The following situations will generate error messages with warning signs & hints:
Error message at the time of checkout:
Show Expert Mode Button
This will show the Expert Mode Button on buyer side - but only if Sticker Snippets are available on the page (To protect layouts which should not get altered). In Expert Mode every frame can be moved, rotated, deleted and the frame menu will show up. This allows the experienced buyer to layout like wanted while protecting the unexperienced buyer from accidentally move frames when selecting.
Scissors Toolbar
When you enable this option the Scissor Toolbar is activated to let the Buyer fine-tune their product. Selecting a frame with Splitter enabled will display the Scissors toolbar:
To make this feature work you have to set the frame to “Splitter” and “Content”.
Learn more about the Splitter Settings here.
The cloud icon enables the Buyer to upload images.
The Scissor icons enables the Buyer to cut the frames vertically or horizontally.
The Grid icon enables the Buyer to set the spaces between frames.
The Text icon is dynamic and allows users to switch between text frames and image frames.
Show Exit-Text-Edit Button
This enables the additional exit text edit button for inline editing (Only Desktop Mode).
Here you can set a title which will be shown on Buyer-Side. Additionally you can provide a url to additional product info which will be displayed as overlay form.
When enabled, buyers will get useful hints on how to use the enabled items:
Additionally editable frames can show a ‘click-me’ icon on top.
By default this Hint Display is enabled. As soon as the Buyer clicks on an image frame of a Splitter Grid this Hint will appear. A walkthrough display will explain how to effectively use the Splitter tool to create wonderful collages. In an easy-to-follow 4 steps animation it will show how to use the feature to:
Show Layout Dialog
When active, the Buyer will be forced to select a Layout Snippets from the once assigned. This happens for the first Page of the first Document the Buyer visits first time.
Layout Snippet List
Allows control of the number of columns shown for the Layout Snippet selection.
Auto Assign Single Page Layout Snippets to Selected Page
Deactivates the option to allow Buyers to choose wether a Single Page Layout Snippet should be assigned to the left or the right page of a spread and assigns it automatically to the selected page.
Show Image Count Filter
Controls wether or not the Image Count Filter will be shown, when Keyword Filter Menu is enabled.
Image Count Filter:
Treat Layout-Snippet as Single Page if Aspect-Ratio Delta is lower than…
Controls how big the difference between the aspect-ratio of the Page and the aspect-ratio of the Layout Snippets can be to make Printess treat them as “Single Page” Layouts for this document.
Example:
Page-Size: “Square Big” = 21 cm x 21 cm
Layout-Snippet-Size: “DIN A4” = 21 cm x 29.7 cm
Aspect-Ratio Delta: (21 : 21) - (21 : 29.7) = 1 - 0.71 = 0.29
So for this example, you need to set the Aspect-Ratio Delta to lower than “0.3” in order to make Printess treat the Layout-Snippets as “Single Page” and auto-assign them to the selected Page.
Note:
Show Magic Photo Book Wizard
This AI feature works only in conjunction with the Image Layout Creation feature below. It allows the Buyer to create a photo book with just a few mouse clicks.
Learn how to create a Magic Photo Book
It will automatically activate the image upload option even if there is no image frame or placed on the Template. The Buyer can upload Images from the current or another device to get an overview of all images displayed. It shows the total amount of images where the Buyer can now select any image to delete it.
In a next step it shows the Wizard Dialog.
Here the Buyer can configure the automated rendering of the Magic Photo Book:
Define the number of pages of the photo book.
Define the minimum and maximum number of images placed per page or spread.
Preview of the pages and spreads with the number of images placed.
The Wizard detects screenshots and duplicates based on the image’s content to not use these images for the photo book creation. Even though they will be available at the Buyer Side to use them. The Buyer can deactivate the checkboxes to include these images into the photo book.
Pressing this button will start the generation of the Magic Photo Book.
Image Layout Creation
This feature can be used without the Show Magic Photo Book Wizard feature above for simpler photo products like a greeting card for example. It allows the Buyer to select multiple images to get automatically the perfect layout assigned.
Therefore you have to assign a Layout Snippet Tag. You can use the default “printess-basic-image-layouts” Tag or you can create your own Layout Library with your own Tag.
But you then have to make sure that the Layout Snippets are based on Splitter Grids. Otherwise Printess can not automatically split the image frames to offer different layouts with a different number of image frames per page.
Using the search input field you can add more Tags.
After the the upload the Buyer can select a number of images to be used.
Depending on the number of selected images a range of matching Layout Snippets will be shown when the Buyer clicks on the “Collage with X images” button. Therefore a separate dialog will open.
It shows the variations of layouts available for the specific number of images and suggests the “BEST FIT” Layout Snippet. The Buyer can choose one of these layouts to be used for his photo product and the images will automatically be placed in it.
You got three different options if the Buyer is uploading multi images at once to distribute them to the image frames.
On multi image upload
The default behavior is filling all empty image frames with uploaded images until either no empty frame is available or all uploaded images have been used.
Fill all frames
This will fill all frames and repeat the uploaded images until no frame is empty anymore.
Distribute Manually
This is similar to No 1 just that the Buyer needs to click the button Fill Frames before the distribution start.
These are global settings for all image frames of your Template which do have the option “Content” activated. At the Buyer Side the corresponding buttons will appear.
Show Image Background Remove Option
The button to use this option will be displayed as soon as the Buyer uploaded an image to the selected frame.
Show Image Upscale Option
Using this feature, the Buyer can upscale the uploaded image. The button will only be displayed if the resolution of the image is smaller than defined in the Buyer Side Settings of your Document.
Learn more about the Document resolution here.
Show Text to Image Generation Option
With the Bootstrap UI the Buyer has to upload an image first to access this feature. With the Panel UI an image frame even doesn’t has to be selected to use it. In this case Printess will automatically place an additional image frame on the page as soon as the AI image is generated. It will always use the SDXL Mode for the image generation.
fill
Will expand an image to fill the whole container, which may result in some cropping depending on the dimensions of your container and the image you send into it.
fit
Will resize an image to fit within the bounds of its container with no cropping.
Will display the names of the uploaded images at the Buyer Side.
If you wish to provide a lot of selectable images across many groups, simply select this function to enable a search bar for finding image groups within the provided image library.
Enabled by default, this option allows Buyers to upload images to the Buyer Side from their mobile devices. When a Buyer selects the Upload Images from Phone option, a QR Code will be generated which they can scan and use to upload photos from their mobile device to the desktop.
It is enabled by default but allows disabling SVGs for engraving products, where the actual engraving may not appear as it does on the screen. This setting does not influence the upload of jpg, png or PDF files.
Allow ONLY Vector Image Upload (Currently only SVG)
This will restrict the Buyer Upload to SVG files only. This can be especially useful for engraving products. It automatically disables the upload of jpg, png and PDF files!
By default Printess does not allow buyers to upload PDFs as faulty pdfs might make output files unusable. You can allow for PDF upload and to ensure error free output limit the upload to PDF/X-4 standard which grants well formed output.
The image size hint displays the exact image dimensions in pixel close to the upload button (desktop only).
This setting determines the maximum image width which may be loaded on Buyer Side. Adaptive means the Buyer Side UI will load higher resolution versions of the same image when the buyer zooms into the image, up to the maximum existing resolution. In rare situations where one must limit the maximum resolution for Buyer Side image previews, simply use this setting to select a specific maximum width.
Available Font Sizes
This defines the available font sizes within the Buyer Side. This also controls the available sizes for the buyer side copy-fitting function.
Enable Custom Colors
This always shows a color dialog on the Buyer Side and allows buyers to use a color picker (Chrome only) or enter an RGB color value (wherever color change is allowed).
Allow CMYK Colors
Allows Buyers to enter CMYK color values in the color dialog.
This is not supported for Multi Line Text. Here the Buyer can only pick CMYK colors from the named colors of the color selection.
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 Undo & Redo is mandatory if Expert mode is switched on.
Show Save Button
Shows a Save button which enables Buyers to save their work at any time and return to it later.
Show Save & Quit Button
Displays a Save & Quit button on the Buyer Side which will let Buyers save their work and exits the page.
Show Proof Button
Caution: Creating Proof PDFs involve costs! You have to enable this feature in the Shop Proof Settings.
Shows a “Proof” button at The Buyer Side. The Buyer can generate a Proof-PDF in a new browser tab.
Read more about Shop Proof Settings here
Apply Document Bleed Proof PDF
If you have Show Proof Button at the Buyer Side activated this function will add the bleed you defined in the Document to the PDF.
Allow Copy & Paste
When enabled, this setting allows Buyers to cut, copy, and paste frames which have Position and Delete enabled in the Buyer Side frame settings:
Force [Shift + Enter] on Buyer-Side
This options forces the use of pressing [SHIFT+ENTER] to input a soft-break in multi line text editing. [ENTER] without [SHIFT] will insert a new paragraph. The default behavior is that the buyer only needs to press [ENTER] to insert a soft-break and twice [ENTER] to insert a new paragraph.
Show Magic Layout Wizard
Enables the AI based Layout Wizard for B2B marketing materials. It automatically creates hundreds of Layouts including images and text content for the Buyer’s Business.
As soon as you activate this feature a message window will open:
It tells you that all necessary components will be added to your Template and that the Template itself will be saved and published. These actions ensure that the Magic Layouts do work as soon as you switch to the Buyer Side.
We recommend to not replace or remove the Layout Snippet Tag which is assigned here by default.
Learn how to create Magic layouts on your own
This is for testing only!
Testing price display would normally involve coding as prices will originate in the shop or PIM system of your business. Please note that this is only for testing within the Designer and will not display if you call the Template from within your integration (you will still need to connect your shop backend).
Please read more about price display functionality in the Buyer Side chapter.
These and other Buyer Side settings with documents scope are explained in further detail here.