In case you have a couple of retailer places, including a shop locator in your web page can significantly make stronger the consumer revel in. I’m positive you’ve got used them earlier than when visiting a shop’s web page that can assist you to find that retailer nearest to you. And I individually recognize the websites that experience an interactive map to turn within sight places and knowledge. A easy google seek for a shop location offers you an concept of simply how helpful this capability can also be.

For this use case educational, I’m going to be appearing you learn how to upload a searchable map retailer locator in your web site with Divi’s Handyman Format Pack. The plugin I’ll be the usage of is named WP Retailer Locator. This unfastened plugin has some robust customizable options together with auto-generated riding instructions and customized map types. When I display you learn how to upload shops and use the shortcode to deploy your retailer locator at the web page, I’ll display you learn how to customise the manner of the shop locator with Divi to check the Handyman Format. I’ll even throw in a customized Google map taste to check the structure much more.

Let’s get to it.

Sneak Peek

Here’s a sneak peek of what we can be construction these days.

store locator sneak peek

What You Want for This Use Case Educational

Putting in the WP Retailer Locator Plugin

To arrange the WP Retailer Locator plugin, navigate to Retailer Locator > Settings. You must take a while to appear via the ones settings to make changes for you personal web site, however for now you’ll get issues up and working with the next:

Google Maps API Keys: Create and paste a server and browser key to permit google maps to paintings with the plugin.

Beneath the Map segment

Try to auto-locate the consumer: take a look at
Get started Level: Houston, TX, USA (this would be the start line if auto-locate fails; you’ll input your individual location if you already know what it’s)
Map Taste: Right here you’ll upload a customized map taste by way of pasting within the code (see underneath for more information)

Beneath the Consumer Revel in Phase

Seek and radius label width: 115px
Retailer Locator template: default (you’ll additionally make a choice the way to display the shop places below the map)

Markers

Get started Location Marker: darkish orange
Retailer Location Marker: darkish blue

Save Adjustments

store locator

Taste Your Google Map

If making a decision you wish to have to create a customized taste in your Google map, there are some useful hyperlinks at the settings web page that can get you began below the Map Taste segment of the settings web page.

I used Mapstylr to generate the next code that you’ll paste into the map taste enter field at the settings web page (use it in case you like):

[{"featureType":"all","elementType":"geometry.fill","stylers":[{"color":"#dddddd"}]},{"featureType":"all","elementType":"labels.textual content","stylers":[{"color":"#1476fb"}]},{"featureType":"all","elementType":"labels.textual content.stroke","stylers":[{"visibility":"off"}]},{"featureType":"street","elementType":"geometry.stroke","stylers":[{"color":"#fc551f"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#1476fb"}]},{"featureType":"street","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#ffffff"}]}]

store locator map style

Upload New Shops

Once you have up to date the settings, it is very important get started including your shops. So as to add a brand new retailer, navigate to Retailer Locator > New Retailer and replace the next:

Input Identify in your Retailer
Upload Description/Content material – This content material will most effective be displayed if you choose to turn a “Extra information” hyperlink within the retailer listings at the settings web page. And this truly works higher in case you additionally make a choice the Retailer Locator template that displays the shop record underneath the map.

Retailer Main points – Right here you’ll upload the site knowledge (important appearing the shop at the map), opening hours, and any additional information (like telephone quantity and e-mail).

Featured Symbol – upload a featured symbol to show a thumbnail at the retailer record.

Retailer Class – If you wish to have, you’ll upload a class to higher arrange your shops.

Submit your Retailer.

store locator new store

After you have entered your new shops, you’re ready so as to add the shop locator to you web page.

Create Retailer Locator Web page

You if truth be told don’t need to create a wholly new web page for this retailer locator. The plugin makes use of a shortcode to show the shop locator any place in your web site. However for this situation, I’m going to turn you learn how to create a brand new web page for the shop locator the usage of the Handyman House web page structure.

Use the Handyman House Web page Format on a New Web page

Create a brand new web page and deploy the visible builder. Then upload the Handyman House Web page structure to the web page by way of opening the settings menu, clicking the burden from library icon, and deciding on the structure below the premade layouts tab within the popup field.

store locator new layout

Replica the manner of the testimonial segment.

store locator copy style

Then paste the manner to the highest segment with the principle header content material.

store locator paste style

Delete The whole lot You Don’t Want From the Format

Within the most sensible segment, delete the module within the first row containing the mock paragraph content material.

store locator delete module

Then delete the second one row in that segment containing the CTA.

store locator cta row

Now delete each and every segment underneath the highest segment in order that most effective that one header segment stays.

store locator

Replace Settings for Phase

Now open the segment settings and replace the next:

Delete Background Colour
Background Gradient Left Colour: #0072ff
Background Gradient Proper Colour: rgba(255,255,255,0.89)
Get started Place: 50%
Finish Place: 0%
Position Gradient Above Background Symbol: YES

Upload a brand new background symbol (round 1920px by way of 1100px)
Background Symbol Measurement: are compatible
Background Symbol Place: Backside Heart

store locator

Beneath the design tab, replace the next:

Give your segment a backside divider.

Dividers: Backside
Divider Taste: see screenshot
Divider Horizontal Repeat: 0.5x
Divider Turn: horizontal

store locator

Customized Margin: 60px Backside

Save Settings

Replace Identify

For the textual content module that comprises the identify of the web page, use the inline editor to modify the textual content to mention “Discover a Handyman Close to You”.

Create New Row and Textual content Module for Retailer Locator Shortcode

Create a brand new one column row within the segment give it some customized spacing as follows:

Customized Padding (desktop): 0px Best, 0px Backside, 0px Left, 3% Proper
Customized Padding (pill): 0% Proper

The best padding creates spacing for the fitting border design.

Then upload a proper border to check the design of the left border within the identify above.

Choose the fitting border tab.
Proper border width: 10px
Proper Border Colour: #fc551f

Save settings.

store locator

Subsequent create a textual content module and input the next shortcode within the content material field:

[wpsl map_type="roadmap" auto_locate="true" start_marker="dark-orange" store_marker="dark-blue"]

store locator

You’ll additionally use the plugin’s shortcode generator from throughout the backend builder in case you like.

store locator

Then give the textual content module a background.

Background Gradient Left Colour: #fc551f
Background Gradient Proper Colour: #ffffff
Get started Place: 20%
Finish Place: 0%

store locator

This gradient will function a customized design to present the quest bar (generated by way of the plugin) an orange background.

Now we replace the design settings for the textual content module.

Textual content Textual content Measurement: 18px
Customized Padding: 2% Best, 2% Backside, 3% Left, 3% Proper

store locator

Field Shadow: see screenshot
Field Shadow Vertical Place: 14px
Field Shadow Blur Power: 40px
Field Shadow Unfold Power: -13px

store locator

Save Settings.

Upload Customized CSS for Seek Button

If you wish to trade the default taste of the quest button to check the design of your structure, you’ll upload the next customized CSS to Web page Settings below the Complex Tab.

#wpsl-search-btn {background: #393e4a; colour: #fff; font-size: 16px; font-weight: daring; padding: 0.6em 1.6em; }

store locator

If you wish to have the CSS to be implemented to all pages in your web site, you’ll upload the code to the Further CSS segment throughout the theme customizer.

Ultimate Consequence

Now let’s take a look at the overall consequence.

store locator

Here’s what the shop locator will seem like in case you trade the template to “display the shop places below the map” below the plugin settings.

store locator

Here’s what the web page looks as if on cellular.

store locator

In case you click on the instructions hyperlink subsequent to an inventory you’ll see the instructions seem.

store locator

And in case you click on a shop location icon at the map, extra information will seem.

store locator

Ultimate Ideas

I used to be pleasantly shocked at how briefly and simply I used to be in a position to get retailer locator capability the usage of Divi and the WP Retailer Locator Plugin. The settings are lovely simple, making customization simple and logical. I additionally recognize the extra options just like the customized map types, the shop instructions, and the sensible map markers that popup and display extra information at the retailer.

Divi turns out to paintings smartly with this plugin and the Handyman Format pack makes it simple to present your retailer locator the design changes it wishes.

Additionally, this plugin will paintings for nearly any web page, now not simply the ones within the Handyman area of interest.

If you curious about including top class add-ons to the plugin (just like the search widget), be at liberty to try their website.

I look ahead to listening to from you within the feedback underneath.

Cheers!

The submit How to Add a Searchable Map Store Locator to Divi’s Handyman Layout Pack gave the impression first on Elegant Themes Blog.

WordPress Web Design

[ continue ]