Customizing Storemapper with CSS

Customizing StoreMapper is incredibly easy if you know basic CSS.

First question, where do I put the CSS?

The great thing about StoreMapper is that it generates standard HTML content right on your web page, so the CSS files on your site will affect StoreMapper too! (Nerd Note: this is a major improvement over store locators that rely on an iframe).

Your site probably has a style.css, or in Shopify a style.css.liquid, file and any CSS rules you add to this will immediately begin customizing StoreMapper. If it’s more convenient, you can put the CSS in the custom CSS box inside Storemapper under Settings and Appearance

You will see a box titled “Custom CSS” which is where you will input all the CSS you need.

What’s the HTML markup structure

The best way to figure this out is to use the Chrome Web Inspector by firing up your StoreMapper site and right-click > Inspect Element. In Chrome you can view the HTML elements and play around with the CSS until you get it just right.

The general CSS structure is as follows:

#storemapper (the container for the whole widget)

– div#storemapper-left    (this has all the search box stuff)

— form#storemapper-form

— input#storemapper-zip (input field and label)

— input#storemapper-go (search button)

— ul#storemapper-list (your list of search results)

— li (each search result)

—- h4 (store name)

—- p.storemapper-logo (contains the logo/img if there is one)

—- p.storemapper-address

—- p href = tel (phone number schema)

—- p.storemapper-email

—- p.storemapper-url

—- p.storemapper-description

—- p.storemapper-custom-1 (custom field 1, if used)

—- p.storemapper-custom-2 (custom field 2, if used)

—- p.storemapper-custom-3 (custom field 3, if used)

—- p.storemapper_view (“view on map” link)

—- p.storemapper_directions (“get directions” link)

– div#storemapper-right (the map side)

(inside the popup)

— p.storemapper-logo (contains the logo/img if there is one)

— h4.storemapper-popup-name

— p.storemapper-popup-address

— p.storemapper-popup-phone

— p.storemapper-popup-url

— a.storemapper-maplink (the “details” button)

— a.storemapper-map-directions (the “get directions” button)

Happy Customizing!

If you need assistance updating your map, please reach out to us, we are happy to help!