Layout and density
Layout controls how the map, results list, and cards are arranged inside your finder. You choose one of nine layouts in the Finder Builder; the widget applies it immediately in the live preview. On narrow screens the widget adapts automatically so visitors always have a usable experience.
For a full tour of where these controls live, see Finder Builder. This page focuses on what each layout option does and when to use it.
Where to find layout settings
- Open your finder in the Finder Builder.
- Select the Design tab (or the dedicated Layout tab if your builder shows one separately).
- Scroll to the Layout section. Nine tiles appear — click any tile to apply it instantly to the preview.
- Click Save (then Publish if you are ready to go live) to make the change permanent.
🟡 [SCREENSHOT: The Layout tile grid in the Finder Builder with all nine options visible]
The nine layouts
Each layout is identified by a short code stored in your finder configuration (appLayout). The name in the builder and the code are shown together below.
Split layouts — map + list side by side
These layouts divide the widget into a map pane and a results list pane sitting next to each other. They work best when visitors need both the map context and the location details at the same time — retail store finders, service area lookups, and anything where “which location is closest” is the first question.
| Builder label | Code | List:Map ratio | List side |
|---|---|---|---|
| Split 80/20 Left | split-ltr-80 | 20 % list / 80 % map | Right |
| Split 80/20 Right | split-rtl-80 | 20 % list / 80 % map | Left |
| Split 50/50 Left | split-ltr-50 | 50 % list / 50 % map | Right |
| Split 50/50 Right | split-rtl-50 | 50 % list / 50 % map | Left |
80/20 variants give the map most of the horizontal space. The list panel is compact — good when the map is the primary interaction point and the list is secondary.
50/50 variants give equal weight to both panes. Use this when visitors need to read location details (address, hours, custom fields) without the panel feeling cramped.
Left vs. Right (LTR vs. RTL in the code) controls which side the list panel sits on. “Left” means the list is on the right side of the screen (the default, map-first reading flow); “Right” means the list is on the left. Pick whichever aligns with your page’s visual hierarchy.
💡 Tip: The 80/20 Right layout pairs well with right-to-left languages because the list panel appears on the left, matching RTL reading flow.
Map + Search Overlay — map-overlay
The map fills the entire widget area. A search bar floats above the map, and a compact scrollable list of results appears anchored to the bottom-left corner over the map. This layout works well for large full-bleed embeds where the map is the hero element.
⚠️ Warning: The list panel in overlay mode is compact by design. If your locations have many custom fields or long descriptions, a split or cards layout will give visitors more room to read.
List Only — list-only
No map is shown. Locations appear as a scrollable list with a full-width search bar at the top. This layout is ideal for directories where geography is not important — a list of offices, support contacts, or partner listings.
Cards layouts — full-width grid of cards
Cards layouts display locations as a two-column grid of cards instead of a compact list panel. They suit discovery experiences where visitors want to browse all locations visually before filtering.
| Builder label | Code | Includes map? | Includes search bar? |
|---|---|---|---|
| Cards Only | cards-only | No | No |
| Cards + Search | cards-search | No | Yes (above the grid) |
| Cards + Map | cards-map | Yes (above the grid) | No |
Cards Only — a bare grid with no search bar and no map. Good when your finder is pre-filtered (for example, embedded on a category page where visitors already know what they want).
Cards + Search — adds a full-width search and filter bar above the card grid. The most common cards option.
Cards + Map — places a map above the card grid. Visitors see the geographic spread of results, then scroll down to browse the cards. The map panel is approximately 32 rem tall (roughly 320 px at default scale).
💡 Tip: Cards layouts display a “quick filters” bar inside the grid by default (Cards + Search and Cards + Map). Only Cards Only suppresses that bar.
Mobile behavior
The widget uses two responsive breakpoints.
At 960 px and below (tablets and small desktops): All four split layouts collapse from a side-by-side view into a stacked view — map on top, list below. The 80/20 and 50/50 distinctions no longer apply at this width. The map pane gets a minimum height of 42 rem so it remains usable. The Map + Search Overlay layout also stacks at this breakpoint, with the overlay list shifting from an absolute position to a relative block below the map.
At 640 px and below (phones — split and overlay layouts only): The widget switches to a dedicated mobile tab layout. A “Map” tab and a “List” tab appear in a fixed tab bar at the bottom of the screen. The widget fills the full viewport height (100svh). Tapping a map marker reveals a “peek” card at the bottom of the map view with the location name, address, and quick actions (Directions, Details).
Cards and List Only layouts are not affected by the 640 px tab switch — they remain their normal stacked structure on phones.
🟡 [SCREENSHOT: Mobile tab layout on an iPhone screen showing the Map tab active with a peek card]
Choosing the right layout
| Scenario | Recommended layout |
|---|---|
| Retail store finder — map is primary | Split 80/20 Left or Split 80/20 Right |
| Office locator — equal map and details importance | Split 50/50 Left or Split 50/50 Right |
| Immersive full-page map embed | Map + Search Overlay |
| Directory with no geographic relevance | List Only |
| Marketing landing page — browsable gallery | Cards + Search |
| Category page with pre-filtered results | Cards Only |
| Show all locations on a map before browsing | Cards + Map |
🔴 [NEEDS CLARIFICATION: Is there a recommended minimum number of locations before the Cards + Map layout’s map pane renders meaningfully? Some customers report the map looks sparse below ~5 locations.]
Pairing layout with refinement count
The number of refinements (filters) you expose affects how well each layout feels.
- Split layouts with a narrow list panel (80/20) get crowded if you show many filters in a side panel. Prefer the popup or accordion filter style and keep active filters to five or fewer.
- Cards + Search has more horizontal space for an inline filter bar, making it easier to show six or more refinements.
- List Only works well with accordion-style filter panels since the full width is available.
See Shape and radius for corner rounding options that apply to the cards and list items regardless of layout.
Frequently asked questions
Can I change the layout after publishing? Yes. Layout changes take effect the moment you save and publish. Existing embeds update automatically — you do not need to change any embed code.
Does the layout affect SEO or page load time? All layouts load the same widget bundle. The only difference is which components render. Cards + Map and split layouts load the map library; List Only and Cards Only do not. If map load time is a concern, List Only or Cards Only removes the map dependency entirely.
The list panel feels too narrow in the 80/20 layout. What are my options? Switch to a 50/50 split, or use Cards + Search if a grid presentation suits your content. You can also reduce the number of columns or the amount of text shown per card by adjusting which fields are visible in the location builder.
🔴 [NEEDS CLARIFICATION: Is there a way to manually set the list panel width beyond the 20/50 presets, for example via custom CSS?]