Block extension targets for one page checkout show at bottom of page

[Kristen_Z]

I am trying to have a header block appear below wallets and above all of the other checkout information. I believe the target should be "INFORMATION1" dynamic target https://shopify.dev/docs/apps/checkout/best-practices/testing-ui-extensions

When a user is logged out it shows correct

But when a user is logged in it shows all the way at the bottom of the page?

import {
  reactExtension,
  Banner,
  Heading,
  useSettings,
} from "@shopify/ui-extensions-react/checkout";

// Set the entry point for the extension
export default reactExtension("purchase.checkout.block.render", () => <App />);

function App() {
  // Use the merchant-defined settings to retrieve the extension's content
  const {viewtype, title: merchantTitle, description, collapsible, status: merchantStatus} = useSettings();

  // Set a default status for the banner if a merchant didn't configure the banner in the checkout editor
  const status = merchantStatus ?? 'info';
  const title = merchantTitle ?? 'Custom Banner';

  if(viewtype === 'Heading') {
    // Render the heading
    return (
      <Heading level="1" inlineAlignment="center">
        {title}
      </Heading>
    );
  } else {
    // Render the banner
    return (
      <Banner title={title} status={status} collapsible={collapsible}>
        {description}
      </Banner>
    );
  }

}

# Learn more about configuring your checkout UI extension:
# https://shopify.dev/api/checkout-extensions/checkout/configuration

# The version of APIs your extension will receive. Learn more:
# https://shopify.dev/docs/api/usage/versioning
api_version = "2023-10"

[[extensions]]
type = "ui_extension"
name = "checkout-ui"
handle = "checkout-ui"

# Controls where in Shopify your extension will be injected,
# and the file that contains your extension’s source code. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/extension-targets-overview

[[extensions.targeting]]
target = "purchase.checkout.block.render"
module = "./src/Checkout.jsx"

[[extensions.targeting]]
target = "purchase.checkout.delivery-address.render-before"
module = "./src/DeliveryAddress.jsx"

[extensions.capabilities]
# Gives your extension access to directly query Shopify’s storefront API.
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#api-access
api_access = true

# Gives your extension access to make external network calls, using the
# JavaScript `fetch()` API. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#network-access
# network_access = true

# Loads metafields on checkout resources, including the cart,
# products, customers, and more. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#metafields

# [[extensions.metafields]]
# namespace = "my_namespace"
# key = "my_key"
# [[extensions.metafields]]
# namespace = "my_namespace"
# key = "my_other_key"

# Defines settings that will be collected from merchants installing
# your extension. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#settings-definition

[extensions.settings]
  [[extensions.settings.fields]]
  key = "viewtype"
  type = "single_line_text_field"
  name = "Heading or Banner"
    [[extensions.settings.fields.validations]]
    name = "choices"
    value = "[\"Heading\", \"Banner\"]"
  [[extensions.settings.fields]]
  key = "title"
  type = "single_line_text_field"
  name = "Banner title"
  description = "Enter a title for the banner."
  [[extensions.settings.fields]]
  key = "description"
  type = "single_line_text_field"
  name = "Banner description"
  description = "Enter a description for the banner."
  [[extensions.settings.fields]]
  key = "status"
  type = "single_line_text_field"
  name = "Banner status"
    [[extensions.settings.fields.validations]]
    name = "choices"
    value = "[\"info\", \"success\", \"warning\", \"critical\"]"
  [[extensions.settings.fields]]
  key = "collapsible"
  type = "boolean"
  name = "Show collapsible description."
  description = "Display controls to expand or collapse the banner description."

[wuguide]

Hi  Kristen_Z
How do you pass the dynamic parameters in the URL? Have you found a solution?

[Hugh_trt]

Met similar issue. Did you solve it? 😀

[Kristen_Z]

I never did find a solution :S @Shopify ??

[Hugh_trt]

I can change the location on the checkout customize, but it does not really work because the extension always stay above the checkout button no matter where I set it in the customize.

[Vieweg]

Same here... seems to be a shopify's bug...

[ec_viktor]

This issue still exists ...
Did anyone find another way to make this work?