Associate images with products: productCreateMedia vs. productUpdateMedia vs. productCreateMedia

[Hinton]

My store is using 2024-01.

I have created a script to create images using as well as a script to create products. I cannot get the right combination to associate images with products.

productAppendImages: Deprecated in 2024-01. Points to productCreateMedia.

productCreateMedia "Creates media for a product."

productUpdateMedia "Updates media for a product."

In my case, the media already exists and does not need to be "created". It exists. It also may not need to be "updated" since I don't need to change anything about the image itself.

It needs to be associated with a product. Here is a log of an attempt with "productUpdateMedia" which shows "Media associated successfully"

Questions:

1. Is the media successfully associated with the product such that I'm missing something basic to be able to view the image in the product listing?

2. What is the correct mutation to use for this case: productCreateMedia, productUpdateMedia, other?

3. Any tips for resolving this issue?

Result JSON structure:

{

  "data": {

    "productCreate": {

      "product": {

        "id": "gid://shopify/Product/9382772670761"

      },

      "userErrors": []

    }

  },

  "__lineNumber": 0

}

Associating media for product: gid://shopify/Product/9382772670761, handle: test_the-outsiders_--american-history-hit--test-episode---1

Media association result for product gid://shopify/Product/9382772670761: {

  "data": {

    "productUpdateMedia": {

      "media": [

        {

          "id": "gid://shopify/MediaImage/38315833393449",

          "alt": "Product image",

          "mediaContentType": "IMAGE"

        }

      ],

      "mediaUserErrors": [],

      "product": {

        "id": "gid://shopify/Product/9382772670761"

      }

    }

  },

  "extensions": {

    "cost": {

      "requestedQueryCost": 10,

      "actualQueryCost": 10,

      "throttleStatus": {

        "maximumAvailable": 2000.0,

        "currentlyAvailable": 1990,

        "restoreRate": 100.0

      }

    }

  }

}

Media associated successfully

Media check result: {

  "data": {

    "node": {

      "id": "gid://shopify/MediaImage/38315833393449",

      "image": {

        "url": "....-e335-439b-bebe-14f49906836c.jpg?v=1714877019 ",

        "altText": "Product image"

      }

    }

  },

  "extensions": {

    "cost": {

      "requestedQueryCost": 2,

      "actualQueryCost": 2,

      "throttleStatus": {

        "maximumAvailable": 2000.0,

        "currentlyAvailable": 1998,

        "restoreRate": 100.0

      }

    }

  }

}

Image URL:....-e335-439b-bebe-14f49906836c.jpg?v=1714877019

Alt Text: Product image

Product details after media association: {

  "data": {

    "product": {

      "id": "gid://shopify/Product/9382772670761",

      "title": "Test_The Outsiders_",

      "status": "ACTIVE",

      "images": {

        "edges": []

      }

    }

  },

  "extensions": {

    "cost": {

      "requestedQueryCost": 7,

      "actualQueryCost": 3,

      "throttleStatus": {

        "maximumAvailable": 2000.0,

        "currentlyAvailable": 1997,

        "restoreRate": 100.0

      }

    }

  }

}

[Hinton · Accepted solution]

SOLUTION: The solution was using the full url rather than only the image gid. Now, my product image shows within the product listing.

def get_media_url(media_id):
query = """
query getMediaUrl($id: ID!) {
node(id: $id) {
... on MediaImage {
image {
url
}
}
}
}
"""
variables = {
"id": media_id
}
response = requests.post(
graphql_endpoint,
json={"query": query, "variables": variables},
headers={"X-Shopify-Access-Token": access_token},
)
result = response.json()
if 'data' in result and 'node' in result['data'] and 'image' in result['data']['node']:
return result['data']['node']['image']['url']
return None

def associate_media_with_product(product_id, media_id):
media_url = get_media_url(media_id)
if not media_url:
print(f"Failed to get URL for media {media_id}")
return None

mutation = """
mutation productCreateMedia($productId: ID!, $media: [CreateMediaInput!]!) {
productCreateMedia(productId: $productId, media: $media) {
media {
id
mediaContentType
}
product {
id
media(first: 10) {
edges {
node {
id
mediaContentType
}
}
}
}
mediaUserErrors {
field
message
code
}
}
}
"""
variables = {
"productId": product_id,
"media": [
{
"mediaContentType": "IMAGE",
"originalSource": media_url
}
]
}
response = requests.post(
graphql_endpoint,
json={"query": mutation, "variables": variables},
headers={"X-Shopify-Access-Token": access_token},
)
return response.json()

[Hinton]

Hi - Please tell me more about what you believe a solution may be. I do
agree that the media is not yet fully associated with the product.

[Liam]

Hi Hinton - glad you figured it out and posted your solution.

If the image is displaying on the product page, it should be associated with the product. Why are you thinking the image is not yet fully associated with the product?