How to Add Google Maps to Shopify

How to Add Google Maps to Shopify

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

How to Add Google Maps to Shopify
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. 
Sales Accelerator

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.

online store

pages

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

no pages

So we are going to click on add page. 

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. 

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.  

page.contact

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.

Content box

Embedding Google Maps

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

Embedding 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. 

listing on the left hand side

share

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

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. 

custom sizes

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.

Show HTML

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. 

Show HTML button again

preview

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

Save

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. 

View page under Contact Us

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. 

contact form

BitBranding map

form

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. 

Latest Stories

This section doesn’t currently include any content. Add content to this section using the sidebar.