Talk to us

How to Implement a Customized Template at the Company 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 Company level customization is applied to an individual company and all the customers within the company who don’t have further Customer level customizations. All new customers within the Company will also inherit the Company level template.

Note: All Companies and Customers share one System wide, customized Login Page. Template customization can also be done at the System and Customer level.

Before starting, make sure:

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

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

 

1. In the header section, click Utilities.

 

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

 

The Company Level Template Customization screen displays.

 

The screen is divided into different sections:

  • Main Style Elements.
  • Home Screen.

 

The Main Styling Elements section displays at the top.

 

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

 

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

 

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

 

9. 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 primary action buttons:

  • Remove Company Template – Remove the customized Company level template, reverting the company and all customers who are using the Company template to the customized System level template or the default System Delivered template (as applicable).
  • 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: The company and all customers currently using the Company level Template Customization inherit any changes to it, or inherit the restoration to any previous level’s template. All new customers in this company inherit the Company Template Customization. If there is template customization at the Customer level, the changes made at the Company level are not inherited.

 

10. To commit the changes for the Company, click Save Changes.

 

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