User Manual Quickstart General Concepts Buyer Side Snippets Creating & Exporting Snippets Using Snippets Repeat Layout Snippets Keep Content with Exchange ID Assigning Snippets to Buyer Side Image Filter Snippets Engraving Styles and Form Fields Flex Designs Sub Documents Scripting Workflows Editing Workflow Production Workflow Tutorial Videos Frame Features Resources Account Portal Style Reference Change Log Known Bugs & Limitations Glossary Acknowledgements Api Reference Authorization Tokens Embedding The Editor Custom Integration Backend Api

Snippets

Snippets are a great way to create easily configurable documents for Buyers.

There are two different types of Snippets:

1. Sticker Snippets

Goup Snippets

Sticker Snippets are small design blocks that are easily placed and personalized by a Buyer. They automatically stick together and all of their editable texts and images are grouped into a one simple to use UI for editing.

An exception are Snippets which contain only one Frame. This single Frame will not be grouped and therefore allows for Snippets which can later on be used like a single Frame. This is perfect for building a Snippet library in the Designer Side!

Note: We recommend to avoid Flex settings like Anchors and %, %%, <% units in Sticker Snippets as it will lead to unexpected behavior of the Sticker Snippet when inserted into a target document.

2. Layout Snippets

Layout Snippets

Layout Snippets are page design blocks which can be used when a Buyer needs to have multiple choices between different page layouts such as inside pages in greeting cards, layouts with different amounts of images for photobooks, etc.

Snippets may also be used in Designer Side as a library of complex, functional building blocks that a Template designer can quickly utilize instead of rebuilding them all the time.

Note: Please read the Snippets chapter in the Resources tab to find out how to use Snippets and how to define selectable Snippets for the Buyer Side.

Creating & Exporting Snippets

Creating Snippets is easy because every created document is already a Snippet!
The only thing left to do is to mark the document as a Snippet document, tag it, give it a name and publish it. After that, it will be available to add as a possible choice for Buyers or used on the Designer Side.

Note: Snippets can contain one or multiple pages. Normal Layout Snippets are specific to a page and are inserted at the current page and if the snippet has more page extend to the following pages until the snippet or the document it gets inserted into has no more pages. Snippets can also be of type repeat snippets which always span the complete document and even allow to use normal layout snippets in conjunction with them. See chapter Repeat Snippets below.

Let’s go through the complete process step by step:

1. Design a Snippet

In this example, we are going to create a Sticker Snippet to be added and configured by a Buyer later on.

Create Snippet

2. Define Possible Buyer Side Changes

We want the text to be editable later so we will enable content editing for both text frames in the Buyer Side settings. Once you are done configuring your Buyer Side settings, switch to the Buyer Side view by clicking on the Shopping Basket icon in the top menu bar.

Create Snippet

4. Make a Sticker Snippet Document

Right-click on the document name in the top menu bar to open the Context menu. In the Document Context menu click on Group-Snippet.

Create Snippet

4. Give it a Title and Tag(s) & Thumbnail

Go to the document settings (deselect all frames and navigate to the ruler icon on the features panel). At the bottom of the tab define the label(s) for the Snippet that will show up on the Buyer Side. Then, either select from existing Snippet tags or create a new one. This will define in which categories the Snippet will later be shown.

Create Snippet

Optional Thumbnail By default, the thumbnail for a Snippet is created from the Snippet automatically. If one wants to define a special thumbnail for a Snippet it can get uploaded here.
Create Snippet

5. Publish the Snippet

Choose Publish Snippets (located in the cloud icon drop-down) in the top menu bar, which will publish all Snippets in the actual Template.

Create Snippet

After this, the new Snippet is available for use.

Please see here for details on how to enable published Snippets to be added to the Buyer Side or how to use them on the Designer Side.

Sub Documents in Snippets

Snippets can contain Sub Documents that will automatically be imported when a Snippet is used.

Although, if you want to use Sub Documents you have to be aware of certain limitations.

Form Fields and Styles in Sub Documents

Sub Documents imported together with a Snippet will only carry over document resources such as form fields and Styles. Avoid using Template Styles for form fields. Instead, make sure they are created at the (Sub)-Document level and NOT on the Template level.
Read more about Styles and Form Fields in the Resources chapter.

Using Snippets

Snippets are mainly used in eCommerce applications - “The Buyer Side”. When it comes to using Snippets on the Buyer Side, Group and Layout Snippets behave differently.

1. Using Sticker Snippets

Sticker Snippet Example
Users can add one or more Snippets onto a page and resize them or delete them again. All frames inside the Snippets are automatically grouped and cannot be ungrouped by the Buyer. Only the first page of the Snippet will be used. All frames of the snippet will be inserted on the Base Layer. It does not matter on what layer they were during the time of publishing. This is quite useful if you need to ensure certain things stay in front of or behind the Buyer’s design. If a Snippet uses a Sub Document it will be inserted into the current Template.

2. Using Layout Snippets

A list of available layouts will be presented to the user based on the selected page. The front cover of a greeting card can display a different selection of layouts than the inside or the back page.

Example:

On the first page, the Buyer may select only front card layouts:
Layout Snippet Example Front

For the inside of the card. the Buyer may select only the inside card layouts: Layout Snippet Example Inside

When applied, Layout Snippets will always span the entire page to which they are applied to. They will not lose their aspect ratio and will fit on the width axis. Layout Snippets can span multiple pages and may get repeated throughout the target document (see Repeat Layout Snippets below).

Layout Snippets will remove any previously applied Layout Snippets before inserting themselves.

Layout Snippets can insert multiple layers. Thus, some frames may appear in front of or behind the Base Layer where the user can then insert new frames. But if snippets are inserted into an existing Layer they will always get inserted behind existing elements on this Layer.

Layout Snippets are the only Buyer Side way that frames can be inserted onto other layers than the Base Layer.

Layout Snippets can be combined with Sticker Snippets to create powerful and easy to use Buyer Side user experiences.

Layout Snippets can also get filtered by aspect ratio of the document which is usefull for documents which can change its size e.g. when you want to avoid showing Layout Snippets which are meant for Landscape in a portrait document.

NOTE: If you’d like to create a Layout Snippet for facing pages, just design them on a page with the size of the facing page (double the width of the facing pages document).

Layout Snippet Placement / Sticker Snippet Scale

When layout snippets are inserted into a document they will by default get centered and resized until they fit the document completely. You can change the focal point for insertion as well as the Fit mode in the general document properties (See here). Additionally, one can set the scale at which Sticker Snippets will be added on buyer side.

Layout Snippet Placement

Repeat Layout Snippets

Repeat layout snippets offer a clever way to create flexible base layouts for a document. A Repeat layout snippet will get repeated to cover all pages of a given document. There are two different types

  1. repeat all here all pages of the layout snippets are repeated over and over again from the first to the last page of the document.
  2. repeat inside here the first page of the snippet will be used on page 1 of the target document and the last page for the last page of the document all pages in between are repeated for all ‘inner’ pages of the target document. Repeat inside is also the necessary mode for facing page documents as the spread width for the first and the last page in a facing page document is half of the inner pages - repeat inside will match this.

Repeat Layout Snippet Modes

Repeat layout snippets will also get inserted behind other content in the defined Layer. They will not add pages in the document they get inserted into.

To configure a snippet as repeat type snippet, choose one of the repeat modes for Snippet Insertion (do not repeat is default):

Repeat Layout Snippet Setting
Repeat Layout Snippet Setting Dropdown

Learn more on how to set up buyer side repeat layout snippets here

Keep Content with Exchange ID

The exchange ID is a useful tool to keep buyer edits even when layout snippets are used and changed. This is currently only supported for single line texts and images.

Repeat Layout Snippet Setting

With the exchange ID one can mark a text frame or an image frame in all Buyer selectable layout snippets with a unique content ID. When the buyer now changes the layout snippet all edits are kept and transferred to the frame with the same exchange ID in the new snippet. If images are used in conjunction with exchange ID their fit option should be set to fit or fill as images will get re-fitted on change. Exchange IDs will even survive the use of a layout snippet which does not use a certain exchange ID. So, if the buyer first uses a layout snippet with three images, after it one with two images and then switches back to three images the third image will be still there. This is only true within one editor session (will not get persisted in the save token).

Assigning Snippets to Buyer Side

The available Layout and/or Sticker Snippets for a buyer are defined at the page level. This makes it possible for a Buyer to select individual layouts for different pages.

With a greeting card scenario, one might enable a layout selection for only the inside card pages that does not allow the Buyer to alter the front or back of the card. This can be achieved by only assigning Layout Snippets to the inside pages while omitting Layout Snippets on the front and back pages.

Layout and Sticker Snippets are assigned by adding the tags from which Snippets are selected to the Buyer Side settings in the Snippet tab. **Please see here**for details on how to assign Buyer Snippets to pages.

Image Filter Snippets

Image Filter Snippets are a special kind of Snippet which allows to create stunning image effects and even add elements around the image. These effects can then get selected by buyers for their uploaded images when creating documents.

Image Filter Example

Image Filters are basically built like a sticker snippet - as a single page document. However, there are a few special things about Image Filter Snippets:

Start by creating a new one page document. In the document properties under the document name set the document type to Sticker/Filter snippet:

Image Filter Set as Sticker Snippet

Now place your example image on the page and make sure the frame dimension exactly matches the page dimension and the frame is placed at the top left of the page. This image will later on get replaced by the customer image. To tell Printess which image to replace for this filter select the image, navigate to the buyer side settings and switch on Is Image Filter Target (Note: only one image in the filter document can have this property switched on).

Is Image Filter Target

Then add image effects (it is also possible to add effects to the target image), masks overlays and even additional elements to finalize your filter.

Image Filter Layer

In this simple example the image is masked a shadow is added and a paper structure is multiplied on top to create a simple but stunning image filter.

Image Filter Layer

Tip: The Layer panel indicates if an image-filter-group is active. The designer can permanently persist the filter by simply ungrouping and re-grouping the frames

As Image Filter Snippets will be resized to match the target image dimensions there are special considerations to take:

Used shadows and overlay images should be set to stretch with the target image to always stay unclipped - stretching will barely be noticeable unless the filter is used in extreme aspect ratios. To achieve stretching select the image, go to the images tab and with the fill mode selected deselect Keep Aspect Ratio.

Keep Aspect Ratio

When placing additional elements, like the flower petals in the below example, one need to consider as well that the document size and aspect ratio will change. Elements must be placed using anchors and sized using percentage values (%, %%, <%, >%) like in any flex layout. But the effort is worth it, the following example is also ‘just’ a filter. Image Filter Example

Learn more about flex design here

Pro Tip Using the minimum percent unit <% for width and height of an element let it be of the same size when having horizontal and vertical aspect ratios. One can also use normal % values and the fit property of an image to achieve the same behavior.

Lastly, one needs to tell Printess that this is not just a Sticker Snippet but an Image Filter. Navigate to the general document properties (deselect all frames and click on the Ruler icon to the right). At the bottom of the tab you will find the snippet export properties. Activate Export as Image Filter and provide a Title and add/select one or more tags.

Image Filter Tagging

Finally, we can publish the Image Filter in the Template drop down like every other snippet.

Image Filter Tagging

How to use the created Filter(s)

Using Image Filters Snippets is different than sticker snippets. Navigate to the buyer side settings (with no frame selected). At the bottom of the tab you can select one or more tags containing Image Filter Snippets which should be available whenever a buyer uploads images.

Image Filter Selection

When a buyer uploads images they now will be presented with a filter tab in the upload where all the selected filters are presented. As you can see the thumbnail for the filter is simply the thumbnail of the Image Filter Snippet document - very handy!

Also, not that the buyer can still use the standard filters to change contrast brightness as long as they are switched on even if a filter is active.

Image Filter Buyer Side Example