Conditional Checkout Blocks?

Wondering if there is a way to conditionally show/hide checkout extensions?

Theme app extensions have the available_if method - is there a similar equivalent for checkout extensions?

Thanks!

Can you elaborate the usecase?

Creating a custom UI extension with react you could use a simple conditional

  if (!VALUE || !TITLE) return;

  return (
    <Banner title={TITLE}>
      {VALUE}
    </Banner>
  );

UI extensions via Checkout Buddy/Blocks also give you conditional rules to show/hide.

1 Like

cheers @curzey !

Sorry to clarify - it would be conditionally showing this from the app block selection dropdown.

Eg:

1 Like

Ooh makes sense, so for the merchant using the app.

Not really sure. As far as I know this is not possible to handle conditionally. But I have not really tried either.

Because I’m curious; what kind of conditional would you want for this and why?

Only allowing specific blocks available per plan etc.

Oh that does make sense - sorry for not understanding. Interesting and very useful.

Not sure about the admin/customizer grouping or conditionally rendering; but you should be able to practically do this in the code rendering the block. Either check the Shopify plan of the shop, or check the app plan, via an app metafield or something.

Will follow to see if anyone with more knowledge on this topic solves it :eyes:

Hi Stuart,

I’m thinking creating this kind of a condition should be possible with a metafield - maybe @JordanFinners might have a suggestion?

2 Likes

I believe this example is a special exemption for Checkout Blocks as its now inside Shopify. Looking at the requirements for other Checkout UI extensions is all Shopify Plus Technologies for customizing Shopify checkout

In terms of dynamically showing extensions on the checkout configuration depending on what plan. I don’t believe it’s possible to change that page.

But I would see it as an upsell opportunity rather than hide them. Presumably the merchant will need to configure the extension in some way in your app before it works at checkout?

In which case this is where I would ask them to upgrade or warn about the plan not having access to this type of extension.
You can then always not render the extension at checkout, as curzey suggested, by checking some metafield configuration when loading the block including plan for example.

2 Likes

@Stuart_Chaney When you mention plans, do you mean app specific plans or shop plan (Plus vs non-Plus)? Would providing say a boolean metafield to show or hide the app block within the checkout editor app panel be sufficient?

FWIW, we don’t support this today so the only way to show/hide app blocks is by leveraging extension targets that are available to the plan type (in checkout vs thank you page) but we’re exploring what a solution could look like to enable this similar to the online store editor (available_if) and admin extensions (shouldRender)

1 Like