Omni-Channel Where to Buy Customizations

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:

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

mceclip23.png

mceclip21.png

 

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

Destini_Pepsi__2_.png

 

Select Products Button

mceclip0.png

 

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

mceclip1.png

 

B&M Map Pins

Destini_Pepsi__3_.png

 

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

mceclip4.png

 

Cart Header & Product Names

mceclip5.png

 

B&M Retailer Name

mceclip6.png

 

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

mceclip17.png

Results Section Details

mceclip9.png

 

Product Quantity & Retailer Store Addresses

mceclip10.png

 

Results Product Names & Availability

mceclip18.png

 

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

mceclip19.png                  mceclip20.png

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;

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request