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?
Topic summary
A user is experiencing layout issues after embedding a Google Maps iframe into a custom liquid section on their Shopify store. The map is not fitting properly to the page width, causing alignment problems across the entire website.
Responses offered:
- One commenter requested the store link and the exact code used to provide a tailored solution.
- Another identified this as a common iframe embedding issue and suggested two approaches:
- Manual fix: Wrap the iframe in a container div with specific CSS (aspect-ratio padding hack and overflow hidden) to control responsive sizing
- App solution: Use IzyMaps, a Shopify app designed to handle map embedding without coding issues
Current status: The issue remains unresolved pending further information from the original poster. No code has been shared yet for review.
1 Like
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.
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