Build Embedded Shopify Apps using SmoothCode
Embed your apps within Shopify Admin to give merchants a seamless experience
Last Update vor 8 Monaten
Embedded Apps are the kind of apps that opens within the Shopify Admin.
It gives merchants a more seamless experience as:
- They don't have to leave Shopify UI in order to operate the apps
- It is easier for them to manage multiple apps
- They can pin their favourite apps within the Shopify Admin for faster access
You can now build embedded apps using SmoothCode.
You can clone this repo and follow instructions there
Building Next JS App
We will be using yarn for this help doc
Create a new Next JS app and add the details in the CLI
Install Shopify Packages
Install Utility Package
Create a new file .env and add the following content
Navigate to pages/_app.js and add the following code
Create a new directory utils and create a new file utils/shopifyApp.js and add the following code
Create a new directory pages/auth and create a new file pages/auth/app-url.js and add the following code
Create a new file pages/home.js and add the following code
Testing Embedded App
Now that the code is complete let's test our app.
Start the server
Start a tunnel to the port 3000
Create a Shopify app manually using Partner Dashboard
Create a new app on SmoothCode
Copy the App URL and paste it in .env as NEXT_PUBLIC_SMOOTHCODE_APP_URL
Add the App URL in Shopify Partner Dashboard as https://<domain>/auth/app-url
Copy the Allowed Redirection URL and paste it in Shopify Partner Dashboard
Copy Shopify API Key & Secret Key to SmoothCode
Copy Shopify API Key to .env file as NEXT_PUBLIC_SHOPIFY_API_KEY
Restart the server after making changes to .env file
Test your app by clicking the button "Select Store" and choosing the store you want to install the app to
Install the app by approving the permissions
Your embedded app is ready!!
It is super easy to build embedded apps using SmoothCode now.
Feel free to reach us out on [email protected]