> For the complete documentation index, see [llms.txt](https://mappy-docs.tech-arms.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mappy-docs.tech-arms.io/getting-started/settings/appearance.md).
# Appearance
The **Appearance Settings** section allows you to customize the look and feel of the map and its associated elements on your store locator page. You can choose styles, layouts, and more to create a cohesive brand experience for your customers.
Here’s how to configure these settings:
### **1. Map Type**
Select the map provider to display on your store locator. Three map types are available: **OpenStreetMap**, **Google Maps** and **Mapbox**.
Picking **Google Maps** reveals two key fields below the selector — **Storefront Key** and **App Server Key (optional)** — each with its own **Check** button. Picking **Mapbox** asks for a Mapbox token instead. See the **Google API Settings** and **Mapbox Token Settings** sections.
{% content-ref url="/pages/iRk6tNmKLKpOMSVqDhfh" %}
[Set Up Google API](/getting-started/settings/google-api-settings/set-up-google-api.md)
{% endcontent-ref %}
***
### **2. Map Style**
* **Choose Map Style**: Select the preferred map style to display on your store locator. We have 12+ map styles including Default, Grayscale, Modest,... to align with your brand's aesthetic.
***
### **3. Map Routes**
Let customers get directions from their location to a store on your map. While this is active, **Get directions** opens a directions panel inside your store locator instead of a new Google Maps tab.
* Click **Activate** or **Deactivate** to show or hide the panel. Deactivating keeps your settings.
* **Travel modes**: tick the modes customers can choose from. The ticks are saved separately for each map type, and the routing provider follows the **Map type** above.
On a Google map, directions also need the **Routes API** enabled on your **Storefront Key**.
{% content-ref url="/pages/YSh68RKJwLHsuRW6k5bB" %}
[How do I set up Map routes?](/faq/frequently-asked/how-to-set-up-map-routes.md)
{% endcontent-ref %}
***
### **4. Map Layout**
The **Map Layout** section controls how the map and the store list are arranged. The layout is configured separately for **Desktop** and **Mobile** — switch between the two tabs at the top of the card.
On **Desktop**:
* **Combine** — the map and the list sit in one block, with the list on the **Left** or on the **Right**.
* **Single** — show **Only list** or **Only map**.
* **Split** — the list and the map are separate blocks: list on the **Left**, **Right**, **Above** or **Below** the map.
On **Mobile**:
* **Hybrid** — **Left** or **Tab**.
* **Single** — show **Only list** or **Only map**.
* **Split** — list **Above** or **Below** the map.
Combine, left on desktop
Only map on desktop
List above map on desktop
Tab on Mobile
List below map on Mobile
***
### **5. Map size**
Set the width, alignment and height of your store locator, without custom CSS. Leave the card alone and your storefront keeps the size it has today.
Two tabs at the top choose what you are sizing:
* **Map page** — your locator page. These settings also apply to the embed code.
* **Map block** — the app block you add to a theme page. Keep **Same as map page**, or give the block its own size.
Like **Map Layout**, the card has **Desktop** and **Mobile** tabs, and a preview drawn to scale next to them.
**Width** (desktop only):
* **Theme width** follows your theme's content area, as today. On the **Map block** tab this is **Section width**, which fills the section the block sits in.
* **Custom width** takes a value in **% of screen** (30–100%) or **px** (320–2400). Switching the unit converts the value for you.
* **Alignment** — **Left**, **Center** or **Right**. Available with a custom width.
**Height**:
* **Automatic** keeps the height your layout uses today. **Custom height** takes 300–1200 px on desktop and 250–900 px on mobile.
* In the **Combine** and **Split** layouts the list has its own **List height**, so the map and the list can differ. On **Automatic** the list shows in full.
On mobile the locator always fills the screen width, so only the height can be set there.
***
### **6. Search Bar**
* You can **activate/deactivate** the Search bar and decide where the search bar will appear
Above the map
Top of the menu block
* **Search Button**: Activate the Search Button. Check this box to enable the search button, allowing customers to easily initiate searches.
Or else, it will appear as a small icon on the search bar
***
### **7. Search Suggestion**
Limit the address suggestions shown in the storefront search bar to the countries you sell in. Click **Activate**, then pick your countries in the **Search countries** field — each one is added as a tag you can remove.
> Search suggestions will only include locations from the selected countries. Searches outside these countries will return no results.
This limit applies to the storefront search bar only, not to the directions panel.
{% content-ref url="/pages/jQFg6ueJ14WPmVtFRk48" %}
[How does Search Suggestion work?](/faq/frequently-asked/how-does-search-suggestion-work.md)
{% endcontent-ref %}
***
### **8. Custom CSS**
Use this section to add custom CSS code to customize the appearance of your map. Only CSS is accepted — anything else is rejected with the message *Only CSS is allowed.* If you need assistance, please reach out to us via chat.
***
For any additional support, feel free to contact us via **Live chat** or [**support@tech-arms.io**](mailto:support@tech-arms.io)
.png?alt=media)
%20(1).png?alt=media)
.png?alt=media)
.png?alt=media)
.png?alt=media)
.png?alt=media)
%20(1).png?alt=media)
.png?alt=media)
.png?alt=media)
%20(1).png?alt=media)
%20(1).png?alt=media)