Is there a way of having Interactive Map for free? Dawn and Spark Theme

Topic summary

A merchant asked how to add an interactive Google Map to their Contact Us page for both Spark and Dawn themes, currently only having a static screenshot.

Solution Provided:

  • Use Google Maps’ embed code as a “custom liquid” section in the page template
  • The map defaults to left-aligned, but positioning can be adjusted via CSS (justify-content and align-items properties)
  • Tools like ChatGPT can assist with CSS customization
  • Note: Template changes affect all pages using that template, so a new template may be needed for specific pages

Implementation:
The merchant successfully added the map by pasting the embed code directly into the page’s HTML, resulting in a centered, wide-screen map display.

Open Question:
Another user asked whether a Google Maps API key is required, referencing a Shopify Help article suggesting it’s only necessary for vintage themes. This question remains unanswered in the thread.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.

Hey there @LSAccounting

You absolutely can! You can use the embed code option as a “custom liquid” section on the page template. It will set to left justified by default, but if you want to manage the position of the map, you can use this base code below and adjust the CSS for “justify-content” and “align-items” to the preferred position (left/right/center). You can also use a free tool like ChatGPT to help you with these kinds of CSS customizations.

Remember that altering page templates will affect all pages using the same template, so you may need to make a new page template for certain pages. Let me know if you need additional help with that. Our live chat support would be happy to help with this too.


  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.991441025277!2d2.2919063758503166!3d48.85837360070855!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e2964e34e2d%3A0x8ddca9ee380ef7e0!2sEiffel%20Tower!5e0!3m2!1sen!2sca!4v1692111864170!5m2!1sen!2sca" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

1 Like