How to set Showell themes

Showell themes are ready-made home screen templates that are mobile-responsive. You can brand your home screen by customizing the different elements with your brand colors, images, videos, logos, and fonts.

This article will show you how to truly transform your Showell Account!

💡Showell themes really lifts up your Showell account to the next level!
With a personal designed home screen:

  • It creates a professional touch that will amaze your customers.
  • It makes Showell look like it's your own company in-house software.
  • you and your users can navigate the Showell content smoother then ever.
  • Apart from your home screen, Themes can also be applied on all your views!
  • Not only can you have a company background, you can even use a video



☝️Before you get started:

  • Showell offers some basic backgrounds and thumbnails. However, we recommend to upload your personalized content beforehand in your Application resources.

🔔Learn how to:



➡️ Showell themes is a premium feature.

When signing up for the Showell Professional plan, Showell themes are automatically activated on your account. Aside the basic themes, we also offer tailored designed themes for your company needs.

If you'd like us to activate this feature, receive help, learn more or request a tailored design:

How to choose your theme template

  • Go to Files within Showell Admin
  • Click 🏠Main page
    Here you can set a template for your home screen (main page).
    You can also set individual templates for each view and/or folder! Simply navigate to the view/folder you wish to add a template to and follow the same steps ⬇️
  • in the top right, click on Theme and Select template
  • Choose one of the 9 available templates (or contact us for a custom made one!)

 



How to set a background and logo

  • There are 2 options to add a background to your theme.
    • Option 1: We recommend this option for still images.
      Click on Theme > Select background, and choose your background image. You will be able to choose from a wide variety of standard backgrounds, but also see the images you have uploaded to the background folder within your Application resources.
    • Option 2: We recommend this option for video*.
      In the top right corner of your template, click Insert file, and choose your video.
  • Next, Click Insert Image in the top right corner of your template, to choose a logo.
  • Some templates come with the possibility to add a title (or slogan). Simply write it down in the designated area within the template, or leave blank if you don't want to use a title.

💡Video* background Tips:

  • After you have set a video using Option 2, We recommend settings the first frame of your video or a black background using Option 1.
  • To get the best user experience with a video background, it is recommended to use calm videos with not too much movement.  

 



How to link your views/folders and set thumbnails

  • Click Insert file on the bottom of your template
  • Browse to the views or folders you would like to add to your home screen. you can select one or multiple at the time using the ✔️check marks. Click OK when ready.
  • Click the link name to open the option menu. Choose to Upload a thumbnail or Select from gallery: You will be able to choose from a wide variety of thumbnails, but also see the images you have uploaded to the thumbnail folder within your Application resources.
  • Move your view/folder links to the correct place by holding (click) the link and drag it to the right spot.

💡Thumbnail Tips:

  • Your thumbnails can be any shape and color, transparent or solid. They can include images or icons that make it easier to find the relevant content. 
  • Once you have chosen your thumbnail, you can choose to crop the image by clicking on the link name > Crop image. you can also zoom in/out by using your mouse scroll.

 



How to use your own font

You can add your company fonts to be used on your home screen as well. The font setting affects only the home screen.

  • Create a folder named 'fonts' (lowercase) within your Application resources
  • Add the font(s) to the folder
  • Configure your font settings by uploading or updating your config.json* file within your application resources.

💡More information on the config.json* file:

The config.json file contains your font information in coding. If you feel uncomfortable editing or creating this, please contact Showell Support or your Showell contact person.

  • You can download the config.json file from your application resources and make edits to it by using a note/text pad or any code editor of choice. Please make sure to only edit the font information (underlined in the example below) and not the coding itself.
  • Can't find a config.json file yet? Click here to download.

Example of config.json file:

{

  "cssVariables": {

    "font": {

      "color": "#ffffff",

     "regularFamily": "Arial",

      "regularWeight": "300",

      "boldWeight": "900",

     "boldFamily": "Arial Black"

   },
}

 

Showell