Checkout UI Extension Overlaying Div Content

Shopify Apps

Topic summary

A developer is building a custom Checkout UI extension for address recommendations as an alternative to Google Address Search. The client’s address system makes Shopify’s autocomplete endpoint impractical due to cost concerns.

Core Issue:
The results panel pushes down other page elements instead of overlaying them (see attached screenshots). The developer is currently using a BlockLayout element as a wrapper.

Proposed Solution:
Another user suggests implementing a BlockLayout with specific row configurations:

  • Set rows to ['auto', 1]
  • First row (text input) adjusts to content size
  • Second row (search results) should be small enough to create overflow

This approach should make the auto-search modal overflow and overlay other content as expected.

Additional Considerations:

  • A modal component may not be appropriate since results should appear next to the search field
  • Shopify might be preventing this overlay behavior
  • Experimenting with Modal or Popover components is recommended if the layout approach doesn’t work
Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’m creating a Checkout UI extension for a client that makes address recommendations to replace the built in Google Address Search. I’m aware there is the new autocomplete endpoint but the way the address system the client is using work, I can’t use this approach (or can but it would make it much more expensive).

The issue I have is that I’ve created the search box and results panel, but I can’t get the results panel to overlay the other elements on the page. Instead it pushes them down like this:

Screen Shot 2024-05-17 at 4.05.26 pm.png
Screen Shot 2024-05-17 at 4.05.26 pm.png578×493 31.5 KB

The question I have is is there a way to make that results div overlay other items on the page relative to another item (the search box)?

Or, is there a component I’ve missed that solves that problem? Ideally it should be positioned next to the search field, so a modal is not appropriate.

This is the wrapping element, I’m just using a BlockLayout element for it.

Screen Shot 2024-05-17 at 5.18.05 pm.png
Screen Shot 2024-05-17 at 5.18.05 pm.png305×162 7.3 KB

Ideally I want to recreate what already exists if possible.

Thanks for any pointers.

2

Hey @Gregles ,

You might want to try something like this:

const blockLayout = root.createComponent(
BlockLayout,
{
rows: ['auto', 1],
},
[
root.createComponent( /* Your text input */ ),
root.createComponent( /* Your auto-search modal */ ),
],
);
root.appendChild(blockLayout);

The first row should adjust it’s size to the search bar and the other should be small enough to make the auto-search modal overflow - which should result in what you’re expecting. However, Shopify might be preventing this behaviour. If you find out that is the case, I recommend experimenting with the Modal / Popover components.

Hope this helps :]