App reviews, troubleshooting, and recommendations
I am working on an app where a user can assign multiple media items to a variant. This is working good using rest admin api because I was able to fetch the image-id using Rest admin API and saved it in my database as variant-id, image-id pairs. On the storefront side, I added a custom attribute in liquid coding of the theme like this:
data-image-id="{{ image.id }}" to identify and compare the images with image-ids saved in my database.
Now I want to make use of the new media object that shopify has introduced. I am using graphQl API to fetch the product images. The Graphql API is returning an image id in a URL like format: "gid://shopify/images/10079785100". The problem is, I am unable to compare and somehow link this id to the image-id or media-id on the storefront.
So my question is:
1. How can I fetch the actual image.id or media-id for a media item using graphQL API?
2. If that is not possible, then how can I add this gid as a custom attribute for image tag in product page image gallery within the theme code?
Thanks for any help in advance!
Cheers!
Isn't the image id the last section of the gid?
Hi @mandeepsandhu91,
Correct me if I am wrong. You wanted to save product image id to database right?
I am sharing two GraphQL queries with you.
1. This will give you first 10 products id, title, handle, image id and url. Here you can change the limit upto 200(first: 200) is max.
Query :
query ProductList{
products(first: 10) {
nodes {
id
title
handle
__typename
images(first: 5) {
nodes {
id
url
}
}
}
}
}
2. This will give you specific product detail by its handle or if you want you can fetch the data by product id:- product(id:"gid://shopify/Product/8119795253543").
Query :
query ProductData {
productByHandle(handle: "ocean-blue-shirt") {
id
images(first: 5) {
nodes {
id
url
}
}
}
}
This will give both image id and image url.
I hope this might be helpful for you.
Thanks...
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025