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

Gempages,

Sorry for the late response. I really do appreciate the time you took to explain this to me.

After changing the with to 100% I now have a response google map embedded.

This work brilliantly.

Thanks for being so smart!