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.
- Keep in mind that changes made to the main page happen right away.
🔔Learn how to:
- Choose your theme template
- Set a background and logo
- Link your views/folders and set thumbnails
- Use your own font
➕ Showell themes is a Showell Add-on. If you'd like to know more or request a tailored design:
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.
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 request for a custom made one!)
💡Tip: If a mistake was made or you would like to return to your original template;
- Click the 'Undo'-button in the top right corner
Note: This option becomes unavailable once you have left or refreshed the page
How to set a background and logo
- There are 2 options to add a background to your theme.
- Option 1: This will set a background for the whole account: from your main page to all your folders and subfolders. Note that you can still set a unique background on individual views and its subfolders.
We recommend to use this option with 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 1: This will set a background for the whole account: from your main page to all your folders and subfolders. Note that you can still set a unique background on individual views and its subfolders.
-
- Option 2: This will set a background only for your main page. We recommend this option if you don't want to affect other folders/subfolders or if you'd like a video background*.
In the top left corner of your template, click Insert file, and choose your image or video.
- Option 2: This will set a background only for your main page. We recommend this option if you don't want to affect other folders/subfolders or if you'd like a video background*.
- Next, Click Insert Image in the top right corner of your template, to set a logo.
💡 Tip: we recommend to upload your logos to a self created 'logos' folder within your Application Resources. This will come in handy when adding them to your templates.
- 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:
- MP4 file type
- After you have set a video using Option 2, we suggest 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.
💡Note: Your, or the account users, device display size and aspect ratio can greatly affect how the background is displayed.
Therefore we recommend the following settings:
- PNG or JPG file type
- The long side of the background image should have a minimum of 2048 pixels
- Keep your subject central. Depending on the device used, the background image sides might get cropped. For example:
- iPad = 4:3 ratio (2048 x 1536 pixels)
- Laptops / Monitors = The aspect ratio can vary greatly depending on the Showell window size, decided by the user
- Phones = Vary between 16:9 and 20:9 ratio (2048 x 1152/922 pixels)
How to link your views/folders and set thumbnails
- Link views or folders:
- Click Insert file on the bottom of your template
- OR, if you already have content, click the 'files-area' > choose insert in the top left
- 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.
💡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 change the name of a link/button:
- Only change the link name, but not the view/folder it links to:
Click the link name > Link settings > 'enter a new name' and 'save'. - Only change the view/folder name, but keep the link as it is:
Navigate to the view/folder > open its settings > 'enter a new name' and 'save'. - 👍 Most common and recommended; If you'd like to change the view/folder name, and with that change the link name as well:
- First; Rename the view/folder: Navigate to the view/folder > open its settings > 'enter a new name' and 'save'.
- Next; Remove the link: Click the link name > Remove link
- Then; Add the renamed view/folder: as explained above
- Only change the link name, but not the view/folder it links to:
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"
}
}
}
