How to create Shopify Theme App Extension

In the previous article, we learned How to Build Shopify App using Laravel & PHP. If you have not checked that article, you can go through it because you will need a Shopify App to create Shopify Theme App Extensions

In this article, we will go through step by step for creating Shopify Theme App Extension.

The Shopify Theme App Extension allows you to easily integrate your app’s features into Shopify’s user interfaces. This guide will introduce you to app extensions and how they work together. It’s a simple way to enhance your app’s functionality within Shopify!

An app extension highlights your app’s functionality exactly when and where users need it the most. It’s especially useful for programs that require frequent and quick user actions.

For example, your app’s actions can be easily accessible in the Shopify admin as selectable options for orders, products, customers, and other resources. You may use app extensions to develop interfaces that blend in with Shopify’s look and feel, allowing your app to effortlessly connect to Shopify’s Point of Sale (POS) system. It’s a simple method to improve the accessibility and user experience of your software!

Without Shopify Theme App Extension

When you don’t have an app extension, users interact directly with your app. In this case, your app communicates information to Shopify, which is then presented back to the users through your app.

With Shopify Theme App Extension

When you have an app extension, users interact with Shopify directly. Shopify then forwards the information to your app, which is then displayed back to the users through your app extension within Shopify. It creates a seamless user experience and streamlines the communication process!

• You have created Shopify App with Laravel or Other platforms.
• You have installed NodeJs >= 17.0
• You’ve installed Git 2.28.0 or higher.

Go to your project’s root directory and open the terminal. Install NPM using the below command.

npm install

Run the below command to install Shopify CLI 3 and Shopify App.

npm i @shopify/cli
npm i @shopify/app

Go to the package.json file in the root directory and modify the scripts object as shown below.

"scripts": {
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production",
    "shopify": "shopify",
    "build": "shopify app build",
    "dev": "shopify app dev",
    "push": "shopify app push",
    "generate": "shopify app generate",
    "deploy": "shopify app deploy",
    "info": "shopify app info"
}

Now, create a shopify.app.toml file in the root directory and paste the code below.

name = "My new app"
scopes = "write_customers,write_orders,write_products"
extension_directories = ["extensions/*"]
web_directories = ["web/*"]

Create a new extension

Run the below command to create a Shopify theme app extension.

npm run shopify app generate extension

If you are not logged in, to the Shopify store in the CLI, then it will ask for logging in, in the browser. Once you are logged in, then we can go to the next step.

Next, it will ask for the partner account. Select your partner account and press enter.

If you have not created a Shopify app on the Shopify store then select (y) Yes, create it as a new app otherwise select (n) No, connect it to an existing app

If you select the first option, then it will redirect you to create an app on the Shopify store.

If you select the second option, then it will display all the apps which are on the Shopify store. Select the app for which you want to create an extension.

Then, it will ask for selecting the type of extension. Select the most relevant type for your requirements. For example, We are selecting a Theme app extension.

Next, it will ask for an extension name. Please provide the relevant name. For example, We are giving it the name “my-app-extension”

It will create an extensions directory in the root directory of the project.

Preview your theme app extension

To see a preview of your extension, you can run the “dev” command. This will start a local development server with hot reloading support, meaning your changes will be automatically updated as you work. However, this preview feature is exclusively available in Google Chrome.

npm run dev

To host your theme app extension, you can specify which theme you want to use. You can do this by using the “–theme ” flag in the command. If you decide not to specify a theme, the command will automatically upload the “Dawn” theme, which is Shopify’s example theme, to the development store.

When you execute the “dev” command, the CLI (Command Line Interface) takes care of building your app and bundling your app extensions. Additionally, it will guide you through several configuration steps. However, if you have already run “dev” or “deploy” for this app before, some of these configuration steps will be skipped to streamline the process.

After a successful push, go to the Shopify app on the Shopify store and go to the extensions menu. There you can see, your extension is created.

Click on the extension and click on Enable button.

It will enable the extension for your app.

View Extension on Theme Editor

Now, go to your Theme -> Customize theme -> Default Product -> Product Information -> Click on Add Block -> App Blocks -> Star Rating and add it.

The current setting is for only Section. If you want to Enable or Disable the whole setting for the store, then go to Project -> extensions -> my-app-extension -> blocks -> star_rating.liquid. Change the target from section to body in the schema and save the file.

It will add your extension to App Embeds. To see the extension for disabling and enabling, go to Theme Editor -> App Embed. There you can see the extension.

Now, you can start developing your App Extension. For more information about the extension, please refer Shopify Theme App Extension Doc

If you have questions regarding building Shopify Theme App Extension, then you can comment down below. I will surely help you.

You might also like: How to Build Shopify App using Laravel & PHP