Problems adapting to Checkout Extensibility

Retired Boards Appdev Extensions
1

We’re building an extension for our app to support checkout extensibility for our Shopify Plus users that have made the jump and are encountering some limitations on what can be done (e.g. customizing modals). Can anyone offer some guidance on the topic?

Our app Relocate+ Address Editor lets customers update their shipping address for unfulfilled orders. It feels like checkout extensibility isn’t quite ready to support everything we have for our original app. Here are a couple things we’re struggling with:

  • Radio buttons don’t fill in within a modal.
  • Modal width can’t be changed.
  • Text field width can’t be changed.
  • Can’t redirect or reload page from the extension.
    Basically, customizing the modals and reloading the page after an action is completed is what we need.

Here’s a quick view of what we’re encountering. https://www.loom.com/share/0532b7ba146e435e970eb4151fae3ff1?sid=3fc631aa-4501-46bb-ae18-0430bbaac571

1 Like
2

Hi MrDiou,

Thanks for sharing the loom video - that’s super helpful to see what issues you’re encountering. I’ve connected with the product team that are working on checkout extensions to see what advice they have for improving this experience. Will update asap!

3

does Shopify have any intent on releasing a basic checkout app? just looking over the forums, there is quite a bit of items that are desired from the community.

1 Like
4

I’m dealing with a similar issue and noticed this thread. It’s been a couple of months since the last update. Is there any new information or advice from the product team on this issue?

5

I’ve had a few different communications with the support team and have received some guidance that may or may not be useful to you.

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”

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>

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.

Refreshing the page

The response from Shopify was basically that this isn’t possible and they were surprised by the request. Our workaround was to have a continue/confirm button that simply linked to that same page so when it was clicked it essentially reloaded the page.

6

Thank you so much for your detailed response.

I’m really trying to make the modal narrower. I wasn’t able to understand from your answer if this is possible and how to do it.