How to Create Shopify App And Extension With Remix

Shopify Apps Guide

Setup shopify app environment:-

• Install ruby version -> 3.2.0 (https://phoenixnap.com/kb/install-ruby-ubuntu)
• Install shopify cli npm install -g @shopify/cli @shopify/theme

How to install shopify app:-

Step 1 : Create New App :-
Fire below shopify command in you terminal

shopify app init

Then shopify will ask you some configuration to select

1. Your Project Name? : write a project name
2. Get started building you app : select Start with remix
3. For Your remix template, which language do you want? :select language as you want in my case javascript

Step 2 : Start a local development server:-

cd your-project
npm install && npm run dev


Step 3 : Install your app on your development store:-

1. With the server running, press p to open your app's preview URL in a browser. When you open the URL, you're prompted to install the app on your development store.

2. Click Install app to install the app on the development store. You now have a development store running with your new app installed:

How to Install app extension:-

Step 1 : Create a new extension:-
You'll use Shopify CLI to generate a new extension.

• Navigate to the directory of the app that you want to add your extension to.
• Run the following command to start creating the extension: shopify app generate extension
• Select Theme app extension as the extension type.
• Provide a name for your extension.

Step 2 : Preview your theme app extension:-
You can preview your extension by running the dev command, which starts a local development server that supports hot reloading. This preview is available only in Google Chrome.

1. Navigate to your app directory.
2. Run the following command: npm run dev
3. Click the URL that's printed at the bottom of the CLI output to preview your extension.

Now your shopify app and extension is created and you can start your development.

Comments

[Peter Hallander]

Good starting point. One thing worth expanding on for anyone building theme app extensions: there are two distinct extension types with very different behaviors, and it's easy to pick the wrong one.

App embeds (blocks/ directory with type: '@app') — these appear as a toggle in the merchant's Theme Customizer under "App embeds". They inject into the theme globally without being placed in a specific section. Use these for things like scripts, tracking pixels, chat widgets, or any functionality that should run site-wide without occupying a content slot.

App blocks (blocks/ directory without that type declaration) — these are drag-and-drop blocks that merchants add to specific pages and sections in the theme editor. Use these for UI elements like widgets, carousels, or content sections that should appear in a specific place.

A practical example: I built a navigation prefetching app (apps.shopify.com/prefetch — disclosure: I'm the developer) that uses an app embed to inject a Speculation Rules API JSON script tag site-wide. It made sense as an embed because the script needs to be on every page, not placed manually on individual sections.

One gotcha: if you use an app embed, merchants have to manually toggle it on in Theme Customizer. The CLI deploys the extension to their theme, but the toggle starts off. This is a common source of confusion — merchants assume the extension is active just because it was deployed. Worth building explicit activation verification into your app dashboard.