Appearance Settings

Buyer View Appearance

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.

UI-Selection

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.

Show Photo Snippets

Creative Photo Product

If Creative Photo Product is enabled, a Photo tab is shown on the Buyer Side. This is especially useful for crowded user interfaces or whenever you want to let users create beyond simple configurations. This tab also tidies up the different configuration options.

The Photos tab is automatically filled with layouts, stickers, and Form Fields as they are added. So don’t worry if the tab is not initially available when switched on.

Tab Navigation example

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.

Photo Frame Reset to Default Image

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.

Reset to Default

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:

Reset to Default BS Settings

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.

Reset to Default Groups

Reset to Default Images Groups

Additional Buyer Side Tab Options

Tabs are present depending on further configuration and appear automatically for some elements, like the Photos or Layouts tab.

Tab Navigation example

If Layout Snippets are present on a page a Layouts tab will appear. Layouts 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.

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

Tab Navigation example

The #PHOTOS tab is special as here you can add another choice to the Buyers Side Photos tab. Choosing #PHOTOS as a Stickers tab option means that these stickers will be shown in the Add Photo Frame tab next to the images, as shown above.

This tab should therefore only be chosen for stickers with photo content. If photo stickers in an ‘Add Photo Frame’ tab are present, the Buyer can drag and drop images to image frames.

If images are drag-dropped to a place where there is no image frame, a new image frame is created.

The Show Form Field tab will enable a tab where all Form Fields are shown. This is highly recommended if you have Form Fields to configure. Otherwise, the Buyer will need to go back and finalize a configuration to see available Form Fields.

The default caption is “Customization” in English browsers. You can also define your own caption and select a custom icon for the Form Field tab.

Page navigation 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.

Photo Book Example

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.

Step Navigation

Step Navigation

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.

Frame Display

Frame Display

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.
Frame Super Simple

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.
Frame With All Options

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

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

Frame Warnings Example

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 the Splitter option for a frame (in the Buyer Side features tab), the Scissor tool can be activated for Buyer Side to let the Buyer further fine-tune their product. When enabled, selecting a frame with Splitter enabled will display the Scissors toolbar:

Scissors Toolbar

The cloud icon lets users upload images. The scissor icons let users cut their frames vertically or horizontally. The grid icon lets users set the spaces between frames. The Text icon is dynamic and allows users to switch between text frames and image frames.

Splitter Cut GIF

Show Exit-Text-Edit Button

This enables the additional exit text edit button for inline editing (Only Desktop Mode).

Exit-Text-Edit Button

Template Title

Template Title

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.

Ui Hints Display

UI Hints

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.

Splitter Frame Hint

By default, this Hint Display is disabled. Once enabled, when a Buyer enters the Buyer Side, a walkthrough display will appear which explain how to effectively use the Splitter tool to create wonderful collages through an easy-to-follow 4 steps that detail how to use the feature to split and remove images, adjust the gap between image frames, and replace an image frame with a text frame.

Splitter Guide

Layout Snippets Display

Show Layout Dialog

When active, the Buyer will be forced to select a layout from the available Layout Snippets. This happens for every page with assigned Layout Snippets the Buyer visits first time.

Show Layout Dialog

Layout Snippet List

Allows control of the number of columns shown for the Layout Snippet selection. Show Layout Dialog

Auto Assign Single Page Layout Snippets to Selected Page

Auto Assign Single Page Layout

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

Show Image Count Filter

Controls wether or not the Image Count Filter will be shown, when Keyword Filter Menu is enabled.

Image Count Filter:

Image Count Filter

Treat Layout-Snippet as Single Page if Aspect-Ratio Delta is lower than…

Treat Layout Snippets as Single Page

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.

Images

Image Settings

Image distribution
This controls how multiple uploaded images should get distributed. 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. Additionally you can switch it to fill all frames and repeat the uploaded images until no frame is empty anymore.

Show Image Search Bar

Image Search Bar

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.

Allow Mobile Image Upload

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.

Mobile Image Upload

Allow ONLY Vector Image Upload (Currently only SVG)

This will restrict Buyer Upload to SVG files. This can be especially useful for engraving products.

Allow PDF Upload

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.

Screen Image Width

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.

Other Settings

Other Settings

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

Custom Color

Allow CMYK Colors

Allows Buyers to enter CMYK color values in the color dialog.

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.

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:

Copy and Paste Frames

Force [Shift + Enter] on Buyer-Side

This options forces the use of pressing [SHIFT+ENTER] to input a soft-break in rich 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.

Enable PriceTest

Enable Price Test

This section is all about testing the price display functionality of Printess, which is otherwise quite hard. Normally, testing price display would 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 in the General Settings chapter here.