KNOWLEDGE CENTER

 

 



 

 

 

 

 

 

         

Add a Store Locator

 

 

 

 

 

 

Webtreepro offers you the opportunity to use the Store Locator. 

 

Customers can easily find you with maps that are presented by Google Maps.

 

You must have a Google Maps API Key in order to use the Store Locator.  

 

 

 

 

 

 

   To get a Google Maps API Key: 

 

   1.   Go to http://code.google.com/apis/maps/signup.html or if the address has changed, search Google for "Google Maps API Sign Up.”

 

   2.   Fill in the online form:

 

      • Enter your site's URL.

 

      • Agree to Google's Terms of Use.

 

      • Click the General Google API Key.  Google will bring up the Key screen, as seen below.

 

 

 

     ABQIAAAASvAlWWCVFsFjppJiWEjidkdo2893460zxwpjl

 

 

 

  

  3.   Copy the key to your clipboard.  You can use the Copy commands on your keyboard by using the Control Key and C key. (Ctrl + C) 

 

 4.    Next, go to the dropdown that is located in the gray panel to the left of your

          screen. 

 

 

 5.   Select Sites from the dropdown which will bring up the Site Administration screen,

        as seen below.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

   5.   Enter the Google API Key in the lower right corner of the screen.  You can use the "Paste Command," Control + V keys on your

         keyboard.

 

   6.   Click Done  to close the Site Administration screen.

         
 

 

   Now, it's time to place the Store Locator onto a page.

 

 

   1.   To place the Store Locator, first go to the page in your site where you want the Locator to be. 

 

   2.   Then, go to the gray panel to the left of your screen and click Add Content

 

   3.   The Add Content wizard brings up the Content Type screen.  Scroll down to Store Locator and click the radio button.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

 

   4.   Click Next   to go to the Placement tab.  Choose the Content Placement and the Panel Location.  Some of the

         Templates seen below may or may not be the same Template selection you have available for your use.  The needs of

          individual websites vary.  Webtreepro offers different selections to meet your website's particular needs.

 

           

 

 

   5.   Click Next to go to the Details tab. You can see there are two tabs at Details.

  

 

 

  In the Common Properties tab, your Search options are:

 

            1.   Search By:  allows you to select options in order to narrow the search for the store's location.

 

          • Geographic is the default option, but you can offer the visitors the ability to search for a store by entering a ZIP code.  Your visitors would enter the ZIP code, and the approximate distance they would be comfortable  in traveling to the store.  Then, they would click on the Search   .  See bottom, below right.

 

          • Choose what will be the least amount of input acceptable.  In the above Common Properties screen State is chosen rather than Country.

 

          • Enter 2 sets of different Instructions to viewer.  One for Geographic, and one for ZIP.  The visitor has the option to choose one of the other.

 

          •  Choose how many lines you'll want to put into the Instructions to viewer box.

 

                                                                                                                               

Geographic View

 

Zip Code View 

 

 

           2.   Additional fields:  The checkboxes can be checked if you want to offer more detailed information.

 

           3.    You can enter a Map Link Name.  (Optional)

 

           4.    Display results as:

 

        • You have options on how to display the Map:  on top, to the left or right, or not have it shown at all.

 

        • Also, you can display text only, or text and images.

 

            5.     Choose whether you want the display to be on the Same Page, or as a Popup window.

 

            6.      Decide whether the child sites will be included.

 

            7.      You can adjust the display's Width and Height by entering a number of  pixels. 

 

            8.      Do not click on the Next   button if you want to set the Style for the display.  If you don't want to enter any Style

                     options, click Next  to go to the other tabs of the Add Content wizard.

 

 

         

   

If you do want to enter Style options, click the Styles tab that is right next to the

Common Properties tab.

 

                                                                                                         

 

 

   1.   You have the ability to choose the Font Style and Font Color for each line.  Line 1 has font options that are visible already.  To make

          font selections for Lines 2 - 8,  just click on the text for each line.

 

        • Font Style:  Click the Font button .  The 3 dropdowns will let you choose a Font, a Font Style and Font Size, all of which can be seen in the preview box at the bottom of the Font Settings window.  

 

        • Click OK   to save.  Click Clear to make a different selection, or cancel any selection.

 

        •  Font Color:  You can choose a color for your Font by clicking the square to see the color palette, or by entering the hex color code.  If you don't choose a color, the Font will be in black.  The example above has Font Color #00ff00 selected.

 

 

 

 

 

  

   2.   Once your Font Style and Font Color are chosen, click OK  to save.  Click Cancel  to exit the Font Settings tab.

 

   3.   At this point, click Next   to continue through the Add Content wizard, if need be.  Otherwise, you can click  Finish

           and avoid going through the rest of the Add Content tabs.

 

   4.   Your Store Locator will appear on the page you've selected. As with all newly added Content, the Store Locator will be

          first located at the bottom of the selected panel.  You may want to move the Store Locator elsewhere.  If so, do a right click

          inside the area, and the Store Locator's Properties window appears, seen here.  Click Move to... and another flyout

          appears.  Make a selection.  In order to move the Store Locator to its perfect location, this process may need to be repeated. 

 

 

 

 

 

         

   5.   To test the Store Locator, you must be in Published Mode, or click on Date Preview located in the gray panel to your left.

 

 

 

 

 

 

 

  

Edit or Delete a Store Locator