Custom Layouts

If you’re interested in setting up a custom layout with the Cardinal Store Locator instead of using the the built-in shortcodes, it’s simply a matter of outputting the appropriate HTML. The best place to get started is to check out the dist directory of the store locator jQuery plugin on Github (just the HTML – the plugin options are set in the plugin settings located in the WordPress dashboard under Settings > Cardinal Locator). Each file in that directory provides an example of a different scenario and the markup that goes along with it. With responsive designs it’s recommended to output the location list to the right of the map on desktop so that it can drop under the map on mobile devices. The most basic example without any filters, etc. would look like the following:

All the classes and IDs in the example above are very important for the plugin to function properly. Several of them can be changed under Settings > Cardinal Locator > Structure Options but make sure they match your custom markup if you do change them.