Customizing the results

The results of the widget show all the relevant Locations (ie the nearest Stores from the search). 

For each Location, are displayed : the number of the Location (the same than the number located in the pin, on the map), the contact information, the opening hours, the opening status, the associated products and services,  and also a link toward the BRIDGE local page (if existing), and a link toward an URL that you can set up.

To customize the results container, apply some style to the following div: 

<div class="search-results"> </div>

To customize the location pin appearance, apply some style to the following elements: 

<div class="location-marker">
   <span class="location-marker-number"></span>
</div>

To customize the location name appearance,  apply some style to the following elements:

<div class="location-name">
    <span class="location-name-label"></span>
</div>class="location-name">

To customize the opening status, apply some style to the four following classes which are displayed depending the opening status of the location: 

<div class="opening-status open">
<div class="opening-status open-soon">
<div class="opening-status close">
<div class="opening-status close-soon">

To customize the opening hours container, apply some style to the following class :

<div class=location-times"></div>

To customize the opening hours appearance, apply some style to the following elements :

<div class="opening-hours">
   <div class="opening-hours-day">
   <span class="opening-hours-day-label"></span>
      <div class="time-bands">
         <span className="time-band"></span>
         <span className="time-band-closed"></span>
      </div>
   </di>
</div>

To customize the exceptional opening hours appearance, apply some style to their specific class:

<div class="opening-hours-day exceptional">

To customize products and services, apply some style to the following classes:

<div className="location-offer-ranges">
   <div className="location-offers">
      <div className="location-offer">
      <img className="location-offer-icon" />
        <span className="location-offer-label"></span>
      </div>
   </div>
</div>

Caution: Products/Services and their icons must be first added by a BRIDGE administrator. 

To customize the first link, leading to the local page (or the Website URL in case the Location has no local page) : 

<div class="location-page">
 <a class="location-page-link"></a>
</div>

Tu customize the second link, that you can build yourself, apply style to the following elements:

<div class="location-custom-page">
   <a class=”location-custom-page-link”> </a>
</div>