Smartlink Apps | Mobile 3

Introduction

The following article has been written to detail how our standard Mobile app can be set up and used for. We have also detailed all of the available features associated with Mobile features and renderer options. As the name suggests this was originally designed just for mobile but will also work on desktop. The app is ideal for blanks, Predesigns, print on demand and saved sample product types.

Key features of this smartlink app include the use of Icons instead of tabs and text fields displayed as single with dropdown choice or displaying all areas.  

The app is intended for use on mobile devices and may not display desirably on bigger screens. 

Setting Up A Mobile App

To set up a new Mobile 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 "Mobile" 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, Product Info, Renderer Options and a Miscellanious 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". 

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

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

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 Simply Quantity	Toggle	Enables a quantity field with '+ ' and '-' buttons to easily increase the quantity to order
Grouped Quantity	Toggle	Is a feature that works specifically with Magento 1 and allows all simple products on a grouped product to show and have its own quantity
Products Tab	Toggle	Adds an additional menu for a Product Selector to be used in the App. Please note that this only works if the Smartlink contains the necessary pc=xxxxx parameter to reference a product category
Colours Tab	Toggle	Enabling this field will ensure that colours can be changed if set on the products.
Textual Product List	Toggle	Enabled by default, this requires the use of a Product Selector, this will change the Product display from thumbnail preview to a named list.
Remove Background Tool	Toggle	Toggles visibility of the remove background tool.
Auto Select Next Image Area	Toggle	Ensures that with multi sided products the app will move onto the next image area in the sequence once an image has been added.
Drag and Drop	Toggle	Allows touch and click controls directly on the product preview, i.e. dragging and resizing images.
Display Screen	Toggle	With this toggle enabled the display screen will display the product befre adding t cart.
Autoload First Gallery Image	Toggle	If a product uses a Gallery, this toggle ensures the first gallery image is loaded by default on the product when the iframe loads. Alternatively, placeholders can be set on Image Areas instead.
Product Information Tab	Toggle	This pop up will show the customer product info such as the name, SKU and description which will open up into a pop up.
Save Sample	Toggle
Include Copyright Warning	Toggle	Displays pop up message when using clicks Add to Cart.  Forces them to approve their design and confirm they hold copyright of any images by agreeing to statement and clicking Approve.
Enable Image Upload	Toggle	Enabled by default this allow for images to be uploaded against the product as long as image areas exist on the products.
Enable Facebook	Toggle	Enabled by default, allows the option to upload images from your Facebook account.
Enable Instagram	Toggle	Enabled by default, allows the option to upload images from your Instagram account.
Native App Framework Upload (Normal)	Toggle	Is used only when using this app layout through our native app framework for uploading images from the device
Native App Framework Upload (Stripped)	Toggle	Is used only when using this app layout through our native app framework for uploading images from the device - this methods auto strips the background from images
Link Galleries By Name To Image Areas	Toggle	This links any galleries specified in the Smartlink to the Image Area on the product with the same name.
Image Populated Validation	Toggle	Cannot 'Add to Cart' unless an Image has been uploaded to all areas.
Image Fill Validation Enabled	Toggle	Cannot 'Add to Cart' unless an Image has been uploaded that covers the entire Print Area on the product.
Image Tab Enabled	Toggle	Enabled by default. this will ensure the images tab appears
Effects Tab Enabled	Toggle	This will ensure the effects tab will appear within the app.
Attributes Tab Enabled	Toggle	Enabled by default, this will ensure the attributes tab appears.
Print Sizes Tab Enabled	Toggle	This ill ensure the print sizes tab will appear within the app.
3D Preview Enabled	Toggle	Adds the '3D Preview' button to the Smartlink to allow a 2D to 3D user journey. This will only work if the product has connected 2d and 3d products within Product Manager.
Product Category Tree Enabled	Toggle	Relating to product selectors this can be used to show the category tree of the products shown in the app.
Dynamic Pricing	Toggle	If a product has additive pricing this should be enabled allowing a single product with 'options' and price that changes based on product options selected.
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.
Hide Price	Toggle	This will hide the price from the app.
Display Text Areas As List	Toggle	The toggle here will display text areas as names in a list instead of the standard view.
Order Image Areas By Name	Toggle	Enabled by default, this will sort the image areas by the name so with 2 areas called front and back the back would appear first.
Use Save State Where Possible	Toggle	Forces the use of product state (modern print job creation method) in the app.
Insert New Area On Image Upload	Toggle	This toggle will enable the use of multiple image upload areas within one image area.
Drag and Drop Mode	Dropdown	This dropdown can be set if using the drag and drop features mentioned above. The options to choose from are to Copy, Move or Swap.
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.
Open Tab After Product Loaded	Dropdown	This dropdown allows you to ensure the next tab that loads into the app will either by image or text.
External CSS	Input Field	Here you can add external CSS to change the appearance of the smartlink.
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.
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 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. 

Features 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 Mobile App link here - Click Here

• Related Articles

• Platform | Product Manager App Defaults

  What Is App Defaults? "App Defaults" is an option found within Catalog > Product Manager and is accessible when setting up or modifying a product. The main menu is found within "Product Details" and the tab "App Defaults" which is shown below. ...

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

  Introduction The following article has been written to detail how our standard Stepped 3 app can be set up and used for a stepped app experience. We have also detailed all of the available features associated with Stepped 3 general, features, ...

• Smartlink Apps | Kiosk

  Introduction The following article has been written to detail how our standard Kiosk app can be set up and used for. We have also detailed all of the available options associated with Kiosk features, POS, Styling and Renderer Options menus. The Kiosk ...

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