Add custom settings for merchant in shopify checkout ui extension app

I’m working on an app with a checkout ui extension for shopify that will require the merchant to set up and save some settings in order to use it - an example would be an API key for making callouts from the extension.

What would be the best way to store these settings and for the checkout ui extension to then retrieve and use them? Going through the documentation I’ve come across the following options:

  • Using settings and settings.fields in the .toml file - this seems to say you can add values for these fields on the edit checkout screen, but our app doesn’t actually provide any blocks to be dragged and dropped onto the checkout so I don’t see where these fields would be exposed.
  • Metafields - From what I can tell, these need to be associated with an existing resource and I can’t just create a settings object from nothing and add metafields to that. If I can is there a way to package that in an app because any guidance on creating metafields also seems to involve making direct calls to my test shop url?
  • Prisma/Shopify DB - I can see how this would work but if I’m having to host the app myself, does that mean I’ll need to host everyone’s configurations, and they’ll need to call out to where my app is hosted to retrieve the API key and other settings each time?

I’m using the remix template and I’ve tried following the tutorial here: https://shopify.dev/docs/apps/build/build?framework=remix but replacing the QR code tables in the schema with a table where each record contains all the configuration settings a merchant has set. It works but when I designed it I presumed the app and db would be hosted by the site it’s installed on, not hosted elsewhere. So rather than each website having it’s own db with one configuration record, will I have one database with everyone’s configuration records in it?

Any advice would be appreciated, I just could do with pointing in the right direction. There seems to be a few options for storing merchant set configuration values for an app/extension but all seem to have reasons why they won’t work for this use case.

2 Likes

Excellent question I know dozens of us in the dev world would like to have the answers too.

Did you ever find a solution to setting a var thats accessible like this?