- In your local terminal run the following command to create a new Shopify CLI app:
npm init @shopify/app@latest
yarn create @shopify/app
- Select the
Start by adding your first extensionoption.
- Upon app creation open the generated app folder and
cdinto the app's root.
- Then run the following command to generate your extension.
npm run generate extension
yarn generate extension
Yes, create it as a new app
- Proceed to name your app.
- You will then be prompted to select the type of admin extension or checkout UI extension you wish to build and to name it.
- After the extension code is generated open your
shopify.app.tomlfile, locate the
access_scopessection and add the following to it:
shopify.app.toml[access_scopes]# Learn more at https://shopify.dev/docs/apps/tools/cli/configuration#access_scopesscopes = ""use_legacy_install_flow = true
- After updating the TOML file, push the configuration changes to your partner's app using the following command:
terminalshopify app config push
- Finally head over to Gadget, create a new Shopify app and connect to Shopify (instead of creating a manual app from the Partners dashboard you will use the app you created earlier through the CLI).
Follow along with the rest of the extension setup, but make sure as prompted by the CLI you link your extension to the same Partners app you used to set up your Shopify connection in Gadget, and select the same development store you installed your app on.
Gadget backends automatically support authenticating requests made from within Admin Extensions to your Gadget backend.
Shopify automatically adds an Authorization header to requests sent by Admin Extensions containing a Shopify Session Token. Similar to embedded applications authenticating against your Gadget backend, Gadget will parse the token contained in this header and set up a record in your session model representing a given merchant, as well as set up the
connections.shopify object for communicating with with Shopify Admin API.
We recommend using our API client within the extension to get data access as it is the easiest way to get started:
cdinto your extension code's directory.
- Install the client.
- Once your client is installed, you must provide an instance of your client using the Gadget React provider.
- Import the api instance and the provider, and wrap the provider around the
reactExtensioncode as below:
- Now your extension has full access to the Gadget API and all the react hooks, so below will simply get data from our Gadget backend using a
useFindOnehook to grab the title of our
Alternatively as a fallback option you can also make a request directly to fetch from your GraphQl API endpoint.
Gadget supports authenticating requests made from Shopify Checkout Extensions using Shopify's Session Token feature. Inside a checkout extension that has the
network_access capability, you can make a request to your backend Gadget API or an HTTP route:
Another option which is a bit lengthier involves querying and writing metafields to pass and set data within extension.
For more information checkout our metafields guide.