Adjust Locator Styling

This set of instructions will require you to be using the MySLP Professional level of service or higher.   The Professional level includes the Experience add on that provides the Custom CSS rules interface.   Instructions here are specific to MySLP but will work for WordPress plugin users as well.

Get The Existing Style Rule

Open your website with your browser.

In your browser menu bar open developer tools.  This will open a developer section on your browser window.

Right-click on the element you wish to re-style.  This will show the page HTML and CSS rules in the developer window.

Select “Inspect Element”.

You will see the specific element highlighted in the HTML section of the developer window and the set of CSS rules that are applied to the element.

Right-click the top rule and select “copy”.  This will copy the entire rule including the CSS selector.

Modify The Rule Via Store Locator Plus

Login to your MySLP account or WordPress admin panel.

Go to Advanced Options in MySLP (Store Locator Plus in WordPress).

Select Settings | View from the menu.

Scroll down the page and paste the copied rule in the Custom CSS box.

You can now add to the rule using standard CSS notation.

Click Save.

View The Changes

Reload your web page.

Notes

Keep in mind many web hosts cache CSS.   Make sure you have cleared any proxy cache you have running as well as your browser cache.

A simple way to force your browser cache to reload (most of the time) is to hold down the shift key while clicking the “page reload” in your browser’s address bar.   Some browsers are overly-aggressive with caching (Safari!) and you may need to clear your history.

 

The Video

An example for our Weebly South Carolina Ice Cream site on how to tweak the CSS.

 

Featuring Locations – Top of Results and Highlighting

Store Locator Plus allows you to feature specific locations in your search results.   This requires the Experience add on for WordPress or a Professional or Enterprise account for My Store Locator Plus.    Some of the interface styles provided by the style gallery support featured location highlighting “out of the box”, such as the Default With Font Tweaks style.

Select A Style That Supports Featured Locations

The Default With Font Tweaks Style is one of the styles that highlights locations and is a good starting point for testing this functionality.  You can adjust the layout and styling afterwards to meet your specific design requirements.

WPSLP – Select the Store Locator Plus entry in the side menu.

MYSLP – Select Advanced Options in the side menu.

Go to the Settings Tab and select the View subtab.

Click on the activate button on Default With Font Tweaks in the style gallery.

Settings/View for styles

Continue reading “Featuring Locations – Top of Results and Highlighting”

Using Custom Map Markers

Store Locator Plus allows you to set a custom marker for all of your locations.

Upload Your Marker

Start by uploading the marker to a web accessible location.

WP SLP

Go to Media / Add New in the WordPress admin panel.

Upload your marker.

View the attachment details for the newly uploaded marker and copy the URL.
Continue reading “Using Custom Map Markers”

Adding Radius Selection First Entry

The Experience Add On allows for a new entry on the radius selector on the user interface.   When a Radius First Entry has been set it will appear as the initial text in the radius drop down that the user sees on your search form.   The value will be set to the default miles that you have set in Radii Options.

Continue reading “Adding Radius Selection First Entry”

Creating A Locator Page

Summary

To create a locator page that has a zip/postal code search box, a map of your locations, and the results list put the [slplus] shortcode on a page or post.

Go to Pages in your WordPress admin.

Create a new page.

Name it “Locations”.

Enter [slplus] in the main content area of the page.

Details

First create a new page for your WordPress site where the Store Locator Plus plug-in will reside. Add the shortcode (a special label inside of square brackets that is used within WordPress pages and posts to display the output from a plugin). You place a shortcode within the text of your page or post and the plugin will “do it’s magic”

Locator Shortcode

To display the Store Locator Plus search form, map, and search results using the defaults you have setup via Map Settings in the admin panel, use the following shortcode:

[slplus]

The base plugin will replace the shortcode with a search form, a Google Map, and a results section below the map.   Depending on how you have the plugin configured the map and results may start by showing some or all of your locations.

  • Hint: Do not copy and paste off this page or all you will see is the text. You must type in the shortcode onto your WP page.
SLP slplus shortcode
SLP slplus shortcode

Additional Shortcodes can be found under the SLP documentation Shortcodes:SLP