Within the “ASL Settings” of the Store Locator, you can choose a color out of the 10 color pallets available for each template. However, if your required color is missing from the color pallet, you can generate your own color schema and apply it to the store locator UI.
Out of the Color Schema selection, you can select the Store Locator colors, however, there is a UI Color Customizer as well, that can be useful to generate the colors of your site via HEX colors, click on the UI Customizer button.
Select the template that you want to style and click on the Load Template.
Color Customization #
In this section, we will explore how to customize the colors and font sizes of various elements in your Store Locator plugin.
The primary field is the main one that drives the rest of the color fields, here are the details about the fields.
- Primary Color:
- This option allows you to customize the primary color of your store locator theme. Simply enter the HEX color code to match your branding.
- Header:
- Use this setting to adjust the color of the header background section.
- Header Text:
- Customize the text color within the header to ensure readability and visual appeal.
- Info Box:
- Set the color for InfoBox, making important information stand out.
- Info Box Background:
- Define the background color for InfoBox to give them a distinctive look.
- Info Box Link:
- Customize the color of links within InfoBox for clear interaction.
- Action Button:
- Tailor the color of action buttons in the InfoBox.
- Action Button Background:
- Set the background color for action buttons in the InfoBox.
- General Text:
- Customize the color of the general text for optimal legibility.
- List Background:
- Define the background color for the store list.
- List Title:
- Set the color for the store list title.
- List Subtitle:
- Customize the color of the sub-title in the store list.
- Highlighted:
- Define a custom color for the highlighted store list background.