โŒ˜K

Layout and map size

Last updated

Choose where the list sits and how tall the map is.

  1. Select the block and open the Layout and size panel.
  2. Pick a Layout: List left, List right, List below or Map only.
  3. Set Map height (px), from 240 to 900.
  4. For a bigger map, choose Wide width or Full width in the block toolbar.
The Layout and size panel with List below chosen under Layout and Map height set to 420
Steps 2 and 3 in the Layout and size panel.

What visitors see

  • List left and List right: the list sits next to the map and scrolls within the mapโ€™s height.
  • List below: the stores sit under the map as cards side by side.
  • Map only: only the map shows, and a click on a marker shows the store in a popup. The list stays in the page for search engines and for visitors without JavaScript.
A store locator with the map on top and the stores as cards in rows under it
List below: the stores as cards under the map.

Good to know

  • On a phone, or when the block is narrower than 600 px (for example in a sidebar column), the map is always above the list.
  • The map is never taller than 70% of the screen, so phones can still scroll the page.
  • The mouse wheel scrolls the page past the map. It zooms the map only after the visitor clicks on it.

Watch this part of the video tutorial

See the map-only demo

Still stuck? How can we help? Get Help