Customer Account UI - Add custom HTML

Extensions
1

Hi all,

We are building a customer account UI to embed our service inside the customer account UI.

Precisely, we want to have a simple page accessible from a tab the customer account (using customer-account.page.render) rendering an iframe with our app embedded.

We manage to create the component using JS (without typescript and without React, for some reason it did not work) but we can’t find a way to insert plain html (<iframe />) in the code.

Removing all the API fetching code, we want to do something like this:

import { extension } from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root, api) => {
  const iframe = root.createComponent('iframe', { src: 'https://example.com', border: '0xp' }); // Fails because `createComponent` does not accept 'iframe'

  root.appendChild(iframe);
});

We tried to create a component via document.createElement and document is undefined here.

How can we create an iframe here?

2

You cant. You have to build your business logic and UI using Polaris.

3

Its not necessarily Polaris, its the UI Components Shopify has available for Checkout/Accounts which uses the Polaris design system.

1 Like
4

Well true, thanks for elaborating