Smartlink Apps | Ceres

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. The ceres app was created as a fully responsive full screen customiser with "click to customise" options such as image and text. The appw as designed with blank customisable, multi image upload photo products and personalised predesigns. 
Key features of this smartlink app include adding unlimated text & image areas, drag and drop and can include inline image editing tool descriptions.
 The app is intended for use desktop and larger screen sizes and may not display desirably on smaller screens. 

How To Set Up Ceres

To set up a new Ceres 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 "Ceres" 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 and Styling.
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
Implicit Image Areas Enabled
Toggle
Enabled by default, this will ensure for products already containing image areas the app will default to this wich may include galleries of which the customers need to choose from. 
Implicit Text Areas Enabled
Toggle
Enabled by default, this will ensure for products already containing text areas the app will default to this which may include specific fonts and sizes of text. 
Show Image Controls
Toggle
Enabled by default this will allow for image controls such as changing the layers of images, scaling and rotating. 
Show Text Controls
Toggle
Enabled by default this will allow for text controls such as changing the layers of text, scaling, rotating and changing the sizes.
Show Add Image
Toggle
Enabled by default this will ensure that the "Add Image" button is displayed allowing for adding infinite image areas
Show Add Text
Toggle
Enabled by default this will ensure that the "Add Text" button is displayed allowing for adding infinite text areas. 
Image Fill Validation Enabled
Toggle
Toggles visibility of the remove background tool which is set by default on this app. 
Draw Surface Area Borders
Toggle
If  enabled this offers a 'clean' appearance of the app. A blue dotted line will appear around the print area which represents the size of this
Remove Background Enabled
Toggle
Enabled by default this will ensure the remove background tool is visible within the app. 
Text Colour Spectrum Enabled
Toggle
Enabled by default this will add an interactive text colour picker tool to the text area menu in place of the standard single colour swatch set by default. 
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. 
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 menus to move over to the right hand side with pink instead of green menus. 

CSS is optional but recommended as it allows for your own company branding to match with the selected app. 
Styling 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 Ceres 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 | 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 | 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 | Housename

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

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