Custom HTML and js files within checkout extensibility

Shopify Apps

Topic summary

Main topic: Adapting an existing app to Shopify’s Checkout Extensibility and whether custom HTML/JS can be used on the order status and thank you pages to replicate left-side buttons.

Latest updates (from Shopify guidance shared by OP):

  • Background alignment: Use the View component’s background property (e.g., background=“base”) so boxes match the checkout’s branded background.
  • Modal width issue: Reproduced internally; likely caused by wrapping Modal content in a Grid layout, which constrains width.
  • Radio indication: The ChoiceList component includes the current selection state as per official docs.

Notes on terms:

  • Checkout UI Extensions: Shopify’s framework for extending checkout via predefined components.
  • View/Modal/Grid: Layout and container components affecting styling and sizing.
  • ChoiceList: Form component for radios/choices with built-in selection indication.

Status and open questions:

  • Practical UI guidance provided; issues have suggested fixes.
  • The core question about permitting custom HTML/JS on order status/thank you pages was not directly answered and remains unresolved.

Suggested next steps:

  • Apply View background settings, refactor Modal layout (avoid Grid if causing width issues), and follow ChoiceList specs.
  • Seek explicit confirmation on custom HTML/JS support for those pages.
Summarized with AI on January 2. AI used: gpt-5.
1

We’re currently adapting our existing app to offer compatibility for checkout extensibility. Is it possible to use custom html and js files for the order status and thank you pages within checkout extensibility? Our app provides a couple different buttons on the left side of the original order status page and so we are trying to replicate that functionality for our Shopify Plus users.

2

Hi @MrDiou did you resolve this?

3

Here’s the reply that I got from Shopify that were answers to some of our questions that may or may not be directly relevant for you:

  1. The boxes on the checkout order page need to be aligned with the background.
  • For the background color, if you are using a View to create those boxes around its extension, you can use the background property to adjust the color of the view, and keeping in mind that it will follow the merchants branding if applied, in that case they believe it will follow the white background if background=“base”
  1. Adjust the width of the text modals.
  • Our internal team tried to reproduce the width issue which gave the same result, and it could be that you wrapped your modal within a grid.
<Button overlay={ <Modal padding> <Grid columns={["auto"]} inlineAlignment="center"> <Heading>Your gift message:</Heading> <TextField multiline label="Note" /> <Button>Save</Button> <Button kind="plain">Cancel</Button> </Grid> </Modal> } > Open modal </Button>
  1. The radio button lacks an indication.
  • You can refer to ChoiceList docs that show what the radio is supposed to look like, and it includes the current selection.