Shopify App Development Tutorial – Build Your First Shopify App from Scratch

Once your app is connected to Shopify, the next step is to add functionality using the Shopify Admin API. This section covers how to use the Shopify API, fetch store data, and implement a basic feature.

1. Using Shopify Admin API & GraphQL

Shopify provides two main APIs for app development:

• REST Admin API – Uses standard HTTP requests (GET, POST, PUT, DELETE) to interact with store data.
• GraphQL Admin API – A more efficient, flexible way to fetch only the required data.

To use the Shopify Admin API, ensure your app has the necessary API permissions set in your Shopify Partner Dashboard under App Setup > Admin API Scopes.

2. Fetching Store Data (Retrieving Product Listings)

To retrieve product data using the GraphQL Admin API, send a request from your backend:

import fetch from ‘node-fetch’;

const shopifyGraphQLUrl = `https://${shop}.myshopify.com/admin/api/2023-10/graphql.json`;

const accessToken = process.env.SHOPIFY_ACCESS_TOKEN;

const query = `

{

  products(first: 5) {

    edges {

      node {

        id

        title

        description

        images(first: 1) {

          edges {

            node {

              src

            }

          }

        }

      }

    }

  }

}

`;

async function fetchProducts() {

  const response = await fetch(shopifyGraphQLUrl, {

    method: ‘POST’,

    headers: {

      ‘Content-Type’: ‘application/json’,

      ‘X-Shopify-Access-Token’: accessToken

    },

    body: JSON.stringify({ query })

  });

  const data = await response.json();

  console.log(data);

}

fetchProducts();

This request fetches a list of the store’s first five products, including their titles, descriptions, and images.

3. Adding a Basic Feature (Displaying Product Info in the App)

To display the fetched product data inside the app’s UI, create a React component:

import { useEffect, useState } from “react”;

function ProductList() {

  const [products, setProducts] = useState([]);

  useEffect(() => {

    fetch(“/api/products”)

      .then((res) => res.json())

      .then((data) => setProducts(data));

  }, []);

  return (

    <div>

      <h2>Product List</h2>

      <ul>

        {products.map((product) => (

          <li key={product.id}>

            <h3>{product.title}</h3>

            <p>{product.description}</p>

            <img src={product.images[0]?.src} alt={product.title} width=”100″ />

          </li>

        ))}

      </ul>

    </div>

  );

}

export default ProductList;

This component fetches product data from an API route and displays it inside the app’s interface. You can now extend this feature further, such as adding filters, search options, or editing capabilities.