How can I target the ORDER_SUMMARY4 location in checkout UI extension?

Shopify Apps

Topic summary

Developers are struggling to programmatically place checkout UI extensions at the ORDER_SUMMARY4 location in Shopify, rather than the default ORDER_SUMMARY1 position.

Initial Problem:

  • Extensions can be rendered using purchase.checkout.block.render target
  • Adding ?placement-reference=ORDER_SUMMARY4 to the URL works locally during testing
  • No clear method exists to set this placement in production automatically

Proposed Solutions:

Manual Approach (Confirmed Working):

  • After installing the extension, it defaults to ORDER_SUMMARY1
  • Merchants must manually drag the extension icon to ORDER_SUMMARY4 in the Checkout Editor
  • This method requires user action rather than automatic placement

Configuration Approach (Unconfirmed):

  • Adding default_placement = "ORDER_SUMMARY4" parameter in the shopify.extension.toml file under [[extensions.targeting]]
  • One user reported this doesn’t work in their testing

Outstanding Issues:

  • Extension placement may shift incorrectly when users log in (appears at bottom instead of intended location)
  • No confirmed programmatic solution for automatic ORDER_SUMMARY4 placement
  • Documentation gaps noted regarding placement configuration
Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hey,

Im creating a checkout ui extension, and i see in the docs that i can render extension on a target called:
“purchase.chcekout.block.render [ORDER_SUMMARY4]”

but i only manage to render my blocks on the “purchase.chcekout.block.render” target and cant understand how to target the “[ORDER_SUMMARY4]” location.

i have managed to add the “?placement-reference=ORDER_SUMMARY4” to the url and while testing localy and it does put the target there, but how can I just make the target there on prod aswell, not only localy. From Here

I have seen apps that render extensions there without asking from the user to do any actions, the app straight up renders items on the [ORDER_SUMMARY4] target.

Please help :slightly_smiling_face:

3 Likes
2

Same issue here! Did you manage to find a solution?

1 Like
3

No, Thats crazy hahah.

Maybe @Liam could help us :slightly_smiling_face:

4

Hi @Harelk1015

I’ve founded the solution for this. You won’t believe how simple it is :grinning_face_with_smiling_eyes:

Firstly, as you know, after installing the extenstion into the store, it’ll be placed at the ORDER_SUMMARY1 position

emmadev_0-1720352019359.png
emmadev_0-1720352019359.png1418×1153 200 KB

To make it appear in the ORDER_SUMMARY4 position, you must drag the extension icon in the Checkout Editor

emmadev_1-1720352163573.png
emmadev_1-1720352163573.png484×1371 69.1 KB

Tada

emmadev_2-1720352185964.png
emmadev_2-1720352185964.png480×346 13.6 KB

It took me a ridiculous amount of time just to figure out something so simple. Shopify really needs better documentation

5

I have an add-on question. If you drag that ui-extension to “Contact” section, just as your first image shows. Does it still appears there at the right place after you logged in. In my case, it appears at the right location with “logout” mode. But it appears at the bottom of the page after user logged in.

6

Hello, have you found the solution to this case of rendering the checkout extension only at the right spot for logged out customers?

7

file: shopify.extension.toml

[[extensions.targeting]]

module = “./src/index.tsx”

target = “purchase.checkout.block.render”

default_placement = “ORDER_SUMMARY4”

1 Like
8

@mmarienko I did test this, but it doesn’t seems to be working. Do you know any other way to set default_placement?

My code -

[[extensions.targeting]]
module = "./src/Checkout.tsx"
target = "purchase.checkout.block.render"
default_placement = "ORDER_SUMMARY4"
1 Like