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.