• Dashboard
• Setup
• Stores
• Analytics
• Help

Custom CSS Styling

The Store Locator provides a feature to add in your own custom CSS for advanced styling. This tutorial will show you how to add in your own CSS. You'll also find the HTML structure of the Store Locator page to assist with custom CSS development.

Note: Unfortunately we're unable to provide custom CSS support beyond helping to get your code added to the Custom CSS feature. We recommend working with a third party web developer to assist with developing custom CSS for your Store Locator page.

Add Custom CSS

1. Click on the Setup tab.
   

2. Go to the Custom CSS feature under the Advanced Styling section.

3. Paste in your CSS code.

HTML Structure

To help with developing your own custom CSS, we've included the structure of the HTML on the Store Locator page below.
Note: The HTML structure may change at anytime and without notice.

<div class="lsl-store-locator-wrapper">

    <div class="lsl-search-panel" style="padding: 10px; margin-bottom: 10px;">
        
        <form action="#" method="post" accept-charset="utf-8">

            <!-- for mobile filters -->
            
            <div class="lsl-mobile-options-wrapper">
                
                <div class="lsl-filters-mobile lsl-filter-wrapper">
                    
                    <div class="btn-group open">
                        
                        <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="<i class="fa fa-filter"></i>">

                            <span class="multiselect-selected-text">

                                <i class="fa fa-filter"></i>

                            </span> 

                            <b class="caret"></b>

                        </button>
                        
                        <ul class="multiselect-container dropdown-menu pull-right">
                            
                            <li><a tabindex="0"><label class="checkbox"><input type="checkbox"> {{Filter}}</label></a></li>
                        
                        </ul>
                    
                    </div>
                
                </div>
            
            </div>

            <!-- end mobile filters -->

            <div class="lsl-radius-wrapper">
                
                <div class="btn-group">
                    
                    <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="25 mi">

                        <span class="multiselect-selected-text">25 mi</span>

                    <b class="caret"></b></button>
                    
                    <ul class="multiselect-container dropdown-menu pull-right">
                        
                        <li><a tabindex="0"><label class="radio"><input type="radio" value="5"> 5 mi</label></a></li>
                        
                        <li><a tabindex="0"><label class="radio"><input type="radio" value="10"> 10 mi</label></a></li>
                        
                        <li class="active"><a tabindex="0"><label class="radio"><input type="radio" value="25"> 25 mi</label></a></li>
                        
                        <li><a tabindex="0"><label class="radio"><input type="radio" value="50"> 50 mi</label></a></li>

                        <li><a tabindex="0"><label class="radio"><input type="radio" value="100"> 100 mi</label></a></li>
                    
                    </ul>
                
                </div>
            
            </div>

            <div class="lsl-address-wrapper">
                
                <label class="lsl-address-label">{{Search Label}}</label><input name="data[Map][address]" class="lsl-address form-control" placeholder="{{Search Field Text}}" type="text">
            
            </div>

            <!-- for desktop filters -->
            
            <div class="lsl-filters-wrapper">
                
                <div class="checkbox control-inline lsl-checkbox lsl-filter-field">
                    
                    <div class="checkbox">
                        
                        <input type="checkbox"/><label>{{Filter}}</label>
                    
                    </div>
                
                </div>
            
            </div>

            <!-- end desktop filters -->

            <div id="lsl-search-button-wrapper">
                
                <button class="btn" id="lsl-search-button" onclick="return false;"><i class="fa fa-search">
                </i> </button>
            </div>

        </form>
    
    </div>

    <!-- For mobile -->
    
    <div id="lsl-mobile-panel">
    
        <a href="" class="btn selected" id="lsl-list-view"><i class="fa fa-align-justify"></i></a> 
    
        <a href="javascript:;" class="btn" id="lsl-map-view"><i class="fa fa-map-o"></i></a>
    
    </div>

    <!-- End mobile -->

    <div id="lsl-store-list">

        <div id="directions" style="display: none;">
            
            <a href="javascript:;" onclick="hideDirections();return false;"><< {{Close Directions Text}}</a>
        
        </div>

        <div id="lsl-list-panel">

            <div id="lsl-stores-wrapper">

                <ul class="lsl-stores" id="{{store_id}}">
                    <div>

                        <span style="font-weight: bold;" class="lsl-store-name" onmouseover="bounce(0)"><a href="javascript:;" onclick="openWindow(0)">{{store name}}</a></span>

                        <li class="lsl-store-address">{{address}}</li>

                        <li class="lsl-store-get-directions"><i class="fa fa-car fa-fw"></i><a href="javascript:;" onclick="calcRoute(0);return false;">{{Get Directions Text}}</a></li>

                        <li class="lsl-store-phone"><i class="fa fa-phone fa-fw"></i><a href="tel:{{phone}}">{{phone}}</a></li>

                        <li class="lsl-store-email"><i class="fa fa-envelope-o fa-fw"><a href="mailto:{{email}}"></i> {{email}}</a></li>
                        
                        <li class="lsl-store-website"><i class="fa fa-globe fa-fw"></i><a href="{{website}}" target="_new"> {{website}}</a></li>
                        
                        <li class="lsl-store-hours"><i class="fa fa-clock-o fa-fw"></i> {{hours}}</li>
                        
                        <li class="lsl-store-filters"><i class="fa fa-check fa-fw"></i> {{filters}}</li>
                        
                        <li class="lsl-store-additional-information">{{additional-information}}</li>
                        
                        <div class="lsl-no-results">{{No Results Text}}</div>
                    
                    </div>
                
                </ul>
            
            </div>
        
        </div>
    
    </div>
    
    <div id="lsl-map-panel">
        
        <div id="lsl-map-canvas"></div>
        
        <div id="control"></div>
    
    </div>

</div>