How can I add Google Maps to the Dawn theme?

Store Design
, ,

Topic summary

A user seeks to embed a Google Map on their Dawn theme homepage or contact page. A tutorial video for another theme didn’t work for Dawn.

Solution provided:

  • Get the embed code from Google Maps (Share → Embed a map → Copy HTML)
  • Edit theme.liquid file in the theme code editor
  • Paste the iframe code before </main> tag, wrapped in Liquid conditional logic:
    {% if template contains 'index' or template contains 'contact' %}
  <iframe src="..."></iframe>
{% endif %}
  • Adjust dimensions: set width="100%" and increase height value for better display

Additional questions addressed:

  • Centering the map: Not fully resolved; users requested CSS guidance
  • Positioning: To place at bottom (above footer), code placement in theme.liquid matters
  • Page-specific display: Modify the conditional statement to target specific pages (e.g., {% if template contains 'contact' %} for contact page only)

The original poster confirmed the solution works after adjusting width to 100%. An alternative app-based solution (IzyMaps) was also mentioned for users preferring a no-code approach.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
4

Hello @kirkcanada

You can change width and height in Iframe to suit your needs:

  • width=“100%”

  • height =“600” (Or maybe even bigger)

GemPages_0-1669966099654.png
GemPages_0-1669966099654.png725×229 24 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

1 Like