Google Map Embed

Store Design
1

Hi,
I’m trying to add Google maps of my store at the bottom of my page. I created a custom liquid session for that. I pasted the google map embed html there. But once I save it the entire alignment of my website is changing. I want the map section in such way that it is fit to the page. Can some one please help me with this?

1 Like
2

Hi @MRJJEWELLERSB ,

Can you provide me link to your store? And also the code you added on the custom liquid section. I will review the code and provide the solution accordingly.

3

This is a common issue when embedding Google Maps directly. The iframe can sometimes disrupt your layout if it’s not properly contained.

For a cleaner solution that automatically handles responsive sizing (and avoids layout breaks), you might want to check out IzyMaps. It’s a simple app I built specifically for Shopify stores to add perfectly fitted maps without coding.

That said, if you prefer the manual approach, you could try wrapping your iframe in a div with fixed dimensions and overflow control. For example:


  <iframe ...your-map-code...="" style="width: 100%; height: 100%"></iframe>

Full disclosure: I’m the developer behind IzyMaps, but happy to help with either approach!

1 Like