Customize and Making Visual Changes to Results Window Through CSS Overrides

Customize and Making Visual Changes to Results Window Through CSS Overrides

Overview

You can override the current style of the Buy Now popup box using custom CSS. Simply edit the classes described in the file as needed (see below). Then include the customized CSS file on your page or within a <style> tag after where you have embedded the Buy Now script.

NotesPlease note: Embedding the file BEFORE the Buy Now script tag may prevent your stylesheet from overriding certain values since the document order does matter. In some edge-cases, it may be necessary to also decorate your custom style with the !important; rule if the style property does not get overwritten (to learn more, please visit:https://www.w3schools.com/css/css_important.asp).

Basic Layout HTML Structure

The chart below gives general information as to what main sections of classes do. There are many tags nested inside each main section that can be overwritten.

Tip: It is recommended to use a browser “inspect” tool (such as one built into Google Chrome or Microsoft Edge). This tool can be handy in isolating the specific CSS class and HTML tag that could be styled. Use the inspect tool to modify the property to see how the property change may look

 CSS Class List / CSS Structure

The CSS structure below outlines the core elements that can be overridden. You can use the following classes as a template to override various styles with your own visuals. 
/* Omacro Modal Popup Outer Classes */
.oma-buynow.oma-modal { }
.oma-buynow.oma-modal .oma-dialog .oma-content { }


/* Omacro Modal Popup Header (title bar portion of the popup window, including the close window icon) */
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-header { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-header .oma-close { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-header .oma-title { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-header .oma-title span { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-header .oma-title small { }


/* Omacro Modal Popup Header Tabs (Online Retailers & Local Retailers tabs)  */
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-tabs {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-tabs .oma-active {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-tabs li {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-tabs li a {  }


/* Omacro Modal Popup Main Body */
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-active {  } /* the active tab */


/* Omacro Modal Popup Main Body (Online Retailers content) */
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-loading {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-loading .oma-spinner {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-result-filters {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results .oma-retailer.oma-online-retailer {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results .oma-retailer.oma-online-retailer .oma-card {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results .oma-retailer.oma-online-retailer .oma-card .oma-image {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results .oma-retailer.oma-online-retailer .oma-card .oma-image img {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results .oma-retailer.oma-online-retailer .oma-card .oma-info {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results .oma-retailer.oma-online-retailer .oma-card .oma-info .oma-name {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-online-tab .oma-market.oma-online-market .oma-results .oma-retailer.oma-online-retailer .oma-card .oma-info .oma-button.oma-buylink {  }


/* Omacro Modal Popup Main Body (Local Retailers content) */
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-map {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-map .oma-google-map {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma-pager {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma-retailers {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma-retailers .oma-retailer.oma-local-retailer {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma-retailers .oma-retailer.oma-local-retailer .oma-card {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma-retailers .oma-retailer.oma-local-retailer .oma-card .oma-image {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma-retailers .oma-retailer.oma-local-retailer .oma-card .oma-image img {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma-retailers .oma-retailer.oma-local-retailer .oma-card .oma-info {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma-retailers .oma-retailer.oma-local-retailer .oma-card .oma-info address {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma-retailers .oma-retailer.oma-local-retailer .oma-card .oma-info address span {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma-retailers .oma-retailer.oma-local-retailer .oma-card .oma-info address span.oma-name{  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma-retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma-retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-message { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma-retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-stock { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma-retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-stock .oma-level { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma-retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-stock .oma-level.oma-none { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma-retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-stock .oma-level .oma-percent.oma-one { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma-retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-stock .oma-level .oma-percent.oma-two { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma-retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-stock .oma-level .oma-percent.oma-three { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma-retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-stock .oma-level .oma-percent.oma-four { }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-body .oma-markets .oma-tab.oma-local-tab .oma-market.oma-local-market .oma-results .oma-retailers .oma-retailer.oma-local-retailer .oma-card .oma-info .oma-location .oma-distance { }


/* Omacro Modal Popup Footer (country selecter, omacro branding) */
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-footer {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-footer .oma-region {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-footer .oma-region li {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-footer .oma-region li .oma-icon.oma-flag-icon {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-footer .oma-link {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-footer .oma-link .oma-logo {  }
.oma-buynow.oma-modal .oma-dialog .oma-content .oma-footer .oma-link .oma-logo img {  }

Examples of Custom Designs

The following are several configurations for triggering Buy Now, ether as embedded within a page or as a button that opens a model window. Regardless of the mode Buy Now is used, the look and feel can be customized. Below are a just a few samples illustrating some creative ways to change the visuals.

General Locator (Embedded Locator)

  1. Default Theme
  2. Sample Light Theme Style 1 | Download CSS
  3. Sample Light Theme Style 2 | Download CSS
  4. Sample Dark Theme | Download CSS

Product-Based Locator (Popup)

Buy Now Button
  1. Default Theme
  2. Sample Light Theme Style 1 | Download CSS
  3. Sample Light Theme Style 2 | Download CSS
  4. Sample Dark Theme | Download CSS
Add To Cart & Find Retailer

    • Related Articles

    • Add Custom Rules To Dealer Results

      At times, you may want to customize certain results. For example, if you would like to only display rental providers and/or service centers or only display retail locations (or a combination). To do so, you can implement this optional parameter in a ...

    • Multi Store Brick & Mortar Retail Store Inventory Feed Instructions

      Omacro supports the ability for your suppliers to show both online dealers and highlight local stores near the customer that have in-stock inventory of the item the customer is searching for. Local stores that have in-stock inventory show alongside ...

    • Add Custom Page Size To Online Dealer Results

      At times, you may want to customize the number of results that appear on the Online portion of the Buy Now popup. For example, if you would like to show more or less sellers per page (or all sellers with out paging controls). Option 1: Add Page Size ...

    • Supplier Buy Now Implementation Guide

      The following article discusses various ways to implement Buy Now as a popup or embed within a page as a Product Based Dealer Locator or General Dealer Locator. Buy Now can be configured to open to a specific market (Online or Local) to show one or ...

    • Show Only One Market On A Per-Product Basis

      There may be a times when you would like to show only one market (Online or Local) within the Buy Now Modal Window without making a global change that could impact multiple products. If you wish to control when to show only one market within the Buy ...