Build Embedded Shopify Apps using SmoothCode

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.

Alternatively

You can clone this repo and follow instructions there

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

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]