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.
What You Want for This Use Case Educational
- Divi Theme (put in and lively)
- The Handyman Layout Pack (now not the entire pack, simply the house web page structure). This shall be available from the Divi builder.
- The WP Store Locator Plugin (put in and lively)
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
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"}]}]
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.
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.
Replica the manner of the testimonial segment.
Then paste the manner to the highest segment with the principle header content material.
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.
Then delete the second one row in that segment containing the CTA.
Now delete each and every segment underneath the highest segment in order that most effective that one header segment stays.
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
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
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.
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"]
You’ll additionally use the plugin’s shortcode generator from throughout the backend builder in case you like.
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%
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
Field Shadow: see screenshot
Field Shadow Vertical Place: 14px
Field Shadow Blur Power: 40px
Field Shadow Unfold Power: -13px
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; }
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.
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.
Here’s what the web page looks as if on cellular.
In case you click on the instructions hyperlink subsequent to an inventory you’ll see the instructions seem.
And in case you click on a shop location icon at the map, extra information will seem.
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