← GuidesShopify

How to Embed Google Maps in Shopify

Add an interactive Google Map to your Shopify store's contact page, product pages, or theme sections — free and no API key needed.

Contents

  1. Step 1 – Generate your embed code
  2. Step 2 – Add the map to a Shopify page
  3. Step 3 – Add the map to your theme (Online Store Editor)
  4. Embed a map on a product page
  5. Tips and troubleshooting

Step 1 – Generate your Google Maps embed code

  1. Visit the Map Embed Code generator.
  2. Search for your store address or enter its latitude/longitude coordinates.
  3. Select your desired zoom level and map type.
  4. Choose Full Width (100%) and keep Responsive mode enabled for best results on mobile.
  5. Click Copy Code to copy the iframe HTML.

Step 2 – Add the map to a Shopify page (e.g. Contact page)

  1. In your Shopify admin, go to Online Store → Pages.
  2. Open (or create) the page where you want to add the map, such as your Contact page.
  3. In the page editor, click the <> (Show HTML) button in the toolbar.
  4. Paste the copied iframe code at the position where you want the map to appear.
  5. Click Save.
Important: Always switch to the HTML source view before pasting the iframe code. If you paste in the visual editor, Shopify may strip the iframe tag for security reasons.

Step 3 – Add the map via the Online Store Editor (Theme Customizer)

Some Shopify themes include a built-in "Custom HTML" or "Custom Content" section that you can add via the theme editor.

  1. Go to Online Store → Themes and click Customize.
  2. Navigate to the page where you want to add the map (e.g., your homepage or contact page).
  3. Click Add section and look for a Custom HTML, Rich text, or Embed section.
  4. If your theme has a Custom HTML section, add it and paste your iframe code.
  5. Click Save.

Note: Available sections vary by theme. If your theme doesn't have a Custom HTML section, use the Page HTML method in Step 2 or consider adding a custom section to your theme's Liquid code.

Embed a Google Map on a Shopify product page

To add a map to a product description:

  1. Go to Products in your Shopify admin.
  2. Open the product you want to edit.
  3. In the product description editor, click the <> (Show HTML) icon.
  4. Scroll to where you want the map and paste the iframe code.
  5. Click Save.

This is useful for products tied to a physical pickup location or appointment-based services.

Tips and troubleshooting

  • Map not showing? Shopify's editor occasionally strips iframe elements for security. If this happens, the map won't appear in preview — but saving and visiting the live page should display it correctly.
  • Responsive map recommended: Responsive mode is enabled by default. Keep it enabled so the map adapts to mobile storefronts.
  • Wrong zoom level? Zoom levels 14–16 work best for a single business location. Use the zoom slider in the generator to fine-tune.
  • Store not found by address? Use Coordinate mode and enter the exact latitude/longitude for pinpoint accuracy.

Generate your map embed code

Free, instant, no API key required.

Open the Generator