How to detect extension name in Checkout using any ore defined hooks

Extensions
1

Hi team,

Could someone please suggest a way to access the extension name after deployment in the Checkout UI Editor?

Use case:
I’m adding an extension block in the Checkout UI Editor. As soon as the block is added, instead of showing the extension’s final output, I want to display a temporary preview view that is visible only inside the checkout editor.

In that preview, I’d like to display my company’s logo and the extension name. However, I haven’t found any way to dynamically access the extension name, so the only option right now seems to be manually hardcoding it, which I’d prefer to avoid.

Is there any recommended way to retrieve the extension name programmatically in this scenario?

Thanks in advance!

2

I may be wrong but displaying your company logo may class as advertisement which I’m not sure is permitted.

Feel free to correct me if I’m wrong though.

3

Hey @luke, Thank you for the response

By the company’s logo, I meant rendering the (app logo) in the same way as the app, checkout blocks do

For example, the image below, where the image and name should be dynamic and we should not hardcode in every checkout UI extension

image
image554×248 12 KB

image
image1054×224 13.1 KB

4

@Namish_Kapoor there’s no built-in API to dynamically retrieve the extension name at runtime unfortunately. useExtension() gives you the extension target but not the name as it appears in the editor.

The closest thing to what you’re looking for is useApi() which exposes some extension metadata, worth checking what’s available there:

const api = useApi();
console.log(api.extension);

But realistically for the editor preview use case, the cleanest approach is passing the extension name as a settings field in your shopify.extension.toml. That way it’s not hardcoded in the component itself, just configured once per extension:

[[extensions.settings.fields]]
key = "extension_label"
type = "single_line_text_field"
name = "Extension Label"

Then read it in the component via useSettings(). Still manual but at least it’s configurable without touching the code each time.

1 Like