Talk to us

How to Implement a Customized Template at the System Level

 

Your SnapTracker site can be customized and designed to match your unique branding and business needs. The Template Customization module enables you to upload custom images, add HTML content, and modify other styling elements. The System level customization is applied to all companies and customers without individual Template Customizations at those respective levels. All new companies and their respective customers will inherit the System level customization by default.

Note: Template customization can also be done at the Company and Customer level.

Before starting, make sure:

  • You are logged into SnapTracker.
  • You have menu access to System Template Customization.

This post outlines how to navigate and customize the System level Template Customization.

 

1. In the header section, click Utilities.

 

2. Click the arrow beside System Setup, then click Template Customization.

 

The System Level Template Customization screen displays.

 

The screen is divided into different sections:

  • Login Page.
  • Main Style Elements.
  • Home Screen.

 

The Login Page section displays at the top.

Note: The Login page can only be customized at the System level. There is a single login screen for your site.

 

Login Page Customizable fields:

 

Observe the fields in the Login Page section:

  • Login Logo – Upload a custom image for the site logo on the login screen.
  • Login Background Image – Upload a custom image for the background image on the login screen.
  • Login Copyright Text Color – Select the copyright text color at the footer of the login screen.
  • Primary Color 1 – Select the primary color 1, which is the main color for action buttons, such as the login button.
  • Primary Color 2 – Select the primary color 2, which is the hover color for action buttons, such as the login button.
  • Body Text Color – Select the body text color, which is associated with the text color on the login screen, such as the “Forget Password” link.
  • Input Field Radius – Determine how rounded you would like the username and password field text boxes to be, where zero is square. Enter the value desired for the input field radius on the login screen, which are the username and password fields.
  • Button Radius – Determine how rounded you would like the Sign In button to be on the login screen, where zero is square. Enter the value desired for the button radius.
  • Container Radius – Determine how rounded you would like the border around the login section to be, where zero is square. Enter the value desired for the container border radius on the login screen, which is the login inputs box.

 

3. For more information on each field, click the “i” icon to open a popover with further explanation.

 

The popover displays, with relevant information and image references as applicable.

 

4. To replace an image from the default template, click the delete (or trash bin) icon.

 

5. To upload a custom image, click the Select icon.

 

6. To edit a color field, click the color picker icon.

 

7. Drag the slider to the desired colors, then select a position on the color grid.

Alternatively, input a color’s hexcode or RGB code.

 

8. Modify any other desired styling elements in the Login Page section.

Scroll to the Main Styling Elements section.

 

The Main Styling Elements section displays.

 

Observe the fields in the Main Style Elements section:

  • Header Logo – Upload a custom site image for the global header section.
  • Favicon – Upload a custom site image for the icon in your browser tab.
  • Font Family – Select a Font to be used in the site. Note: Custom fonts need to be shared with the SnapTracker team to implement.
  • Page Container Background Color – Select the color for the background of each screen.
  • Primary Color 1 – Select the primary color 1 in the site, which is the main color for action buttons and other elements.
  • Primary Color 2 – Select the primary color 2 in the site, which is the hover color for action buttons and other elements.
  • Body Text Color – Select the text color of the main body text within screens.
  • Table Header BG Color – Select the background color of the header section within tables.
  • Table Header Text Color – Select the text color of the header section within tables.
  • Input Field Radius – Determine how rounded you would like the input boxes to be, where zero is square. Enter the value desired for the input field radius within screens.
  • Button Radius – Determine how rounded you would like the button radius to be, where zero is square. Enter the value desired for the button radius within screens.
  • Container Radius – Determine how rounded you would like the container radius to be where zero is square. Enter the value desired for the container border radius within screens.
  • Border Color – Select the color for the container borders within screens.

 

9. Modify any other desired styling elements in the Main Styling Elements section.

Scroll to the Home Screen section.

 

The Home Screen section displays.

 

Observe the fields for the Home Screen section:

  • Home Screen Welcome Graphic – Upload a custom image for the top area of the home screen.
  • Home Screen Title Text – Enter custom title text for the home screen, above the welcome graphic.
  • Home Screen Catalog Carousel – Click to enable/disable the catalog carousel. Note: Catalogs must be created first.
  • Home Screen HTML Section – Enter any custom HTML to add styling elements, content, and links to the home screen.

 

10. Modify the desired fields for the Home Screen section.

Scroll down to the bottom of the screen for the action buttons.

 

The action buttons display.

 

Observe the action buttons:

  • Restore System Delivered Template – Restore the template customization fields to the default, generic SnapTracker styling.
  • Reset – Reset all unsaved changes made to the template customization fields.
  • Save Changes – Save all changes and custom image uploads to the template customization fields.

Note: All companies and customers currently using the System level Template Customization inherit any changes to it, or inherit the restoration to default settings. All new companies and their customers inherit the System Delivered Template. If there is template customization at either the Company or Customer level, the changes made at the System level are not inherited.

 

11. To commit the changes, click Save Changes.

For information on customizing the site at the Company or Customer level, refer to: