Smartlink Apps | Nexus

Smartlink Apps | Nexus

Introduction

Nexus is a flagship Smartlink App, built to provide an excellent user experience on mobile, tablet and desktop devices via a fully responsive front end interface. The following article details how Nexus works, what configurable features and settings can be defined, along with the available custom styling options.

Who is it for?

Nexus is a dedicated, interactive live preview solution for Demand Generators looking to sell pre-created Virtual Products online. Therefore, it is compatible with Virtual Products created using any of the creation tools within the KornitX Platform; this includes the Virtual Creation Wizards, Virtual Imports and Product Designer. 

It works optimally with the following 'product functionality' / core journey types;
  1. POD - Virtual Products with 1 or more 'fixed' artwork images.
  2. Personalised - Virtual Products with fixed artwork image/s AND complimentary pre-formatted text area/s.
  3. Artwork - Virtual Products with Image Areas that are connected to 1 or more artwork Galleries.
*Photo-upload - Basic photo-upload is supported, although not considered a key focus for Demand Generators and therefore may not provide the best user journey.

**Implicit Image Upload - Basic implicit-upload is supported, although not considered a key focus for Demand Generators to use and therefore may not provide the best user journey.

High Level Use Case Example
  1. Demand Generators (e.g. Brands / Designers) use the KornitX platform tools to create Virtual Products in the Catalog by applying their licensed artwork content to Blank Products.
    1. Demand Generators then publish the Virtual Products using the Nexus Smartlink.
      1. Consumers use Nexus to interact with the Virtual Products and place orders online.
        1. The order is routed through the KornitX GFN to the appropriate Fulfiller and is produced on-demand.

Key features summary;
  1. Streamlined user experience across POD, Personalised and Gallery based journeys
  2. Flexible - supports a wide range of product types including apparel, hard goods and others
  3. Designed to work 'out of the box', with automated / smart menus
  4. Incorporates a wide range of powerful features
  5. Fully responsive design / layout
  6. Focused list of configurable options
  7. Simple set of styling options to change the overall appearance

Nexus UI Summary

As a fully responsive 'mobile first' SmartLink, Nexus will automatically display optimally based on the device / space available. The UI is split into 2 main sections; an interactive live preview and the option menus for choosing your product options.

MOBILE UI


DESKTOP UI


Nexus Default Behaviour

Nexus utilizes pre-considered logic to determine and automate which options / menus should appear within the app on a per product basis - this serves to simplify the overall configuration effort required. The table below shows all available menus;


These option menus serve to provide the basis for 3 core user journeys relevant to how DG's use the KX platform and create their products. The following examples and tables outline the 3 core journeys with the maximum / minimum and most common number of steps.

Typical min / max steps


2a) PERSONALIZED - Example SmartLink >>
Typical min / max steps


3a) ARTWORK - Example SmartLink >>
Typical min / max steps




LIST OF AUTOMATED CONTEXTUAL BEHAVIORS
The table below breaks provides a summary of the contextual preview / menu options and what triggers them to display within the Smartlink;

Option / Menu Item
Display Trigger
Description
Live Preview > Side Thumbnail Buttons
Displays IF the active product has more than 1 Aspect.
Thumbnails are based on 'Aspects' defined against the Product, e.g. Front, Back, Left, Right etc...
Live Preview > 3D Preview Button
Displays IF the active product is connected to a 3D Blank ID in the platform.
Provides a clickable button for users to switch from a 'flat' 2d preview to an interactive 3d preview.
Style Menu
Displays IF the config or Smartlink URL has a Product Category ID specified
This behaves as a standard Product Selector, allowing the user to select the Products contained within the Category.
Style > Multi-Category Selection
Displays IF the config or Smartlink URL has multiple Product Category IDs specified
This behaves as a multi-category Product Selector, first allowing a category selection then product selection.

Categories are represented via the uploaded custom image against the category - If none are specified the app defaults to a folder icon.
Colour Menu
Displays IF the active product has more than 1 aspect options enabled
By default, colours are represented by a thumbnail image of the defined Aspect Options.

IF hex colours have been specified against the Options, they are used as a 'swatch' instead
Size Menu
Displays IF the active product has more than 1 Print Sizes specified
By default, Sizes are represented by the name value specified against each Print Size option.
Artwork Menu
Displays IF the active product has 1 or more Image Areas with user input enabled
Artwork menu provides 'basic' image upload functionality as per the defined Image Area settings against the active product.
Artwork > Single Gallery
Displays IF the active product has 1 or more Image Areas with user input enabled, AND a Gallery Ref ID is connected via config, Smartlink URL or the Image Areas
Automatically loads and displays the Artwork Gallery images based on the specified gallery reference.
Artwork > Multi-Gallery Selection
Displays IF the active product has 1 or more Image Areas with user input enabled, AND MULTIPLE Gallery Ref ID's are connected via config, Smartlink URL or the Image Areas
Provides a multi-gallery selector, first allowing the user to select a Gallery, then an image contained within.

Galleries are represented via the custom gallery thumbnail uploaded against the Gallery - If none are specified the app defaults to a generic image icon.
Personalise Menu
Displays IF the active product has 1 or more Text Areas with user input enabled
Personalise menu provides 'basic' text input functionality. It utilises the pre-defined Text Area settings against the active product to incorporate specific formatting restrictions / advanced features such as character limits and autofit.
Options Menu
Displays IF the active product has 1 or more Attributes with user input enabled (not internal)
The attribute options are displayed via clickable buttons that are styled similarly to colour / size buttons for consistency.

By default, the attribute name is used to represent the option. IF a custom attribute image has been uploaded against the attribute, that will be used instead.

Configuring Nexus

To change Nexus default behaviour, access the Settings menu in the KX Platform and select "Smartlink Apps". 



Locate "nexus" and select it from the available options. 


From here you can manage any existing configurations or create new ones using the '+ Create Config' button. 


Once created, a unique 15 digit config reference code is allocated against the new config - this can be used to add the config to a Smartlink URL via Smartlink Builder.


Configuration Options

The following nested menus contain the available configuration options that can be used to tailor the App to meet specific requirements. 

General

The general menu allows you to;
  1. Name your config - this is especially important when multiple custom configs have been created / are in use.
  2. Enable Locales - link any pre-defined locale options against the config (where applicable). 

Locale options link into Language packs (detailed further down in this article). These serve as app translations that can be listed into this menu for language or terminology translations to key elements of the app such as "Add to cart", "add text" or "add Image". 

Features

The following table details every option that can be enabled within the Features menu located on your set configuration.
Feature Name
Setting Type
Description
Side / Thumbnail Display
Toggle
Used to enable / disable the contextual display of the clickable Aspect Thumbnails for multi-sided products, e.g. Front, Back etc...
Pricing
Toggle
Used to enable / disable the contextual Price display.
Product Description
Toggle
Used to enabled / disable the optional Product Description menu within the App. 

*Note: This menu contains the associated product description text, pulled from the products eCom description field and is always added in before the Quantity step.
Gallery Only
Toggle
When enabled, this changes the in-app behaviour for image upload, only allowing the user to select and add Gallery Images instead of uploading their own.

*Note: Requires a Gallery to be linked via the Smartlink URL, Config or the Product. IF no Galleries are linked, the in-app Artwork menu will not display.
Implicit Image Upload
Toggle
When enabled, this changes the in-app behaviour for image upload, allowing the user to upload as many images as they wish to the active area rather than limiting based on the specified product setup.
Print Area Borders
Dropdown
When enabled, this highlights the extents of the products Print Area Boundary within the live preview based on a range of preset options: 
  1. Disabled (default) 
  1. Solid Rectangle - Draws a solid line around the area
  1. Dashed Rectangle - Draws a dashed line around the area
3D Preview
Dropdown
Used to enable/disable contextual 3D Preview capabilities based on a range of preset options:

  1. 3D (Default) - Includes standard 2d and 3d preview options
  2. Hybrid - Includes standard 2d and 3d preview options, along with a dual 2d+3d display (only on desktop)
  3. None  - Removes 3d preview options
Zoom 2D
Toggle
Used to enable / disable the standard 2d zoom button.
Zoom 3D
Toggle
Used to enable / disable the standard 3d zoom buttons.
Quantity
Dropdown
Used to enable/disable Quantity functionality based on a range of preset options:

  1. Standard (Default) - Includes standard Quantity option
  2. Variant - Includes Variant Quantity menu displaying a list of available options.
  3. None  - Removes the Quantity Menu
3D Preview Disclaimer
Input Field
Add custom text to sit below the 3d preview

*Note: Only displays if the field is populated and 3d preview option is enabled.
Product Categories
Input Field
Add 1 or more Product Category ID's to enable the Style menu via the config directly.

ID's must be comma separated
Gallery Refs
Input Field
Add 1 or more Gallery Ref IDs to include Gallery selections within the Artwork menu.

Gallery content will be auto applied to all products using the same Smartlink config.

Refs / ID's must be comma separated
Bad Word Set
Input Field
Link to a specified Bad Word Set. Once added, any user attempts to add a listed word will auto-remove the content.

Only relevant when working with Personalised products.


Styling Display Options

Styling refers to the overall visual appearance of the app. Nexus is split into logical styling groups to allow simple colour changes to be made directly via the configuration options.

Option Name
Setting Option
Description
External CSS
Input Field
Apply a custom style sheet to change the overall appearance of the App
Background Colour
Input Field
Changes the background colour of the app
Main Outline Borders Colour
Input Field
Changes the colour of the main outline borders that contain the live preview and main menu items
Product Name Colour
Input Field
Changes the colour of Product Name text
Pricing Colour
Input Field
Changes the colour of the displayed Pricing information
Primary Menus / Fill Colour
Input Field
Changes the fill colour of the primary menus
Primary Menus / Text Colour
Input Field
Changes the text colour within the primary menus
Primary Menus / Outline Colour
Input Field
Changes the outline colour of the primary menus
Sub-menus / Option Fill Colour
Input Field
Changes the fill colour of secondary menu options
Sub-menus / Option Text Colour
Input Field
Changes the text colour within secondary menu options
Sub-menus / Option Outline Colour
Input Field
Changes the outline colour of secondary menu options 
Lightbox / Background Colour
Input Field
Changes the lightbox background colour
Lightbox / Text Colour
Input Field
Changes the text colour within the lightbox
Lightbox / Option Outline Colour
Input Field
Changes the outline colour of lightbox menu options
Lightbox / Border Colour
Input Field
Changes the colour of the lightbox borders
Call to Action Buttons Colour
Input Field
Changes the colour of any interactive 'call to action' buttons, eg Add to Cart / Next / Back / Cancel / Confirm / Save.
Accent Colour
Input Field
Changes the colour of accent elements within the App. This includes;
  1. Zoom buttons
  2. quantity + and - buttons
  3. < and > buttons

Print Area Borders Colour

Input Field
Changes the colour of the products Print Area Border (if the feature is enabled)

CSS is optional but recommended as it allows for your own company branding to be used within the Smartlink. 


Tab Order

Tab Order shows an interactive matrix of the core menus available within the App. By default, all core menus are enabled in a considered logical flow, but will only display contextually using Nexus' smart menu logic. Therefore, in most cases it will not be necessary to change / disable any menus because Nexus will automatically update to only show what is relevant, on a product by product basis.

If custom journeys are required, menus can be disabled and / or re-ordered using the clickable number options against each item.
 


Tab Titles

Tab Titles contains a list of the default names used for the core menus, along with a custom input field against each one. This provides a simple way to change the core menu names very quickly (rather than requiring a full locale / language pack).




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


Language Packs

Language packs can be set to define the text names used for menu options such as "Add To Cart" which users may want to change to either "Add To Bag" or a language translation eg to 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 translations have been added simply save the Locale. This can then be connected into the "Enabled Locales" menu within the config General settings which will ensure this locale is used for the app across published Smartlinks using the configuration.

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

    • Smartlink Apps | Proof3

      Introduction The following article has been written to detail how our standard Proof 3 app can be set up and used for. We have also detailed all of the available features associated with Proof 3 features. This app is designed for the B2B market and ...