1. Check the requirements: you have created an app using Shopify CLI 3.0 or later, or you have migrated an existing app to make it compatible with Shopify CLI 3.0 or later.
2. Reference: Create an app using Shopify CLI (based on the PHP application template) and install it in the store.
3. Run: yarn shopify app generate extension to create the extension. See Figure 1.
PS E:\wwwroot\shopify-app\learn-app> yarn shopify app generate extension
yarn run v1.22.15
$ shopify app generate extension
✔ Type of extension? · Theme app extension
✔ Your extension's working name? · learn-app-extension-20221018
✔ Your Theme app extension extension was added to your project!
To find your extension, remember to cd extensions/learn-app-extension-20221018
To preview your project, run yarn dev
Done in 96.73s.
PS E:\wwwroot\shopify-app\learn-app>
4. You should now have a new extension directory containing the basic folder structure for a theme app extension. See Figure 2.
5. Go to the app root directory and run: yarn dev. When you run the dev command, the CLI builds your app and bundles your app extension. Error: Bundler version 2.3.7 is not supported.
PS E:\wwwroot\shopify-app\learn-app> yarn dev
yarn run v1.22.15
$ shopify app dev
✔ Dependencies installed
To run this command, log in to Shopify Partners.
👉 Press any key to open the login page on your browser
Auto-open timed out. Open the login page: Log in to Shopify Partners (http://accounts.shopify.com/oauth/authorize?client_id=fbdb2649-e327-4907-8f67-908d24cfd7e3&scope=openid+https%3A%2F%2Fapi.shopify.com%2Fauth%2Fshop.admin.graphql+https%3A%2F%2Fapi.shopify.com%2Fauth%2Fshop.admin.themes+https%3A%2F%2Fapi.shopify.com%2Fauth%2Fpartners.collaborator-relationships.readonly+https%3A%2F%2Fapi.shopify.com%2Fauth%2Fshop.storefront-renderer.devtools+https%3A%2F%2Fapi.shopify.com%2Fauth%2Fpartners.app.cli.access&redirect_uri=http%3A%2F%2F127.0.0.1%3A3456&state=34c66755c0614e1bcedd680b643bcbf2e6fe237c653dac95dc43a7fb15e7&response_type=code&code_challenge_method=S256&code_challenge=lLJtne8D7cUPF437Ct2zttzSDSJV48mXJyuil-7GzrM)
✔ Logged in.
Using your previous dev settings:
- Org: 王强
- App: learn-app
- Dev store: shuijingwanwq-development.myshopify.com
- Update URLs: Always
To reset your default dev config, run yarn dev --reset
✅ Success! The tunnel is running and you can now view your app.
✔ URL updated
Shareable app URL
https://d071-66-175-216-239.ngrok.io?shop=shuijingwanwq-development.myshopify.com&host=c2h1aWppbmd3YW53cS1kZXZlbG9wbWVudC5teXNob3BpZnkuY29tL2FkbWlu
learn-app-extension-20221018 (Theme app extension)
Follow the dev doc instructions (https://shopify.dev/apps/online-store/theme-app-extensions/getting-started#step-3-test-your-changes) by deploying your work as a draft
✖ Bundler version 2.3.7 is not supported
━━━━━━ Error ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Bundler version 2.3.7 is not supported
What to try:
To update to the latest version of Bundler, run gem install bundler
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
frontend |
frontend | > dev
frontend | > vite
frontend |
frontend |
frontend | vite v2.9.15 dev server running at:
frontend |
frontend | > Network: http://192.168.56.1:56648/
frontend | > Network: http://192.168.10.1:56648/
frontend | > Network: http://192.168.89.86:56648/
frontend | > Local: http://localhost:56648/
frontend | > Network: http://172.17.176.1:56648/
frontend |
frontend | ready in 1913ms.
frontend |
backend | > Composer\Config::disableProcessTimeout
backend | > php artisan serve
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
PS E:\wwwroot\shopify-app\learn-app>
6. Reference: When running yarn dev in a Shopify app, error: Bundler version 2.3.7 is not supported.
7. Deploy your app to create a draft version. When you run the deploy command, the CLI builds your app, bundles your app extension, and deploys the extension to Shopify as a draft. It also guides you through several configuration steps. learn-app-extension-20221018 is deployed to Shopify but not yet live. See Figure 3.
PS E:\wwwroot\shopify-app\learn-app> yarn deploy
yarn run v1.22.15
$ shopify app deploy
To run this command, log in to Shopify Partners.
👉 Press any key to open the login page on your browser
✔ Logged in.
Your configs for dev were:
Org: 王强
App: learn-app
✔ Deploy to the same org and app as you used for dev? · Yes, deploy in the same way
Deploying your work to Shopify Partners. It will be part of learn-app
theme_extensions | Running theme check on your Theme app extension...
theme_extensions | Installing theme dependencies...
theme_extensions | Installed theme dependencies!
Running validation…
Pushing your code to Shopify…
✅ Success! Deployed to Shopify.
Summary:
• learn-app-extension-20221018 is deployed to Shopify but not yet live
Done in 298.10s.
PS E:\wwwroot\shopify-app\learn-app>
8. After deploying the extension to Shopify, navigate to your app in the Partners dashboard, click Extensions, and then click the draft version you created earlier. Click Create version to create a version of the theme app extension. See Figure 4.
