How to Add Google Maps to Shopify

Today we’ll be showing you how to embed a Google Maps on your Shopify page.

If you have watched our videos in the past, you probably own a business or are building a Shopify store. If you decide that you would like to have your store taken off your hands so you can actually focus on the business, then check out our Sales Accelerator Program. This program uses online advertising to increase your sales on your site. 

Now, let’s get into it!

The first thing that we want to do is make sure that we actually have a contact page. So you want to go to online store on the left hand side under Sales Channels and then go to pages.

Once in there, for this example, you can see that there are no pages. 

So we are going to click on add page. 

On the next page you will set up what you want the page to be. For this, we want a contact page. In the title field you will want to call this the Contact Us page. 

Next, on the right side of the page, you will see a box called Template. Within that box, where it says Template suffix, depending on the template that you have installed, you should see one that says page.contact. That is the one that we want. They usually have a contact form already as part of that page.  

Next you’ll go to the Content box and you can type in something that your customers will see when they go to the Contact Us page. For this, we’ll say We Respond Within 24 hours, etc etc. This can be anything that you want to include in there for the customer.

Embedding Google Maps

Next, you will want to embed your Google Maps. So what you want to do is head over to Google Maps.

For this, we are going to use our address. Once you have the listing on the left hand side, what you want to do is click on share in the bottom right corner. 

At the top of the next page, you will want to click on Embed A Map. 

This will then give you the option to do different sizes, including custom sizes to match it perfectly onto your store. We are going to go ahead with medium and then copy the HTML. 

We will then go back to our store and in the upper right corner of the Content box, you will see a button that looks like this: <>. If you hover over that, it will say Show HTML. You will want to click that. This will allow us to create or paste actual HTML.

Once you paste that in there, you will click the Show HTML button again and you should see a preview right here listed which is what we want. 

After that you will want to click on Save in the upper right hand corner of the screen. 

‍

Reviewing Embedded Map

‍

Once you save it, you will want to click on View page under Contact Us at the top of the page to see how that’s looking. 

There you have it, we have our paragraph in here and then our Google Maps embedded and then the contact form at the bottom of the page. 

Now, if I would have not clicked on the page.content in the template box, I would have not had this form right here where people could actually send us messages. And that’s it! There’s the Google Maps embed in our contact page.

That’s it for this tutorial. Thank you for checking us out. If you would like to watch our How To video on this subject, you can watch it here. Also, make sure to like the video as well as like and subscribe to our YouTube Channel and hit the bell so that you don't miss out on any of the content we put out every single week.  

If you’re interested in a streamlined approach to product sales then contact us for our Sales Accelerator program here.