Layout
The Layout section of the Finder Builder controls how the map, results list, and location cards are arranged on screen. Choosing the right layout is one of the most impactful decisions you’ll make — it shapes whether visitors interact with a map first, a list first, or a browsable card grid.
Where to find it
- Open your finder in the Finder Builder.
- Select the Design tab in the left sidebar.
- Scroll to the Layout section. Nine tiles appear — each shows a small diagram of the arrangement.
- Click any tile to apply it instantly to the live preview.
- Click Save, then Publish to make the change visible on your site.
🟡 [SCREENSHOT: The Layout tile grid in the Finder Builder showing all nine options, with the active layout highlighted]
The nine layouts at a glance
Split layouts — map and list side by side
The map and the results list sit next to each other. Best when visitors need both geographic context and location details at the same time.
| Layout | List:Map split | Good for |
|---|---|---|
| Split 80/20 Left | 20 % list, 80 % map | Map-first experiences; compact result panels |
| Split 80/20 Right | 20 % list, 80 % map | Same, with the list on the left side |
| Split 50/50 Left | Equal halves | Locations with rich details (hours, custom fields) |
| Split 50/50 Right | Equal halves | Same, with the list on the left side |
💡 Tip: “Left” and “Right” in the name refers to which side the list panel sits on. Use Right variants to match right-to-left reading flow.
Map + Search Overlay
The map fills the entire widget. A search bar floats above it, and results appear in a compact panel anchored to the bottom-left corner of the map. Use this for full-bleed, immersive embeds where the map is the hero element.
⚠️ Warning: The overlay results panel is intentionally compact. If your locations have long descriptions or many custom fields, a split or cards layout will give visitors more room to read.
List Only
No map at all — just a scrollable list of locations with a search bar at the top. Best for directories where geography doesn’t matter, such as a list of support contacts or partner offices.
Cards layouts — browsable grid
Locations display as a two-column card grid. These work well for discovery experiences where visitors want to browse before filtering.
| Layout | Includes map? | Includes search bar? |
|---|---|---|
| Cards Only | No | No |
| Cards + Search | No | Yes |
| Cards + Map | Yes (above the grid) | No |
Cards Only suits pages where results are already pre-filtered (for example, embedded on a category landing page). Cards + Search is the most common cards option — it adds a full-width search and filter bar. Cards + Map shows a map above the card grid so visitors can see geographic spread before browsing.
Choosing the right layout
| Scenario | Recommended layout |
|---|---|
| Retail store finder — map is the primary interaction | Split 80/20 Left or Right |
| Office locator — details matter as much as location | Split 50/50 Left or Right |
| Immersive full-page or hero map embed | Map + Search Overlay |
| Directory with no geographic relevance | List Only |
| Marketing page — browsable gallery of locations | Cards + Search |
| Category page with pre-filtered results | Cards Only |
| Show all locations geographically before browsing | Cards + Map |
Mobile behavior
On phones (screen width 640 px and below), split layouts and Map + Search Overlay switch to a tabbed mobile view: a Map tab and a List tab appear in a fixed bar at the bottom of the screen. Tapping a map pin shows a compact “peek” card with the location name and quick actions. Cards and List Only layouts are not affected — they simply stack normally on small screens.
Changing layout after publishing
Layout changes are non-destructive. You can switch layouts at any time and publish immediately — existing embeds update automatically without any change to your embed code.
For the full layout reference including the appLayout config codes and detailed responsive behavior, see Layout and density.