{"id":8065,"date":"2025-02-19T21:00:00","date_gmt":"2025-02-19T21:00:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=8065"},"modified":"2025-10-03T15:48:56","modified_gmt":"2025-10-03T10:18:56","slug":"how-to-add-google-maps-to-shopify","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/how-to-add-google-maps-to-shopify\/","title":{"rendered":"How to Add Google Maps to Shopify? [Step-by-step Guide]"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Providing clear direction of your business location on your Shopify store helps shoppers to reach your offline without getting lost in the woods.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Shopify Google Maps is one of the most accurate ways for your shoppers to find you. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"531\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Google-maps-in-your-Shopify-store--700x531.png\" alt=\"Google maps in your Shopify store\" class=\"wp-image-8067\" style=\"width:559px;height:auto\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Google-maps-in-your-Shopify-store--700x531.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Google-maps-in-your-Shopify-store--250x190.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Google-maps-in-your-Shopify-store--768x583.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Google-maps-in-your-Shopify-store--403x306.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Google-maps-in-your-Shopify-store--964x732.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Google-maps-in-your-Shopify-store--120x91.png 120w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Google-maps-in-your-Shopify-store-.png 1236w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Why Add Google Maps to Your Store?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When you are working both online and offline, Google Maps makes it easier to grab footfalls in your offline store and especially helps with improving your<a href=\"https:\/\/meetanshi.com\/blog\/guide-to-local-seo\/\" target=\"_blank\" rel=\"noreferrer noopener\"> local SEO<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here are some key benefits of embedding Google Maps in your store:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Boost brand awareness among local shoppers or tourist<\/li>\n\n\n\n<li>Improve customer trust by displaying a genuine physical presence<\/li>\n\n\n\n<li>Build a professional brand image with all the accurate information&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Adding Google Maps is a direct process which can done either <a href=\"https:\/\/meetanshi.com\/blog\/best-shopify-apps-for-google-maps\/\">Shopify app for Google Maps<\/a> or embedding Google Maps in the code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Follow the below steps to embed Google Maps into your store easily.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Steps to Embed Google Maps on Shopify<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Retrieve the Embed Code from Google Maps<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Go to <a href=\"https:\/\/www.google.com\/maps\" target=\"_blank\" rel=\"noopener\">Google Maps<\/a> and search for your business or location to embed in the store. From the business profile page, click share and <strong>copy the embed HTML code<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"381\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Copy-Google-Maps-HTML-code-700x381.png\" alt=\"Copy Google Maps HTML code\" class=\"wp-image-8069\" style=\"width:582px;height:auto\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Copy-Google-Maps-HTML-code-700x381.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Copy-Google-Maps-HTML-code-250x136.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Copy-Google-Maps-HTML-code-768x418.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Copy-Google-Maps-HTML-code-403x219.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Copy-Google-Maps-HTML-code-964x524.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Copy-Google-Maps-HTML-code-120x65.png 120w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Copy-Google-Maps-HTML-code.png 1327w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 2: Navigate to Shopify Theme Editor<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now, log in to your Shopify Admin panel. Go to <strong>Online Store&gt; Themes &gt; Customize.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"90\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Navigate-to-customize-700x90.png\" alt=\"Navigate to customize\" class=\"wp-image-8071\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Navigate-to-customize-700x90.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Navigate-to-customize-250x32.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Navigate-to-customize-768x99.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Navigate-to-customize-403x52.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Navigate-to-customize-120x16.png 120w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Navigate-to-customize.png 929w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 3: Add HTML Embed Code of Google Maps<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Then, navigate to the page where you want to add Google Maps from in the <strong>theme editor. <\/strong>There, click on<strong> <\/strong>the <strong>+ add section <\/strong>and select <strong>custom liquid code.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"590\" height=\"879\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Head-to-custom-liquid.png\" alt=\"Head to custom liquid\" class=\"wp-image-8075\" style=\"width:446px;height:auto\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Head-to-custom-liquid.png 590w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Head-to-custom-liquid-250x372.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Head-to-custom-liquid-403x600.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Head-to-custom-liquid-120x179.png 120w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Paste the copied Google Map embed code into the <strong>Liquid Code<\/strong> field.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From here, you can also edit the height and width attributes in the code to change the size of Google Maps. For, e.g., Set width=100% to display a full-width map.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"367\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Paste-your-HTML-code--700x367.png\" alt=\"Paste your HTML code\" class=\"wp-image-8073\" style=\"width:666px;height:auto\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Paste-your-HTML-code--700x367.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Paste-your-HTML-code--250x131.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Paste-your-HTML-code--768x402.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Paste-your-HTML-code--1536x805.png 1536w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Paste-your-HTML-code--403x211.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Paste-your-HTML-code--964x505.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Paste-your-HTML-code--120x63.png 120w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Paste-your-HTML-code-.png 1586w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">At last, click the <strong>Save <\/strong>button, and your map will appear on the desired page.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"531\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Google-maps-in-your-Shopify-store--700x531.png\" alt=\"Google maps in your Shopify store\" class=\"wp-image-8067\" style=\"width:513px;height:auto\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Google-maps-in-your-Shopify-store--700x531.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Google-maps-in-your-Shopify-store--250x190.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Google-maps-in-your-Shopify-store--768x583.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Google-maps-in-your-Shopify-store--403x306.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Google-maps-in-your-Shopify-store--964x732.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Google-maps-in-your-Shopify-store--120x91.png 120w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/Google-maps-in-your-Shopify-store-.png 1236w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">That&#8217;s all in just 3 steps Google Maps is embedded in your Shopify store. \ud83c\udf89<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions&nbsp;<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">How to Display Google Maps Only on Certain Pages in Shopify?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Navigate to the particular page&#8217;s theme editor, add a new section, and paste the copied Google Maps embed code into the <strong>Liquid field<\/strong>. Click save to make the changes live.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Do I Need a Google Maps API Key for Shopify?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You will need a Google API key if you prefer a custom Google Maps integration. If you follow an Embedded Google Maps method, no API is required.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Can I Change the Width of Google Maps on the Shopify Page?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes, you can change the height and width of the Google Maps on the Shopify page. From the liquid field, where you have added the \u201cEmbed HTML\u201d code &#8211; you can edit the height and width attributes in the code to change the size of Google Maps.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, try this solution yourself and easily show Google Maps on your desired Shopify pages.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [\n    {\n      \"@type\": \"Question\",\n      \"name\": \"How to Display Google Maps Only on Certain Pages in Shopify?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Navigate to the particular page\u2019s theme editor, add a new section, and paste the copied Google Maps embed code into the Liquid field. Click save to make the changes live.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Do I Need a Google Maps API Key for Shopify?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"You will need a Google API key if you prefer a custom Google Maps integration. If you follow an Embedded Google Maps method, no API is required.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Can I Change the Width of Google Maps on the Shopify Page?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Yes, you can change the height and width of the Google Maps on the Shopify page. From the liquid field where you have added the \u201cEmbed HTML\u201d code, you can edit the height and width attributes in the code to change the size of Google Maps.\"\n      }\n    }\n  ]\n}\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Providing clear direction of your business location on your Shopify store helps shoppers to reach your offline without getting lost in the woods.&nbsp; Shopify Google&#8230;<\/p>\n","protected":false},"author":5,"featured_media":8078,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[787],"tags":[],"class_list":["post-8065","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shopify"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/8065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=8065"}],"version-history":[{"count":5,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/8065\/revisions"}],"predecessor-version":[{"id":23161,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/8065\/revisions\/23161"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media\/8078"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=8065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=8065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=8065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}