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 menus. The cards app itself was designed specifically to better show and support for greeting card products with similar functionality to the digital app. This app has been specifically designed for personalised predesigns, Print on demand cards and print on demand with gallery products.
Key features of this smartlink app include step by step process to customise, thumbnails of different "pages" which are taken from product aspects and image tools writing tabs.
The app is intended for use on desktop and larger screen sizes and may not display desirably on smaller screens. How To Set Up Cards 3
To set up a new Cards 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 "Cards 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 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 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 users to upload images from their own Flickr account. |
Enable Instagram | Toggle | Enabled by default this allows users to upload images from their own Instagram account. |
Enable Dropbox | Toggle | Enabled by default this allows users to upload images from their own Dropbox account. |
Enable QR | Toggle | Enabled by default this allows for users to click the "QR Scan" button which opens up a popup that details how users can upload an image from their mobile device if using this app on a desktop device. |
Enable Remove Background | Toggle | Toggles visibility of the remove background tool which is set by default on this app. |
Enable Text Controls | Toggle | Enabling this option would allow for users to control text however they wish to depending on the text areas created on their product. |
Enable Image Controls | Toggle | Acting similarly to text controls, enabling these options allow for users to control their image areas depending on the areas available on their product. |
3D Preview | Toggle | This menu is ideal for users with 3D products, enabling this will ensure that a 3D preview option can be clicked that will show a 3D preview of the product. If no 3D preview product has been set against the item this can be ignored. |
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 Image 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". |
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. |
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 cards app can be seen below. Here we have changed the colours of the menus to be grey with pink text.
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. |
Print Job Thumbnail Type | Dropdow | 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. |
Print Job Number Of Thumbnails | Input Field | With this input field users can specify the number of thumbnails that can be products with every artwork generation for this app. This is set to "-1" by default to not product these thumbnails but users of multiple page cards can update this to product 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 product bigger or smaller thumbnails with each generated print job |
The renderer options menu will appear for users like the below.
Renderer options 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 Cards 3 App link here - Click Here
Related Articles
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 | Flow
Introduction The following article has been written to detail how our standard Flow app can be set up and used for. We have also detailed all of the available options associated with Flow features, styling, product info, renderer option, POS (Point ...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 | Selector 3_2
Introduction The following article has been written to detail how our standard Selector 3_2 app can be set up and used for. We have also detailed all of the available features associated with Selector 3_2 features, POS, styling, product info, ...Smartlink Apps | Ceres
Introduction The following article has been written to detail how our standard Ceres app can be set up and used for. We have also detailed all of the available options associated with Ceres features, styling, renderer option and miscellaneous menus. ...