Hide Google Maps in checkout extensibility

Topic summary

Users are trying to hide the Google Maps widget on Shopify’s checkout thank you page after migrating to checkout extensibility. Previously, this was achievable using additional checkout scripts with CSS display: none, but those scripts are now deprecated.

Attempted Solutions:

  • One user suggested CSS code targeting specific classes (_1fragem1y._1fragemlj) to hide the map while keeping child elements visible
  • This approach failed when added as a customer event pixel, generating errors and preventing saving
  • The CSS also didn’t work when added to checkout scripts or theme.liquid

Core Issue:
Beyond aesthetics, there’s a GDPR compliance concern: the Google Maps iframe loads automatically, creating unwanted connections to Google servers without user consent. Cookie banners don’t solve this since there’s no legitimate interest in showing customers their own location.

Current Status:
The discussion remains unresolved. Checkout scripts are deprecated, pixels run in sandboxed containers without DOM access, and available apps like ReConvert can only add content, not inject custom code. No working solution has been identified for either hiding the map or preventing the iframe from loading.

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

Hey guys,
in the past I was able to hide the Google Maps map on the checkout thank you page through an additional checkout script, where I wrote CSS “display: none” for the map.

Now we’ve upgraded to checkout extensibility and the additional checkout scripts are no longer available. I know, that we can add customer events for the checkout and I assume, that there should be the possibility to hide the map, but I wasn’t able to figure out the code.

Has anybody here already solved that, so that we can hide the map on the thank you page?

Best wishes from Germany, Niclas

1 Like

hi @LEVITATE-Agency

Please try this css code

._1fragem1y._1fragemlj {
    opacity: 0; /* Makes the parent element invisible */
    pointer-events: none; /* Disables interaction with the parent */
    position: relative;
}

._1fragem1y._1fragemlj > * {
    opacity: 1; /* Keeps the child elements visible */
    pointer-events: auto; /* Re-enables interaction with children */
    position: relative;
    z-index: 1; /* Ensures children are displayed above the parent */
}

If i managed to help then please like and accept this as solution. Thank you

Hello @Danish864 , thank you for the quick reply.

I’ve added a new customer event and inserted the code you provided, however it doesn’t let me save the pixel and shows an error for the first part of the code.

can you give me access to the store?

Thank you for the offer, but this a store of one of our clients, so I’m afraid I can’t just give out access…

Hi Niclas,

We’re facing the same issue, so I’m replying in hopes of getting an answer.

Not only do we want to not show the Google Map, we want to get rid of the whole iframe that contains the map. The goal is to not have a connection to Google servers, as we’re trying our best to make our Shopify shop truly GDPR compliant.

Show More

No, cookie-banners are not the solution - there is no legitimate interest in showing a map of the customer’s location, as the customer already knows their location and it is of no further use to them. Hence to be GDPR compliant with Shopify you’d need consent to show the Google Maps widget. That doesn’t help though, as there is no way to stop the Google Map from loading even if no consent is given.

Maybe someone else has found a solution to this issue? The css code from @Danish864 doesn’t seem to work for me, neither in checkout scripts nor in theme.liquid.

All the best from Switzerland,
Lucien

Checkout scripts are deprecated (thanks, Shopify! :angry: ) and what’s left is pixels that run in a container and don’t have DOM access and apps like ReConvert that AFAICS can only add content to the checkout and thank you pages but no code.