This article will review what styling customizations are available in the Omni-Channel WTB application.

 

Brands using our "Omni-Channel" engine to power their WTB locator can customize a variety of style attributes to match the look and feel of your branding and site. Configurable inputs are as follows:

• Button Style
• Button Color
• Secondary Elements Color
• Primary Text Color
• Secondary Text Color
• Mobile Header Color
• Font

Each of these inputs control various front-end elements within the Omni-Channel WTB. Below is a breakdown of each to help visualize how the styling is impacted. 

Note: The Omni-Channel WTB and its customizable elements are built to meet Web Content Accessibility Guidelines, 2.1. Maintaining a 4.5:1 color contrast ratio should be considered when selecting button and text colors.

 

Button Style

A single style that applies to primary and secondary buttons visible in both the product selection and results views. Available options: Square, Rounded, Pill

 

Button Color

A single hex code value that applies to buttons visible in both the product selection and results views. Example: #D2D2D2

Find Products Button

 

Select Products Button

 

Secondary Elements Color

A single hex code value that applies to secondary elements visible in both the product selection and results views. Example: #D2D2D2

Pagination Button

 

B&M Map Pins

 

Primary Text Color

A single hex code value that applies to text visible in both the product selection and results views. Example: #D2D2D2

Product Selection Headers & Product Names

 

Cart Header & Product Names

 

B&M Retailer Name

 

Secondary Text Color

A single hex code value that applies to text visible in both the product selection and results views. Example: #D2D2D2

Product Selection Filters & Breadcrumbs

Results Section Details

 

Product Quantity & Retailer Store Addresses

 

Results Product Names & Availability

 

Mobile Header Color

A single hex code value that applies to the mobile header visible in both the product selection and results views. Example: #D2D2D2

                  

Font

A single font value that applies to all text elements within the WTB. Available options include Web Safe fonts and select Google fonts.

Web Safe Fonts

Mixed Types

font-family: 'Arial', sans-serif;

font-family: 'Helvetica', sans-serif;

font-family: 'Tahoma', sans-serif;

font-family: 'Trebuchet MS', sans-serif;

font-family: 'Times New Roman', serif;

font-family: 'Georgia', serif;

font-family: 'Courier New', monospace;

 

Google Fonts

Sans Serif

font-family: 'Open Sans', sans-serif;

font-family: 'Roboto', sans-serif;

font-family: 'Montserrat', sans-serif;

font-family: 'Raleway', sans-serif;

font-family: 'Inter', sans-serif;

font-family: 'Oswald', sans-serif;

font-family: 'Poppins', sans-serif;

font-family: 'PT Sans', sans-serif;

font-family: 'Quicksand', sans-serif;

font-family: 'Libre Franklin', sans-serif;

font-family: 'Archivo', sans-serif;

 

Serif

font-family: 'Merriweather', serif;

font-family: 'Roboto Slab', serif;

font-family: 'Noto Serif ', serif;

font-family: 'Libre Baskerville', serif;

font-family: 'Source Serif Pro', serif;

font-family: 'Arvo', serif;

 

Monospace

font-family: 'Roboto Mono', monospace;

font-family: 'Inconsolata', monospace;

font-family: 'Source Code Pro', monospace;

font-family: 'IBM Plex Mono', monospace;