---
title: "How to Change Specific Product Image using GraphQL API in Shopify Remix App?"
url: "https://magecomp.com/blog/change-specific-product-image-using-graphql-api-shopify-remix-app/"
date: "2024-07-23T16:00:14+00:00"
modified: "2025-01-31T05:05:36+00:00"
author:
  name: "Bharat Desai"
  url: "https://magecomp.com"
categories:
  - "Remix"
  - "Shopify"
word_count: 416
reading_time: "3 min read"
summary: "In a Shopify Remix app, you might want to give store owners the ability to update specific product images directly from your app's interface. Let's dive into making your Shopify store more dynamic ..."
description: "Follow this step-by-step guide to dynamically change product images in your Shopify store for a better user experience."
keywords: "Remix, Shopify"
language: "en"
schema_type: "Article"
related_posts:
  - title: "How to Create High-Performance Shopify Landing Pages?"
    url: "https://magecomp.com/blog/create-high-performance-shopify-landing-pages/"
  - title: "Implementing Prisma Pagination with Skip and Take in a Shopify Remix App"
    url: "https://magecomp.com/blog/implement-prisma-pagination-with-skip-and-take-shopify-remix-app/"
  - title: "How to Run a Successful Shopify Store on a Budget"
    url: "https://magecomp.com/blog/run-shopify-store-on-a-budget/"
---

# How to Change Specific Product Image using GraphQL API in Shopify Remix App?

_Published: July 23, 2024_  
_Author: Bharat Desai_  

![](https://magecomp.com/blog/wp-content/uploads/2024/07/How-to-Change-Specific-Product-Image-using-GraphQL-API-Iin-Shopify-Remix-App-1024x512.webp)

In a Shopify Remix app, you might want to give store owners the ability to update specific product images directly from your app’s interface. Let’s dive into making your Shopify store more dynamic with GraphQL and Remix!
In this blog post, we’ll show you how to Change Specific Product images using GraphQL API in your Shopify Remix app, ensuring your product data is always current and automated efficiently.
[![Shopify Mobile App Builder](https://magecomp.com/blog/wp-content/uploads/2024/12/Shopify-Mobile-App-Builder-1.webp)](https://apps.shopify.com/mobile-app-builder-by-magecomp)

**Prerequisites:**

Before proceeding, ensure that the user has the necessary permissions and write access scope to update product images in the Shopify store.
## Steps to Change Specific Product Image using GraphQL API in Shopify Remix App:
### Step 1: Get the product ID from the admin page
First, we need to get the product ID of the image you want to update. Here’s how you can do it:
![get product id](https://magecomp.com/blog/wp-content/uploads/2024/07/get-product-id.png)

### Step 2: Create and setup file to update product image
Now, let’s add code for update product image into demo.jsx . Here’s the code for it:
```
import { json } from "@remix-run/node";
import { Form } from "@remix-run/react";
import {
       Button,
} from "@shopify/polaris";
import { authenticate } from "../shopify.server";

export const loader = async ({ request }) => {
      await authenticate.admin(request);
       return null;
};

export default function Index() {
      return (
           <Form method="POST">
                <Button submit>Click</Button>
           </Form>
       );
}
export const action = async ({ request }) => {
        const { admin } = await authenticate.admin(request);
        const response = await admin.graphql(
       `
        mutation productImageUpdate($productId: ID!, $image: ImageInput!) {
        productImageUpdate(productId: $productId, image: $image) {
                image {
                      id
                      altText
                      src
               }
               userErrors {
                   field
                   message
              }
        }
      }`,
      {
            variables: {
                  "productId": "gid://shopify/Product/8782945288486",
                         "image": {
                                 "id": "gid://shopify/ProductImage/44508027978022",
                                 "altText": "demo updated",
                                 "src": "https://cdn.shopify.com/s/files/1/0832/0270/3654/files/Mouse-magecomp_app_devlopment2.jpg?v=1718104557"
               }
          },
     },
     );
    console.log("response");
    console.log(response);
    const data = await response.json();
    return json(data);
}
```

This code will be work for update your product image and from here you can change your product image with just product id and image id.
### [![Hire Shopify Developers](https://magecomp.com/blog/wp-content/uploads/2024/12/Hire-Shopify-Developers-png.webp)](https://magecomp.com/services/expert-shopify-developers/)

### Step 3: Work on Frontend
The image will be updated here.
![update image](https://magecomp.com/blog/wp-content/uploads/2024/07/update-image.png)

Click the button.
![click button](https://magecomp.com/blog/wp-content/uploads/2024/07/click-button.png)

The image will be updated.
![image update success](https://magecomp.com/blog/wp-content/uploads/2024/07/image-update-success.png)

## Conclusion:
Product images are the main attraction of a product in this case we can update product image using GraphQL and we can make it dynamic and also update multiple product images at a time. By following these steps, you can dynamically change product images in your Shopify store, providing a more flexible and responsive user experience.
[![Shopify SEO](https://magecomp.com/blog/wp-content/uploads/2024/12/Shopify-SEO-1-png.webp)](https://magecomp.com/services/shopify-seo/)

If you have any questions or run into any issues, feel free to leave a comment below or reach out to the [**Shopify Developer**](https://magecomp.com/hire-shopify-developer.html) for support.
**Happy Coding!**


---

_View the original post at: [https://magecomp.com/blog/change-specific-product-image-using-graphql-api-shopify-remix-app/](https://magecomp.com/blog/change-specific-product-image-using-graphql-api-shopify-remix-app/)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-09-29 15:00:19 UTC_