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.

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.

Figure 1

Default Favicon

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

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.

Figure 3

Retail Header Logo (Mobile)

The version of your header logo designed for mobile devices.

Add a logo to your footer.

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

Figure 5

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

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.

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.

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.

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. 

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.

Figure 11
Figure 12
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.

Figure 14

The tiles are ordered as such:

Figure 15

Also change the href (URL) and tile name.

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.

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.

Figure 18

This is the image beside the Home Page Footer Section.

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

Figure 20

 

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.

Figure 22

Was this article helpful?