Simple Small Location Map in Footer

Store Design
1

In the bottom of our website where our address is located in the footer, I want to place a simple small Google map that can be clicked to open Google maps and potential showroom visitors can get directions, street view etc.
It should be simple, with basic html/css, but any time I throw something in there below the address, the whole footer becomes a wonky mess.
I’ve tried apps, but I just have one showroom, one location, one small linkable map. No need to take over an entire page for this.
Any suggestions or advice on the proper CSS/HTML for this?

2

Hi @Winfield,

Please send me the HTML code of Google map, I will check and guide you

3

well @Winfield The easiest method that worked for me was embedding a Google Maps iframe directly into the footer .liquid file. Just head to Google Maps, search your store’s location, click “Share” → “Embed a map,” then copy the HTML iframe code. In Shopify, go to Online Store > Themes > Edit Code, open the footer.liquid file, and paste the iframe where you want the map to show.If you want extra guidance, Shopify’s official help doc on editing theme code is super useful:
https://help.shopify.com/en/manual/online-store/themes/os/customize/edit

4

Hi @Winfield ,

I am from Mageplaza - Shopify solution expert.

To add a simple location map to the footer in Shopify, you can do it in a few different ways. Here’s the simplest method using an embedded Google Map in footer.liquid:

Step 1: Get the embed code from Google Maps

  1. Go to: Google Maps
  2. Search for your store address.
  3. Click the Share button → then go to the Embed a map tab.
  4. Copy the provided iframe code.

Step 2: Paste the code into your Shopify footer

  1. Go to your Shopify Admin → Online Store → Themes → click Edit code.
  2. Locate the footer.liquid file under the sections or layout folder.
    (Depending on the theme, it could be sections/footer.liquid or layout/theme.liquid)
  3. Paste the iframe code where you want the map to appear — for example, right before the tag.
<div style="width: 100%; max-width: 300px; margin-top: 20px;">
  <iframe
    src="https://www.google.com/maps/embed?pb=..." 
    width="100%" 
    height="200" 
    style="border:0;" 
    allowfullscreen="" 
    loading="lazy" 
    referrerpolicy="no-referrer-when-downgrade">
  </iframe>
</div>

Result:

2025-07-30_17-05
2025-07-30_17-051636×903 100 KB

If you want the map to appear exactly where you’d like, feel free to send me your footer.liquid code.
I’ll take a look and let you know the best place to insert the iframe.

Best regards

5

You guys are the best! Thank you for all the help.