Docs
Sections

Map section

The Map section shows a Google map of your store address in Split with your address and opening hours. It needs a Google Maps API key.

Applies to: Split 5.1.0 and later. Added in: Split 1.0.0. Last checked: 2026-10-13 against Split 5.1.0.

The Map section shows a Google map of your store address across the full width of the page, with a box that holds your store name, address and opening hours. The map needs a Google Maps API key, which you create in the Google Cloud console.

Where to find it: select Add section in the theme editor, then choose Map.

Setting up the Google Maps API key

Split loads two Google APIs for the map: the Maps JavaScript API, which draws the map, and the Geocoding API, which turns your address into a point on the map. Your key must allow both. The Google Cloud console is owned by Google and its labels change; the steps below follow the console in 2026.

Create a Google Cloud project

Open the Google Cloud console at console.cloud.google.com and sign in with a Google account. Create a new project, for example "Store map".

Set up billing for the project

Google requires a billing account on every project that uses Google Maps Platform. Follow Google's Set up your Google Cloud project guide. Google sets the prices, not Krown.

Enable the two APIs

Open APIs & Services → Library. Search for Maps JavaScript API and select Enable. Do the same for Geocoding API.

Create the API key

Open APIs & Services → Credentials, select Create credentials and choose API key. Copy the key.

Restrict the key to your store

Open the new key. Under Application restrictions, choose Websites and add every domain your store uses, including the .myshopify.com one, for example yourdomain.com/*, www.yourdomain.com/* and yourstore.myshopify.com/*. Under API restrictions, select Restrict key and choose the two APIs. Save.

Paste the key in the theme

In the theme editor, select the Map section and paste the key into Google Maps API key. Type your address in Map address, then select Save.

The key is visible in your store's page code, as for every Google map on a website. Always restrict it to your domains, so nobody else can use it on their site.

Each Map section has its own Google Maps API key field; there is no key in Theme settings. The Contact Form section has a separate map with its own key field: paste the same key there. Google's Use API keys page explains the console in detail.

Video: generating the API key

The video walks through the same steps: creating a project, enabling the Maps JavaScript API and the Geocoding API, creating the key and restricting it to your domains. It was recorded with an older version of the Google Cloud console, so the screens and button names look different today.

Address, style and pin

  • Title and Address and hours fill the box over the map. On screens wider than 1024 px the box sits at the bottom right of the map; on phones and on tablets held upright it moves under the map, which is then half the screen tall.
  • Map address is the address Google looks up. Write it the way you would in Google Maps, with street, city and country.
  • Image shows instead of the map while Google Maps API key or Map address is empty.
  • Map style: Light (default) shows a light grey map, Dark a black one. Both hide Google's shop and place icons.
  • Map custom pin replaces the default pin. Upload a 240 x 240 px transparent PNG; it is shown at 60 x 60 px.
  • Heading tag under SEO sets the HTML level of the title (H3 by default).

Customers who click the pin see the map address with an "Open in Google Maps" link. The zoom level is fixed; customers zoom with the + and − buttons, not with the mouse wheel.

Why does my map not show?

Usually because the key or the address is missing or wrong. What you see tells you which:

  • The Image shows instead of the map: Google Maps API key or Map address is empty. Fill in both.
  • A grey map with a Google error message: Google refused the key. The key is mistyped, one of the two APIs is not enabled, billing is not set up, or the domain you are on is missing from the key's Websites list. Split cannot show the Image in this case, because Google draws the error.
  • A map of open water with no pin: Google could not find Map address. Split shows the map with no message. Write the full address with city and country and save again.

Can I show several store locations?

Not on one map. Split shows one address per Map section. Add one Map section per location, with the same key in each.

Can I change the zoom level?

No. Split does not have a zoom setting; the map always opens at the same street-level zoom around your address. Customers can zoom in and out with the buttons on the map.

All Map settings

Every setting in this group, with its type and default.

Images with text

The Images with text section shows up to 4 images side by side in Split, each with tagline, title, link and button, half or full screen height.

Rich text

The Rich text section shows a title, text and buttons next to a background image in Split, with the image on the left or right half.

On this page

Setting up the Google Maps API keyVideo: generating the API keyAddress, style and pinWhy does my map not show?Can I show several store locations?Can I change the zoom level?All Map settingsRelated pages