Block extension targets for one page checkout show at bottom of page
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."
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.
