Can't get custom APP to render in Customer Account portal

Extensions
1

Hello all

Just wondered if anyone has a git repo they could share or any pointers to give so that I can review what I am doing wrong. The Worker can be called but for whatever reason I cannot get the page to render no matter what I do. I have narrowed down the issue to being a shopify render issue so I don’t know if I am calling the wrong Target or what. I’ve lost my mind with this

1 Like
2

Hey there!

I’ll share a few pointers with you, and hopefully they help :slight_smile:

  1. Make sure your shopify.extension.toml file correctly references the extension target e.g.
[[extensions.targeting]]
module = "./src/OrderStatusBlock.tsx"
target = "customer-account.order-status.block.render"
  1. Make that your extension references the target: e.g.
import {
  BlockStack,
  reactExtension,
  TextBlock,
  Banner,
  useApi
} from "@shopify/ui-extensions-react/customer-account";

export default reactExtension(
  "customer-account.order-status.block.render",
  () => <PromotionBanner />
);

function PromotionBanner() {
  const { i18n } = useApi();

  return (
    <Banner>
      <BlockStack inlineAlignment="center" >
        <TextBlock>
          {i18n.translate("earnPoints")}
        </TextBlock>
      </BlockStack>
    </Banner>
  );
}
  1. When you preview your app, make sure you have it added via the Checkout Profile editor or you have clicked on the preview link in the Developer Console.

I run a lot of tests in my apps, so sometimes I accidentally break my app. When this happens what I usually do is create a new app with any extensions, and compare my app project with the new app project :grin:

Hopefully that helps, let me know if you have any questions!