Smarlink Apps | No Preview 3
Introduction
The following article has been written to detail how our standard No Preview app can be set up and used for no preview products only. This is the simplest app of all as it just displays input boxes to capture personalisation details with no preview. We have detailed all of the available features associated with No Preview features, Dynamic pricing, datepicker options, styling and miscellaneous options.
Key features of this smartlink app include the capturing of text fields, image upload with no editing and displaying the product image as a preview.
The app is intended for use on desktop and larger screen sizes and may not display desirably on smaller screens.
Setting Up A No Preview App
To set up a new No Preview 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 "No Preview" 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, Dynamic Pricing, Datepicker Options, Styling and 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 language or terminology translations to key elements of the app such as "Add to cart", "add text" or "add Image".
Dynamic Pricing Menu
The following table details every single option that can be enabled with dynamic pricing set on your products to display within the app.
Option Name | Setting Option | Description |
Enabled | Toggle | This slider should only be enabled if you want dynamic pricing to appear within the app, this is why the option is disabled by default. |
Show Product Price | Toggle | Toggle to make 'Product Price' visible. This will require appropriate Pricing Data against the Product. |
Show Product Name | Toggle | Toggle to make 'Product Name' visible, this requires an EPA parameter to work. |
Show Product Description | Toggle | Toggle to make 'Product Description' visible, this requires an EPA parameter to work. |
Show Dynamic Pricing Summary | Toggle | Toggle to display Dynamic Pricing Summary based on user selected options. This requires an EPA parameter as well as appropriate Pricing Data against the Product/s. |
Show Setup and Total Price | Toggle | Toggle to show Setup and Total Price, this requires appropriate Pricing Data against the Product/s. |
Below gives you a look at how this menu will appear for users.
Simply scroll through the Dynamic Pricing menu and once happy with your changes select "Save" and move onto the next menu in the sequence.
Datepicker Options Menu
A key element of no preview products is they commonly use datepickers. Given the lack of much interaction with this app there is a section dedicated to displaying datepickers in the best way possible using this app. The following table details every single option that can be enabled with datepicker options.
| Option Name | Setting Option | Description |
| Month As Dropdown | Toggle | This toggle will ensure that the month can be selected from a dropdown selection as opposed to the standard calendar view. |
| Year As Dropdown | Toggle | This toggle works the same as the months meaning that the dropdown selection for years will appear instead of the standard calendar view. |
| Show Dates From Other Months | Toggle | Toggle this option to show additional month dates, standard view will simply show the selected month not additional. |
| Allow Selection Of Other Months | Toggle | Toggle this to be able to select different months after the initial selection. |
| Show Button Bar | Toggle | Toggle this to allow users to cycle through the dates with the button bar including arrows between each month and year. |
| Year Range | Input Field | The standard range format will be "c-10:c+10" which is the formula we recommend for the standard year range, |
Below gives you a look at how this menu will appear for users.
Simply scroll through the Datepicker Options 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 |
Page Title | Input Field | A name can be set against the app to appear, an example could be "Please enter text to all of the input fields below" which will appear within the app. |
Favicon | Input Field | Refering to a favicon or shortcut icon an image can be uploaded here of the company logo which when clicked can redirect to your website. |
External CSS | Input Field | Here you can add external CSS to change the appearance of the smartlink. |
The styling menu will appear for users like the below.
Once styling has been added users can move onto the next menu within the sequence.
Miscellaneous Options 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 |
Base64 Encoded Callbacks | Toggle | Base64 refers to binary to text encoding, this should only be enabled if you wish for this encoding to occur with the app. |
Show Product Image | Toggle | Enable this toggle to show the product image within the app, this makes the app better as the product image can be viewed. This will only work if a valid image is set against the product within Product Manager. |
Simple Quantity | Toggle | Enables a quantity field with '+ ' and '-' buttons to easily increase the quantity to order |
Stock Availability Check | Toggle | This toggle will search through the inventory of the product to ensure stock is set. Without stock the item will not be orderable. |
Product ID Map | Input Field | You can set a product ID SKU map against the app, we would recommend setting this against your company settings but to set this you just need to set the following code per line - "SKU->PRODUCT ID". |
Bad Word Set | Input Field | Set up a blacklist of certain words that cannot be typed by a user. List the ref associated with the bad word list created within Catalog. |
Google Analytics ID | 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. |
The Miscellaneous menu will appear for users like this below example.
Miscellaneous 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 with config options shown below.
Users can access this No Preview App link here - Click Here