Smartlink Apps | Digital3

Introduction

The following article has been written to detail how our standard Digital 3 app can be set up and used for. We have also detailed all of the available options associated with Digital 3 features, styling, renderer option and miscellaneous menus. This app has similar styling to the basic 3 customised but this is specifically designed for multi page printed paper products. This app is specifically designed for customisable blanks, multi page personalised predesigns and print on demand products with galleries. 

Key features of this smartlink app include the use of tabs for unlimited pages or sides and seperating tabs for image upload and editing.

 The app is intended for use on desktop and larger screen sizes and may not display desirably on smaller screens. 

Setting Up Digital 3 Apps

To set up a new Digital 3 app users need to head into the Settings menu and select the "Smartlink Apps" option highlighted below. 

Once in the "Smartlink Apps" menu simply search for "Digital 3" or select it from the available default options. 

Here you can set up new "Configurations", "Language Packs" and "Details" from within the sub menus.

We have broken down each section of the submenus in the remainder of this article. 

How to Set A Configuration 

The following tables added below outline the available configuration options that can be used to tailor the App to meet specific requirements. To access every menu simply click the arrow pointing down and the menu will expand for you to customise. 

Within the setup of configuration there are multiple menus detailed below for General setup, Features, Styling, Renderer Options, Product Indo and a Miscellaneous menu

Once created users will be left with a unique 15 digit config code that can then be used to add config to the smartlink. 

General Menu

The general menu will allow you to set the name of your config as well as the ability to enable multiple different locale options. This menu has been shown below. 

Locale options link into Language packs which has been detailed further down in this article. Essentially these act as app translation locales that can be listed into this menu for languager or terminology translations to key elements of the app such as "Add to cart", "add text" or "add Image". 

Features Menu

The following table details every single option that can be enabled within the Features menu located on your set configuration.

Option Name	Setting Option	Description
Enable Drag and Drop	Toggle	This option is only visible within HTML5 but this will allow users to upload images which will appear in the gallery side view that can then be dragged from the gallery and dropped onto the image area.
Enable Image Upload	Toggle	Enabled by default this allows for users to upload images to a products image area.
Enable Facebook	Toggle	Enabled by default this allows users to upload images from their Facebook account.
Enable Flickr	Toggle	Enabled by default this allows user to upload images from their Flickr account.
Enable Instagram	Toggle	Enabled by default this allows users to upload images from their Instagram account.
Enable Remove Background	Toggle	Toggles visibility of the remove background tool which is set by default on this app.
Enable Simply Quantity	Toggle	This toggle should be enabled for products that can be ordered into multiple quantities. The quantity can be increased or decreased with the quantity going up with either the "+" button or down with the "-" button.
Enable Grouped Quantity	Toggle	This toggle is different to the "Simple Quantity" toggle as this one will allow for business products such as those in quantities of 500 to be ordered at once. This toggle is ideal for B2B customers.
Enable Products	Toggle	Enabled by default this will ensure products are enabled within the apps to appear, with this disabled no products would load so this must be enabled.
Product Search	Toggle	With this toggle set a search box will appear for users to search for items.
Textual Product List	Toggle	Requiring Product Selector this changes the Product display from thumbnail preview to a named list.
Text Area Colour Spectrum	Toggle	Enabled by default. This will add an interactive colour picker tool to the Text Area menu in place of the standard text colour swatch.
Implicit User Image Gallery	Toggle	Creates a dynamic image gallery in the app from the images the user has selected.
Persist Implicit User Image Gallery	Toggle	Implicit user image gallery will be retained if user switches product.
User Enabled API V3 Upload Processor	Dropdown	With this dropdown users can select from the different types of image processors they wish to set with their products. The options include "Standard", "Embroidery" and "Pantone".
Print Job Thumbnail Type	Dropdown	From this dropdown you can specify the type of print job that will be generated by the system - this can either be left at PNG by default or updated to generate as JPG.
Image Overlay Fit Mode	Dropdown	This dropdown will ask you to choose between the options of either "To Image" or "To Area". Depending on what is selected the app will either overlay onto images or onto different image areas.
Add To Cart Button Background Colour	Input Field	Allowing for a hex code to be entered to change the colour of the add to cart button.
Add To Cart Button Font Colour	Input Field	Allowing for a hex code to be entered to change the text colour of the "Add to cart" text.
Print Job Number Of Thumbnails	Input Field	With this input field users can specify the number of thumbnails that can be produced with every artwork generation from this app. This is set to "-1" by default to not produce these thumbnails but users of multi aspect product can update this to produce a thumbnail for each page.
Print Job Thumbnail Size	Input Field	The thumbnail size will be set to 500 pixels by default but users can update this to produce bigger or smaller thumbnails for each generated print job.
Google Analytics Code	Input Field	Enter your Google Analytics ID here, Starting with "UA-".
Mouseflow Website ID	Input Field	Mouseflow is a third party that tracks user activity within your app. Simply add the Mouseflow website ID they will have created for you and this will track activity.

Below gives you a look at how this menu will appear for users. 

Simply scroll through the features menu and once happy with your changes select "Save" and move onto the next menu in the sequence.  

Styling Menu

Styling refers to the appearance of the app and how to create external CSS that can be used against your app. 

Option Name	Setting Option	Description
External CSS	Input Field	Here you can add external CSS to change the appearance of the smartlink. To enable this you simply have to add the URL of the hosted CSS into the input field.

The styling menu will appear for users like the below. 

An example of the kind of CSS you can set using the digital app can be seen below. Here we have changed the background of the app to be black and the borders around the personalsation areas. 

CSS is optional but recommended as it allows for your own company branding to match with the selected app. 

Once styling has been added users can move onto the next menu within the sequence. 

Renderer Options Menu

Renderer Options refers to how the app will first render and second the options that can be set for print job generation when an order is received from a customer. 

Option Name	Setting Option	Description
Draw Surface Area Border	Toggle	By default, a blue dotted line visually represents the Print Areas on the product. This can be toggled to turn them off/ on depending upon preference, gives a clean app appearance. This is most commonly best used on photo upload product to highlight where the decoration area is. Generally not needed for virtual products as they already feature a design.

The renderer options menu will appear for users like the below. 

If changes are made hit the "save" button and move onto the next menu within the configuration sequence. 

Product Info menu

The next menu allows you to specify what product information you wish to display using this app, these are detailed in the below table. 

Option Name	Setting Option	Description
Show Product Price	Toggle	Toggle to make 'Product Price' visible, this does require appropriate Pricing Data against the Product.
Show Product Name	Toggle	Toggle to make 'Product Name' visible, please note that this requires an EPA parameter.
Show Product Description	Toggle	Toggle to make 'Product Description' visible, please note that this requires an EPA parameter.

The Product info menu will appear for users like the below, please note all options will be disabled by default. 

If changes are made hit the "save" button and move onto the next menu within the configuration sequence. 

Miscellaneous Menu

Miscellaneous options refer to options that do not really relate to the other menus including the displayed order of the app tabs. 

Option Name	Setting Option	Description
Tab Order	Matrix	Change the order or appearance for selected menus within the App based on numerical order, eg. 1 = Appears first / topmost. Specific menus can also be disabled to remove them from the app entirely.

The Misc matrix will appear for users like the below image shows, 

Misc is the last menu within the configuration, users will than have a unique 15 digit code that they can use when using smartlink builder or default apps. 

Language Packs

As mentioned before on this article language packs can be set to define the shown text for menu options such as "Add To Cart" which users may want to change to either "Add To Bag" or spelling add to cart in French which would be "Ajouter au panier".  To set a new language pack simply click the "+ Create Locale" button shown below. 

Once clicked users can select the language type from the dropdown which is set to English by default, as well as options to set a unique identifier as well as a name. 

With these basic details now set users can expand the menu with the arrow which will show the Translations options which must be entered into the "To" column. These can be changed at a later date by simply amending the app. 

Once the "To" translations have been set simply save the Locale which can than be entered into the "Enabled Locales" menu within the config which will ensure this locale is used for the app. 

Example Of The App

We have created an example of the app for customers to use, this is using a test product and test galleries while using a variety of the different features and config options shown below. 

Users can access this Digital 3 App link here - Click Here

• Related Articles

• Smartlink Apps | Smartlink Builder Overview

  Overview Smartlinks can be configured to suit different use cases and offer control over the end user journey. The available apps that the user can choose from will be detailed within this article. This article will offer information on the core ...

• Smartlink Apps | Cards 3

  Introduction The following article has been written to detail how our standard Cards 3 app can be set up and used for. We have also detailed all of the available options associated with Cards 3 features, styling, renderer option and miscellaneous ...

• Smartlink Apps | Garment 3

  Introduction The following article has been written to detail how our standard Garment 3 app can be set up and used for. We have also detailed all of the available options associated with Garment 3 features, styling, renderer option and miscellaneous ...

• Smartlink Apps | 3Column3

  Introduction The following article has been written to detail how our standard 3Column3 app can be set up and used for. We have also detailed all of the available options associated with 3Column3 features, styling, product info, renderer option and ...

• Smartlink Apps | Eris

  Introduction The following article has been written to detail how our standard Eris app can be set up and used for. We have also detailed all of the available options associated with Eris General, Miscellaneous and Image menus. This app has similar ...