Skip to main content

Create a split Store List and Map layout

This recipe places a scrollable Store List beside the Map.

Build the rows​

  1. Create/open a Layout.
  2. Add a full-width row for Search and filters.
  3. Add a second row with the ⅓ + ⅔ preset.
  4. Insert Store List in the 4/12 column.
  5. Insert Map in the 8/12 column.
  6. Set both widgets' Mobile width to 12 so they stack.

Reverse the columns or use ⅔ + ⅓ when the Map should appear first.

Give the Store List and Map exactly the same height​

When Store List and Map are in separate columns of the same row:

  1. Select the parent row.
  2. Open Row settings → Layout.
  3. Enable Equal column heights.
  4. Enter Column height, for example 600px, 80vh, or 40rem.
  5. Keep the Map in its own column.
  6. Put Result Count first and Store List second in the list column when the count/Print toolbar should remain fixed above the scrolling cards.
  7. Save the Layout and test with enough stores to make the list scroll.

The row creates equal fixed-height tracks for every column. The Map overrides its saved pixel height and fills the right track. In the list column, Result Count and other widgets keep their natural height while Store List receives the remaining height; its cards become the internal scroll area while its toolbar and Load more control remain visible. Other widget types are not forcibly stretched.

The resulting composition is:

Equal-height row (for example 600px)
├── List column
│   ├── Result Count / Print — natural height
│   └── Store List — fills remaining height and scrolls internally
└── Map column
    └── Map — fills the complete 600px column

The Map widget's own Height remains its fallback when it is used elsewhere. Inside an equal-height row, the row's Column height deliberately takes precedence.

If the Map still appears short​

  • Confirm Equal column heights is enabled on the parent row, not on one of its columns.
  • Confirm Map and Store List are in two columns of that same row.
  • Confirm the Map is a direct widget in the Map column rather than nested inside another Layout.
  • Clear page/cache-plugin CSS after changing the Layout.
  • Inspect the row and confirm its generated rule contains the chosen definite height, such as grid-auto-rows:600px.

When Store List and Map are sibling widgets inside the same Builder column instead:

  1. Click their parent column's dashed container.
  2. Open Column settings → Layout.
  3. Enable Equal widget heights.
  4. Enter Widget height, for example 600px, 80vh, or 40rem.
  5. Save and check the layout at Desktop, Tablet, and Mobile widths.

The setting fixes every widget row in that column to the entered height. The Map stretches to fill its widget cell even if the Map widget has a different saved Height. For Store List, the cards become the internal scroll area while the filter toolbar and Load more button remain inside the 600px panel. This avoids the common mismatch where a 620px list plus its toolbar or pagination becomes taller than a 620px Map.

Do not enable this on a column that contains unrelated widgets that should size naturally. It applies to every direct widget cell in the selected column. Use the row-level Equal column heights setting when Map and Store List are in separate Builder columns.

Configure cross-selection​

Select a Store card and confirm the corresponding marker is focused/opened according to the frontend behavior. Select a marker and confirm its infobox represents the same Store. Enable selected-store detail only if replacing the list is appropriate for this two-column layout.

Mobile decisions​

Stacking both at width 12 does not decide order. Arrange the row/columns in the order mobile visitors should encounter them. Optionally enable Store List Allow map-only view to let visitors switch to a larger Map presentation.