How to Create Shopify App Theme Extension

This is a quick tutorial on how to create your very first Shopify theme extension app with Shopify-cli with nodejs and everything default configurations that are offered by the ShopifyDevs team through their git repos for starter apps.

I assume that you have already installed Shopify-cli on your preferred development system. I am using Windows 10 with VSCODE text editor. And you have your own Shopify partner’s account and a development store, or access to a store that you would like to create this theme extension for.

I am using ruby version 3.1.1 and Shopify-cli version 2.15.1, nodejs LTS 16.14, latest npm and yarn.

ruby -v

shopify version

Also, make sure you have installed nodejs, npm, and yarn

node -v

npm -v

yarn -v

Good to Know

To create Shopify theme extension, you must create an app first and then the theme extension. But if already have an Shopify app, app type (public or private) does not matter.

Create Shopify App for Theme Extension

To create Shopify app with Shopify-cli, navigate to your desired directory and run the following command.

shopify app create node

You’ll be asked for your app name, to select your Shopify partner account and development store.

Then Shopify cli will clone the app repo from git into your local directory.

When done, it’ll ask you to change your directory to your Shopify app folder and run the Shopify app server

Install ngrok and authenticate

Before you run Shopify app server, you must install ngrok, set to system path and authenticate your account.

Download ngrok and unzip it, place it wherever you would like to and set the ngrok folder to system’s path.

unzip /path/to/ngrok.zip

ngrok authtoken 26sOYXwRwAvL1bDev1mqY5lMDqk_5GYunnsRCpyXooZUcnLMM

Run Shopify App Server

After installing ngrok and authenticating your account, you should relaunch your terminal or command prompt and then run shopify app serve command from your Shopify app directory.

shopify app serve

In few seconds, shopify cli will generate ngrok url to connect with Shopify partner’s account and install the app.

copy ngrok url and open in your preferred web browser and login to your Shopify partner’s account and install the app.

Your terminal / command prompt would look like mine below.

Create Shopify Theme Extension

Shopify extension create command can only be run from inside the Shopify app directory. To create Shopify app/theme extension run the following command.

shopify extension create

This above command will create a directory in your Shopify app folder and now your can open your Shopify app folder in your preferred text editor, I’ll be using VSCODE.

Create 1st Theme App Extension Block

Open your Shopify app with your text editor and create a liquid file under app_name/theme-app-extension/blocks/app-block.liquid.

{% render "app-block-code" %}


{% schema %}
  {
    "name": "App Block",
    "target": "section",
    "settings": []
  }
{% endschema %}

Under snippets folder, you can create your app-block-code.liquid file and render that file in your block’s file.

Push App Extension to Dev Store

Once you are happy with the app extension code, you can push it to your app on your partner account apps and from there you can create version of your app extension and install it to your Shopify development store.

Finally you can use this block only if your theme supports it. your development store theme must be OS 2.0.

If you are using app extension to build embed app then you need enable it from Theme customizer Theme Settings and then app embed and click the button on your app-extension to enable this app.

If you have any question or suggestion, you can leave your comment below.

For business queries – [email protected]