Build theme app extensions with Shopify CLI
1. View 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: Use Shopify CLI to create an application (PHP-based application template) and install it in the store
3. Execute: YARN Shopify App Generate Extension Create an extension. as shown in Figure 1
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? The Theme App Extension ✔ Your extensionS Working Name? Learn-App-Extension-20221018 ✔ Your Theme App 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 that contains the basic folder structure of the theme application extension. as shown in Figure 2
Figure 2
5. Go to the app root directory and run: yarn dev, when you run the dev command, the CLI builds your application and bundles your application 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.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: Wang Qiang - 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 ━━━━━━━━━━━━━━━━━━━━━━━━━�� full━━━━━━━━━━━━━━━ 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 visithttps://yarnpkg.com/en/docs/cli/runFor documentation about this command. PS e:\wwwroot\shopify-app\learn-app>
6. Reference: When running in Shopify application: yarn dev, an error is reported: 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 application, bundles your application extension, and deploys it as a draft to Shopify. It also guides you through multiple configuration steps. learn-app-extension-20221018 has been deployed to Shopify but not yet online. as shown in Figure 3
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: Wang Qiang App: Learn-App ✔ Deploy to the same org and app as you used for dev? Deploying your work to Shopify Partners. It will be part of learning-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 the app in the partner dashboard, click Extension, and then click the draft version you created earlier. Click Create version to create the theme app extension. as shown in Figure 4
Figure 4
