How to Customize Google Marker Infobox and Sidebar of Store Locator

  • Updated on: August 19, 2024

One of the most useful features of Agile Store Locator is that it allows you to customize the information on the store list and infobox according to what you think is best for you and your customers. Furthermore, since Agile Store Locator Infobox is custom-made HTML, it can be edited or styled with CSS without any knowledge of scripting. 

Moreover, customizing store lists or Google marker infoboxes is extremely easy with our plugin. In addition, not only can you style the Google Marker Infobox but you are also able to add/remove attributes or fields from the Infobox and/or store list.

Some of the pre-installed fields that are available on the store locator include: 

title, description, street, city, state, postal_code, country, lat, long, fax, etc.

Firstly, customization of the store list and infobox marker content is done through the “ Customizer” section on Agile Store Locator.

Secondly, if you would like to customize the store list or infobox marker content (color scheme, marker size, map options, store information, etc.) please follow the below steps:

  1. On Agile Store Locator, go to “ASL Settings”
  2. Go to the “Customizer” section
  3. Select a “Template” and “Section” from the drop-down menu that corresponds to the store locator template you are using and what part of the map you are customizing
  4. Click on “Load Template” to bring up the HTML code script
  5. On the “Template Editor”, insert the relevant code for a custom change
  6. Click on “Save Template”

Once this is done the custom change will be applied to your store locator map.

Customizer Section
Customizer Section

Example 1 – How to add social media buttons (Facebook, Twitter, and Instagram) to the store list

Let’s take a look at an example where a user wishes to customize the store list by adding social media buttons (Facebook, Twitter, and Instagram).

To make this customization, the user simply needs to enter a few lines of custom code in the “Customizer” section of Agile Store Locator, add data for the new buttons (URL), and the changes will appear on the store list

To add social media button on the store list, please follow the below steps:

  1. On “ASL Settings”, go to “Manage Additional Fields”
  2. Click on “+ New Field”, and add “Facebook”, “Twitter”, and “Instagram” as 3 new fields
Manage Additional Fields
Manage Additional Fields
<div class="sl-row">
      <div class="pol justify-content-center text-center">
      {{if facebook_url}}
      <a target="_blank" href="{{:facebook_url}}" class="btn btn-asl">[Facebook]</a>
      {{/if}}
      {{if twitter_url}}
      <a target="_blank" href="{{:twitter_url}}" class="btn btn-asl">[Twitter]</a>
      {{/if}}
      {{if instagram_url}}
      <a target="_blank" href="{{:instagram_url}}" class="btn btn-asl">[Instagram]</a>
      {{/if}}
      </div>
</div>
  1. Add the respective control names for each field
  2. Click on “Save Fields”
  3. Return to “ASL Settings”, and go to the “Customizer” section
  4. On the “Customizer” section, choose your “Template”, and “Section” from the drop-down menus, and click on “Load Template”
  5. Insert the custom HTML code on the template editor, and click on “Save Template”

For the changes to take place, the respective custom fields will need to have data entered into them. Otherwise, the change will not be noticeable.

Once the new custom field has been assigned some form of data, you will see the changes on the store locator map.

Moreover, the custom button HTML code for the above example can be found in this GitHub link.

Custom Changes on Store List
Custom Changes on Store List

Note: if you would like to import or export custom fields on a CSV file it can be done by using the control name of the custom fields as the header, then following the normal import/export procedure

Example 2 – How to add a second phone number on the store infobox

For the second example, let’s see how a user can customize an infobox by adding a second phone number to the store infobox.

To add a second phone number to the infobox, please follow the below steps:

  1. On “ASL Settings”, go to “Manage Additional Fields”
  2. Click on “+ New Field”, and add “Second Phone Number” as a new field
  3. Add the respective control names for the new field (phone_2)
Second Phone Number Field
Second Phone Number Field
  1. Click on “Save Fields”
  2. Return to “ASL Settings”, and go to the “Customizer” section
  3. On the “Customizer” section, choose your “Template”, and “Section” from the drop-down menus, and click on “Load Template”
  4. Insert the custom HTML code on the template editor, and click on “Save Template”
Custom Code for Second Phone Number
Custom Code for Second Phone Number

 

Once you click on “Save Template” you will need to add data to the “second phone number” field for the second phone number to appear on the store infobox.

Second Phone Number Added
The Second Phone Number Added

Moreover, the custom HTML code for the above example can be found in this GitHub link

Thank you for reading the article. I hope it was useful in providing you with the basic steps on customizing the infobox and store list of your store locator.

Comments :
  • Just wish to say your article is as astonishing. The clearness on your submit is just nice and
    I can think you are a professional on this subject.
    Well together with your permission let me clutch your feed to stay updated with approaching post.

    Thanks a million and please continue the gratifying work.

Comments are closed.