General settings

To set the location for your stores, the plugin uses Google Maps services. So, as a first step, you must insert your “Google Maps API Key”.
To access Google, go to https://developers.google.com/maps/documentation/javascript/get-api-key and create a new project.

In the project, select Go to project settings.

Go to IAM and admin, click on Library and search for Geocoding API Maps, Geolocation API, Maps Embed API, Maps JavaScript API, and Places API services.

Access each API and activate them.

Click on the Create Credentials entry to get the API key:

Finally, copy and paste it into the plugin options panel, in YITH > Store Locator > General:

Please note – Since Google API keys are a paid feature, for the plugin to work properly, you must associate a billing profile to your Google account. For more details, refer to the Google Maps Platform pricing on this page.

In the General section, you can configure the scrollbar and loader options that will show on the store locator page.

Scrollbar

Through the following options, you can customize colors and width of the scrollbar used in the results section.

• Main Color shade: set the main color shade for the Store locator page.
• Scrollbar colors: set the main and thumb color for the scrollbar.
• Scrollbar width: set a value (in px) for the scrollbar width.

Loader

Through the following options, you can customize the loader shown on the map when loading the results.

• Set a default loader or custom loader: decide the loader to use between
  • Default loader: choose one of the default loaders by selecting the icon through the option Default loading icon;
  • Custom loader: upload your loader through the option Upload a custom loader.

• Loading icon size: (available for the default loader) choose the size of the loading icon from Small, Medium and Big.
• Loading icon color: set the color of the loading icon.
• Overlay color: set the overlay color of the loading icon.

Custom code

Finally, if you need to customize some elements, you can add custom CSS and custom JS from the Custom code section.