Customize and make 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.

Please 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

×