Build a Shopify App with React Router Fetch & Import External Products
In this tutorial, we build a complete Shopify app using the React Router Shopify template and the new Shopify Polaris Web Components.
You’ll learn how to set up a Shopify embedded app, fetch products from an external API, display them in a modern interface, and import them directly into your store using the Shopify Admin API and Shopify GraphQL.
We start by creating the project with Shopify CLI, configuring routes, and building UI with s-page, s-section, and s-card.
Then we fetch product data with FakeStoreAPI, render the grid, and trigger a Shopify productCreate mutation to add products — complete with media — to your Shopify store.
The workflow is powered by Shopify App Bridge, making the app feel native inside the admin.
Whether you're working on a Shopify custom app, building a product importer, or learning Shopify app development, this video covers everything you need to get started.
By the end, you'll understand how to use Shopify Admin API, external API integration, GraphQL, and Shopify React tutorial patterns to create powerful app features.
00:00 Intro – What We’re Building
00:27 Demo – Importing External API Products into Shopify
00:58 Requirements Before Starting
01:31 Scaffolding the App with Shopify CLI
02:10 Choosing React Router Template
02:42 Selecting Language & Dev Store
03:14 Creating a New App
03:54 Running the App with Shopify CLI
04:32 Installing the App into the Dev Store
05:43 Previewing and Exploring the App
06:24 Understanding the Default App Structure
07:11 How Home Route Files Work
08:43 Using Polaris Web Components (s-page, s-section)
09:16 Page Layout Examples (inlineSize, heading)
09:52 Understanding generateProduct Function
10:26 Product Creation Flow Explained
11:07 How Routing Works in Shopify React Router
11:30 Creating a New Route (About Us Example)
12:33 Adding Sections & Layouts with Web Components
13:31 Adding Sidebar Sections with Slots
15:11 Creating the Products Page Route
15:54 Setting Up Dummy Product Card Layout
16:49 Adding the New Page to the Sidebar Menu
17:25 Displaying Hardcoded Product Data
18:26 Adding the Loader Function
19:08 Fetching Products from External API
19:55 Returning Products to the Frontend
20:37 Using useLoaderData to Access Fetched Products
21:09 Mapping and Displaying All API Products
21:37 Adding Import Product Functionality
22:12 Using Fetcher to Submit Product Data
22:56 Running productCreate with Media via GraphQL
23:22 Testing Import Function
23:54 Verifying Imported Products in Shopify Admin
24:56 Video Wrap-Up & Conclusion
#shopifyapp #reactrouter #shopifydevelopment #shopifytutorial #polariswebcomponents
#shopifygraphql #shopifyapi #externalapi #productimporter #shopifycli #shopifyreact
#shopifydev #appbridge #fakestoreapi #webdevelopment #javascript
Please connect with Me:
Please hire me on Upwork: https://www.upwork.com/freelancers/fa...
Please hire me on Fiverr: https://www.fiverr.com/fayyaz_raza