Edit and Update Shopify Products with Remix.js | Shopify Tutorial | Shopify App Development

Shopify is one of the most popular eCommerce platforms, empowering businesses to sell online with ease. For developers, Shopify offers a powerful API that enables the creation of custom applications to extend the platform’s functionality. One of the essential tasks in eCommerce development is managing product information—specifically, editing and updating product details. In this tutorial, we’ll explore how to build a Shopify app using Remix.js that allows users to edit and update Shopify products. We’ll cover everything from setting up your development environment to interacting with Shopify’s API using GraphQL.

Why Use Remix.js and Polaris for Shopify App Development?

Before we dive into the tutorial, it’s important to understand why Remix.js and Shopify Polaris are excellent choices for Shopify app development:

• Remix.js: Remix is a modern React framework that emphasizes server-side rendering (SSR) and optimized data fetching. It’s ideal for creating fast, dynamic web applications, which is crucial for eCommerce where performance impacts user experience and conversions.
• Shopify Polaris: Polaris is Shopify’s design system that provides a set of React components for building consistent, accessible, and professional user interfaces. Using Polaris ensures that your app seamlessly integrates with Shopify’s admin interface, providing a unified experience for users.

Setting Up Your Development Environment

To start building your Shopify app, you need to set up your development environment. Here’s how:

1. Install Node.js: Ensure that Node.js and npm (Node Package Manager) are installed on your machine.
2. Create a Shopify App with Remix.js: Use the Shopify CLI to create a new app with Remix.js as the frontend framework:bashCopy codeshopify app create node -t remix This command initializes a new Shopify app using Remix.js, providing the foundation for our product editing functionality.
3. Install Shopify Polaris: Navigate to your app’s directory and install Polaris components:bashCopy codenpm install @shopify/polaris
4. Set Up Remix.js: Ensure that your Remix.js environment is properly configured, including setting up routes, loaders, and actions to handle data fetching and user interactions.

Interacting with the Shopify API Using GraphQL

To edit and update Shopify products, we will interact with the Shopify API using GraphQL. Shopify’s GraphQL API is powerful and flexible, making it easy to manage products, orders, customers, and more.

Step 1: Configure API Access

Ensure that your Shopify app is configured to access the Shopify API. In your shopify.config.js file, include the necessary API credentials:

javascriptCopy codemodule.exports = {
  apiKey: process.env.SHOPIFY_API_KEY,
  apiSecretKey: process.env.SHOPIFY_API_SECRET,
  scopes: ['read_products', 'write_products'],
  shop: process.env.SHOPIFY_SHOP,
  accessToken: process.env.SHOPIFY_ACCESS_TOKEN,
};

Make sure to store your API key and access token securely in environment variables.

Step 2: Create a GraphQL Query to Fetch Product Details

To edit a product, you first need to retrieve its details from the Shopify API. Create a utility function to fetch a product by its ID. In your utils directory, create a file named fetchProduct.js:

javascriptCopy codeimport { gql } from 'graphql-request';
import { shopifyClient } from './shopifyClient';

export async function fetchProduct(productId) {
  const query = gql`
    query GetProduct($id: ID!) {
      product(id: $id) {
        id
        title
        descriptionHtml
        variants(first: 10) {
          edges {
            node {
              id
              title
              price
              inventoryQuantity
            }
          }
        }
      }
    }
  `;

  const variables = { id: productId };
  const response = await shopifyClient.request(query, variables);
  return response.product;
}

This function sends a GraphQL query to Shopify’s API to retrieve the product details, including its title, description, and variants.

Building the Product Edit Form

With the product data fetched, the next step is to create a form where users can edit the product details.

Step 1: Create the Product Edit Page

Create a new component, ProductEditPage.jsx, in your components or pages directory. This component will display the form for editing the product:

javascriptCopy codeimport { Page, Card, FormLayout, TextField, Button, Stack } from '@shopify/polaris';
import { useLoaderData, useFetcher } from '@remix-run/react';
import { fetchProduct } from '../utils/fetchProduct';

export async function loader({ params }) {
  const productId = params.productId;
  const product = await fetchProduct(productId);
  return product;
}

function ProductEditPage() {
  const product = useLoaderData();
  const fetcher = useFetcher();

  const handleInputChange = (variantId, field, value) => {
    fetcher.submit(
      { variantId, field, value },
      { method: 'post', action: `/products/${product.id}/edit` }
    );
  };

  return (
    <Page title={`Edit Product: ${product.title}`}>
      <Card sectioned>
        <FormLayout>
          <TextField
            label="Product Title"
            value={product.title}
            onChange={(value) => handleInputChange(product.id, 'title', value)}
          />
          <TextField
            label="Product Description"
            value={product.descriptionHtml}
            onChange={(value) => handleInputChange(product.id, 'descriptionHtml', value)}
            multiline
          />
        </FormLayout>

        {product.variants.edges.map(({ node: variant }) => (
          <Stack vertical key={variant.id}>
            <FormLayout>
              <TextField
                label="Variant Title"
                value={variant.title}
                onChange={(value) => handleInputChange(variant.id, 'title', value)}
              />
              <TextField
                label="Price"
                value={variant.price}
                type="number"
                onChange={(value) => handleInputChange(variant.id, 'price', value)}
              />
              <TextField
                label="Inventory Quantity"
                value={variant.inventoryQuantity}
                type="number"
                onChange={(value) => handleInputChange(variant.id, 'inventoryQuantity', value)}
              />
            </FormLayout>
          </Stack>
        ))}
      </Card>
      <Button primary onClick={() => fetcher.submit({ method: 'post', action: `/products/${product.id}/edit` })}>
        Save Changes
      </Button>
    </Page>
  );
}

export default ProductEditPage;

In this code:

• FormLayout and TextField: Polaris components are used to create input fields for the product’s title, description, and variants.
• handleInputChange Function: This function triggers an API call to update the product variant whenever an input field is changed.

Step 2: Implement the Update Action

Now, create the action that handles the product update request. In your routes directory, create a file named products.edit.js:

javascriptCopy codeimport { redirect } from '@remix-run/node';
import { shopifyClient } from '../../utils/shopifyClient';
import { gql } from 'graphql-request';

export async function action({ request, params }) {
  const formData = await request.formData();
  const productId = params.productId;
  const variantId = formData.get('variantId');
  const field = formData.get('field');
  const value = formData.get('value');

  const mutation = gql`
    mutation UpdateProduct($id: ID!, $input: ProductInput!) {
      productUpdate(id: $id, input: $input) {
        product {
          id
          title
        }
        userErrors {
          field
          message
        }
      }
    }
  `;

  const input = { [field]: value };
  await shopifyClient.request(mutation, { id: productId, input });

  return redirect(`/products/${productId}/edit`);
}

This action performs the following steps:

• Receive the Product Data: It receives the product ID, variant ID, field name, and updated value from the form data.
• Update the Product: It uses a GraphQL mutation to update the product in Shopify.
• Redirect: After updating, the user is redirected back to the product edit page.

Enhancing the User Experience

To provide a better user experience, consider adding the following features:

1. Form Validation: Ensure that fields are validated before submission, such as requiring a title and a valid price.
2. Optimistic UI Updates: Implement optimistic UI updates, where changes are reflected in the UI immediately before confirmation from the server.
3. Error Handling: Handle errors gracefully by displaying error messages if the update fails.

Testing and Deployment

After implementing the product editing functionality, thoroughly test your app to ensure it works correctly:

• Functionality: Verify that all product details are fetched and updated correctly.
• User Experience: Ensure that the UI is responsive and intuitive, providing clear feedback to users during the editing process.
• Performance: Check that the app performs well, even with large amounts of product data.

Once testing is complete, deploy your Shopify app using the Shopify CLI:

bashCopy codeshopify app deploy

Conclusion

Editing and updating Shopify products in a custom app using Remix.js and Polaris is an essential feature for managing an online store efficiently. By following this tutorial, you’ve learned how to set up your development environment, interact with the Shopify API using GraphQL, and build