App reviews, troubleshooting, and recommendations
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hi everybody,
I want to add a simple HTML code into customer's profile page, so I tried to created a customer account UI extension following https://shopify.dev/docs/apps/build/customer-accounts/start-building and https://shopify.dev/docs/apps/build/customer-accounts/inline-extensions/build-profile?extension=reac... . According to these articles, I tried to render a React component into "customer-account.profile.block.render" target, but when I installed it into my test site, my custom React extension isn't rendered as expected.
Here is the content of my "shopify.extension.toml" file in "extensions/customer-account-ui-2/shopify.extension.toml"
api_version = "unstable"
[[extensions]]
name = "customer-account-ui-2"
handle = "customer-account-ui-2"
type = "ui_extension"
[[extensions.targeting]]
module = "./src/ProfileExtension2.tsx"
target = "customer-account.profile.block.render"
[extensions.capabilities]
api_access = true
And here is my "ProfileExtension2" React component under "extensions/customer-account-ui-2/src/ProfileExtension2.tsx"
import {
reactExtension,
Text,
} from '@shopify/ui-extensions-react/customer-account';
export default reactExtension(
'customer-account.profile.addresses.render-after',
() => <Extension />,
);
function Extension() {
console.log('Hello from: "customer-account.profile.addresses.render-after"!');
return <Text>I am a company details extension</Text>;
}
I also try to run a console log but when I access https://shopify.com/xxx/account page, there is nothing in the browser's console as well.
Am I missed something?
Yes, You missed something