Accessing config settings made on checkout extension admin page in checkout extension code

Solved

Accessing config settings made on checkout extension admin page in checkout extension code

Turbofan1178
Shopify Partner
50 4 8

I am building a checkout extension and I would like to access the config settings made on the Shopify admin side for the extension in the extension code.

 

So basically, if I have a multi-select dropdown and some input fields to configure the extension on the admin side, what api do I use to access to the values that were selected in the checkout ui extension code.

 

I'm not exactly sure how to achieve that, can I please get some help. A link to an area of the docs where something similar is done would be helpful.

 

Thanks.

Accepted Solution (1)
SBD_
Shopify Staff
1829 271 414

This is an accepted solution.

Hey @Turbofan1178 

 

I believe they're stored in metafields. This tutorial should run you through the process / provide sample code.

Scott | Developer Advocate @ Shopify 

View solution in original post

Replies 6 (6)

Harsh4
Tourist
3 0 1

Hi @Turbofan1178 ,

 

You may want to consider using a configuration file or environment file to deploy your extension with your app's URL.
The Shopify deploy command has a '--config' flag that allows you to specify a configuration name.
After which you should be able to retrieve the value of the .env variable within your Checkout UI Extension using something like the following:
process.env.{env_variable_name}

Turbofan1178
Shopify Partner
50 4 8

Thanks for your response.

But using a config file isn't exactly what I was looking for.

 

What I was referring to was a way to get extension settings configured in theApp Bridge UI.

 

See screenshot.

Screenshot 2023-11-23 at 23.28.02.png

SBD_
Shopify Staff
1829 271 414

This is an accepted solution.

Hey @Turbofan1178 

 

I believe they're stored in metafields. This tutorial should run you through the process / provide sample code.

Scott | Developer Advocate @ Shopify 

Turbofan1178
Shopify Partner
50 4 8

Thank you, I'll try that and see if it works for my use case.

 

Another question, do you know if there is a doc/tutorial for building UI with conditions like the screenshot in my last comment?

SBD_
Shopify Staff
1829 271 414

Hey @Turbofan1178 

 

Try this one: https://shopify.dev/docs/apps/checkout/payment-customizations/ui

Scott | Developer Advocate @ Shopify 

Turbofan1178
Shopify Partner
50 4 8

Okay, but after some trial and error, I struggled to make it work for checkout ui extensions custom fields. I believe the only way to configure the custom fields is through the checkout editor.

 

In that case, I would like to include a link in the app bridge ui that when clicked, takes the user to the checkout editor for my extension.

 

How can I do that?