Hey there, I’m working on Shopify Customer Account UI Extensions and I’m stuck on an issue. Hoping someone here can help clarify things.
Placement doesn’t seem to work (when testing)
I am trying to use default_placement property to manually place components in different locations in the page layout, but it is not working. According to the docs here:
“To test this, you can add the `?placement-reference=PROFILE1` query parameter to the URL…”
I tried that, but it didn’t help either, the extension still renders before the heading. The docs also mention:
“…blocks are placed in the first available placement reference by default.”
And that placement is usually set via the checkout editor in production. But then in this doc:
implies we can set placement via code.
I have two different components (each within it’s own extension), targeting the same page/layout/block, that I want to place in two different locations, the first shopify.extension.toml :
[[extensions.targeting]]
module = "./src/components/ProfilePointsDescription.tsx"
target = "customer-account.profile.block.render"
default_placement = "PROFILE1"
and the second shopify.extension.toml :
[[extensions.targeting]]
module = "./src/components/ProfilePointsHistory.tsx"
target = "customer-account.profile.block.render"
default_placement = "PROFILE2"
Neither seem to work.
What I’m trying to do
I just want to render two different components on the same profile page, in two different locations (e.g., PROFILE1 and PROFILE2), set via code/config, exactly like what’s shown in this image from the Shopify docs:
Any guidance or examples would be super helpful. Thanks!