Page layout

To work correctly, the plugin automatically creates the Store Locator page on your site through the shortcode [yith_store_locator].

The plugin offers different options to help you set your store locator page style. To do it, go to YITH -> Store Locator -> Store locator page tab where you will find four tabs to start configuring the options according to your needs.

From the tab General, you can enable the full-width layout and define the side and margins by entering the values (in px).

The available options are:

• Page layout: select the position of map and search results choosing from Map right and Map left;
• Map width (in %): enter the width of the map as a percentage. The default one is 65. Based on the value inserted, the width of the search results list will be calculated dynamically;
• Map height (in pixel): enter the height of the map in pixels;
• Show results in: select whether you want to  show results in a single column or two columns;
• Scrollbar colors: choose the colors for the scrollbar used to navigate in results;
• Scrollbar width: enter the value for the scrollbar width (in pixel) for the results section.

From the Search tab, you can configure all the settings related to the search box and filters that will show on your store locator page. You can choose to show or hide the search bar and/or use the instant search. Let’s analyze all the available options.

• Search bar and filters position: select the default position of the search bar and filters. You can choose from above or beside the map.
• Show the search box: if enabled, the search bar will show on the store locator page and you will be able to configure all the following options:
  • Search form colors: choose the background and text colors of the search form;
  • Enter a text to display inside the search form: enter the placeholder address/city for the search bar;
  • Upload icon for search bar: this allows uploading a custom icon to show in the search bar;
  • Enter a title for “search” feature: enter the title you want to show above the search bar.

Instant search

If you want the search results to load automatically without the need for users to click on the Search button, enable the option Use instant search.

On the contrary, if you prefer to show the Search button to let users get the results of their search, disable the Use instant search option and configure the text and colors of the button through the options shown below.

To give users the possibility to use their position automatically for the search, you must enable the option Use geolocation in Geolocation settings.

You can decide to use a button or a text link to let users activate their geolocation. Text, button, and icon can be customized through the options available.

If you want to show the users’ position automatically, you must enable the Enable auto geolocation option. After activating it, users will get an alert when opening the store locator page.

To show users the button View all stores on your store locator page, you must enable the Show View all stores button option.

You can decide to use a button or a text link to let users view all the stores in the results list. Text, button, and icon can be customized through the options available.

All the settings for the filters can be configured in the Filters section.

First of all, you must create the filters as described in this guide. After creating them, you can decide whether to show them or not on the store locator page by enabling or disabling the option Show filters. When enabled, the plugin will allow you to set the following options:

• Filters display mode: select Opened in the page if you want the filters to show already opened or Dropdown style if you want to show a dropdown;

• After the search: select if you want to keep the filters opened or hide them and show a link to open them;
• Show “active filters” text: enable if you want to show the active filters after the search. If enabled,  you can enter a text to identify the active filters.

Radius filter

To give users the possibility to highlight a specific radius on the map you will be able to do it through the option Show radius filter (enabled by default). You can choose to show the distance in the map as KM or Miles through the Distance unit option.

You can set a default value for the radius by selecting it in the terms you have configured.

Set the option Show radius filter to NO, if you don’t want to show the radius filter.

To work correctly, the plugin automatically creates the Store Locator page on your site through the shortcode [yith_store_locator].

To start configuring the style of the page, go to the tab Store locator page > General.

Here, you will be able to choose whether to show the page with a full-width layout or not and set the side margins (in px).

You can customize both the title of the results list and the text to show when the search doesn’t generate results through the options that you find in the Search results section of the Search tab.