Customer Site Design Settings

Overview

This article gives a detailed overview of Design Settings in CIMcloud. All design settings are available to customer sites that have no (or limited) design customizations. A more limited subset of settings are available to customers with heavily customized sites.

Settings are available for logos, favicons, fonts, landing page customizations (retail only), featured products (retail only), marketing sections (retail only). Preview windows show color updates in real time so the user can see how a change will affect their website.

Design settings can be found by navigating to the customer sites manage page in the settings workspace under the customer site settings menu item. Then select the edit link on the site you want to change the design settings for. Once the settings page loads select the design tab on the left.

Features Customer Site Design Settings Customers Sites Manage

Global Images

Sets the logo that will be displayed on any printable pages. Usually this can be the same as the Retail/Dashboard Header Logo, so long as the logo is not white, or too light for a printer. This is also the logo used on emails.

Features Customer Site Design Settings Print Logo
Figure 1

Default Favicon

The regular icon file for displaying a logo in a browser tab.

Features Customer Site Design Settings Favicon
Figure 2

Small & Large Favicons

Alternative favicon files for browser compatibility. Usually a good idea to add favicon png files at this size specification. https://favicomatic.com/ is an excellent resource for generating favicon files.

Retail/Dashboard Font Stack

Retail Google Font Stack

CIMcloud will automatically load any font from https://fonts.google.com/. Note the format for the font family: Font+Name:400,700;Another+Font:300,500,600 

This adds the fonts and specified font weights to your website. Be sure the name of the font is capitalized with a + between words (see the example above).

Retail Logo Settings

Add a logo to the navigation bar of your website.

Features Customer Site Design Settings Retail Header Logo
Figure 3

Retail Header Logo (Mobile)

The version of your header logo designed for mobile devices.

Add a logo to your footer.

Features Customer Site Design Settings Retail Footer Logo
Figure 4

The version of your footer logo designed for mobile devices.

Dashboard Logo Settings

Add a logo to the login screen of your B2B Portal (does not apply to the Worker Portal).

Features Customer Site Design Settings Dashboard Login Logo
Figure 5

Add a logo to the navigation bar of your B2B Portal (does not apply to the Worker Portal).

Features Customer Site Design Settings Dashboard Header Logo
Figure 6

Dashboard Header Logo (Mobile)

The version of your header logo designed for mobile devices.

Retail Landing Page Settings

Settings dedicated to making minor image, html, and style modifications to the retail landing page.

Hero Image

Image for the banner section of the landing page. The recommended size for the hero image is 1920×400 JPEG, no larger than 200 KB.

Features Customer Site Design Settings Hero Image
Figure 7

Home Page Intro Text

Certain sections, like this one, use a markdown editor to edit the html of a particular area of the landing page. While it is possible to use the editor as a document, like a Word document, it’s recommended that the Source Code editor (denoted by the <> symbol) is used.

IMPORTANT NOTE: When using the markdown editor, it’s highly recommended that source code be edited in a separate editor, such as Visual Studio Code, and a backup be made before saving any new changes. CIMcloud is not responsible for any lost content.

This can be used to edit the introduction text of your landing page. Refer to the Color Settings to change the background color.

Features Customer Site Design Settings Intro Text
Figure 8

Slide Show

Add a slideshow below the hero section of your landing page. Content for slideshows can be edited on the Slide Shows edit page.

Features Customer Site Design Settings Slide Show
Figure 9

Home Page Category Section

Certain sections, like this one, use a markdown editor to edit the html of a particular area of the landing page. While it is possible to use the editor as a document, like a Word document, it’s recommended that the Source Code editor (denoted by the <> symbol) is used.

IMPORTANT NOTE: When using the markdown editor, it’s highly recommended that source code be edited in a separate editor, such as Visual Studio Code, and a backup be made before saving any new changes. CIMcloud is not responsible for any lost content.

The Home Page Category Section is a pre-built marketing section, typically used as quick/featured links for product categories and/or content pages. 

Features Customer Site Design Settings Category Section
Figure 10

Most customers prefer to use the current layout of the Category Section as-is, only changing the images, text, and links. To do this, first open the source code (figure 11) and copy it (figure 12) to a code editor (figure 13) of your choice.

Features Customer Site Design Settings Source Code
Figure 11
Features Customer Site Design Settings Copy Code
Figure 12
Features Customer Site Design Settings Editor
Figure 13

You can save this copied file as a backup before making changes.

NOTE: If you want to change background images, tile links and titles/text, be sure to only change those pieces of code. Do not delete classes, or change tag names. This may cause unexpected results.

Update the background images by replacing them with an image you’ve uploaded to CIMcloud’s Images and Files.

Features Customer Site Design Settings Image Name
Figure 14

The tiles are ordered as such:

Features Customer Site Design Settings Tile Labels
Figure 15

Also change the href (URL) and tile name.

Features Customer Site Design Settings Update Title And Href
Figure 16

Once this is accomplished, copy everything from your code editor and paste it back into the source code window of the Design Settings markdown editor and save.

More advanced users can create whatever content they want with the markdown editor, and use style tags for custom CSS.

Setting to display a carousel of featured products on the landing page.

Features Customer Site Design Settings Featured Products
Figure 17

Show the price in the featured products carousel.

Change the title above the featured products carousel.

Certain sections, like this one, use a markdown editor to edit the html of a particular area of the landing page. While it is possible to use the editor as a document, like a Word document, it’s recommended that the Source Code editor (denoted by the <> symbol) is used.

IMPORTANT NOTE: When using the markdown editor, it’s highly recommended that source code be edited in a separate editor, such as Visual Studio Code, and a backup be made before saving any new changes. CIMcloud is not responsible for any lost content.

The Home Page Footer Section is a pre-built marketing section, typically used as call to action, or company information section. Refer to the Home Page Category Section for more information on how to edit a section like this.

Features Customer Site Design Settings Footer Section Text
Figure 18

This is the image beside the Home Page Footer Section.

Features Customer Site Design Settings Footer Section Img
Figure 19

Certain sections, like this one, use a markdown editor to edit the html of a particular area of the landing page. While it is possible to use the editor as a document, like a Word document, it’s recommended that the Source Code editor (denoted by the <> symbol) is used.

IMPORTANT NOTE: When using the markdown editor, it’s highly recommended that source code be edited in a separate editor, such as Visual Studio Code, and a backup be made before saving any new changes. CIMcloud is not responsible for any lost content.

Enter custom footer html here. For example, you can paste in a 3rd party email campaign form.

Retail/Dashboard Color Settings

When using CIMcloud’s default template, color settings are available to adjust the color palettes of both Retail and Portal/Dashboard sites. Preview windows are available to see color changes in real time. Each color picker (excluding hover colors) will highlight the section of the preview window that color will apply to (figure 20). Some colors, like text, will automatically adjust to black or white depending on the background color to preserve ADA compliance, but only when the input is left blank (figure 21).

Features Customer Site Design Settings Color Highlighting
Figure 20

 

Features Customer Site Design Settings Auto Colors
Figure 21

Once a color palette has been chosen, it can be saved as the default palette. You can then revert your colors by using the undo icon beside a color, or undo all your changes.

Features Customer Site Design Settings Undo
Figure 22

Was this article helpful

Related Articles

Subscribe to receive email updates of what's new in the CIMcloud Help Center.