Hey there, I’m working on Shopify Customer Account UI Extensions and I’m stuck on two issues. Hoping someone here can help clarify things.
1. Multiple components on the same target
I’m trying to render two separate components at different positions on the same profile page. Here’s an excerpt from my shopify.extension.toml file:
[[extensions.targeting]]
module = "./src/components/ProfilePointsDescription.tsx"
target = "customer-account.profile.block.render"
default_placement = "PROFILE1"
[[extensions.targeting]]
module = "./src/components/ProfilePointsHistory.tsx"
target = "customer-account.profile.block.render"
default_placement = "PROFILE2"
When I try to add both targets, I get this error:
Duplicate targets found: customer-account.profile.block.render
Extension point targets must be unique
Is it not possible to have two modules render at different placements on the same page using the same extension point? If not, what’s the correct way to do this?
2. Placement doesn’t seem to work when testing
Even with just one module, trying to use default_placement = "PROFILE1" doesn’t place it correctly. 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, 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.
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!