Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Linking images to variants using API

Linking images to variants using API

urifromhh
Visitor
1 0 0

I'm trying to create products and link specific images to specific variants. Basically something like this scenario:

Imagine I am selling a T-Shirt in three colors: blue, red, and white.

I have 2 images in each T-Shirt colors: blue-image-1, blue-image-2, red-image-1, red-image-2, white-image-1, white-image-2.

 

Am I programmatically able to link these images to the specific variations such that:

- the blue variant only has blue images

- the red variant only has red images

- the white variant only has white images

 

If so, am I also able to add an image that all 3 images share (maybe like an infographic or something)

 

This documentation suggests this might be possible: https://shopify.dev/docs/api/storefront/2023-01/connections/ImageConnection#connection-imageconnecti...

 

If this is possible, please mention which API section to look into.

Reply 1 (1)

EcomGraduates
Shopify Partner
781 68 112

hello there  

 

you can programmatically link specific images to specific variants in Shopify. You can use the Shopify Admin API or the Shopify Storefront API to accomplish this.

Using the Shopify Admin API, you can create a product with multiple variants, and then associate each variant with its respective images using the image_id property of the variant object. You can retrieve the image_id of an image using the Image API.

Here's an example of how to create a product with three variants (blue, red, and white), and link each variant to its respective images:

 

{
  "product": {
    "title": "T-Shirt",
    "variants": [
      {
        "title": "Blue",
        "price": "20.00",
        "sku": "TS-BLU",
        "image_id": 123456789
      },
      {
        "title": "Red",
        "price": "20.00",
        "sku": "TS-RED",
        "image_id": 987654321
      },
      {
        "title": "White",
        "price": "20.00",
        "sku": "TS-WHT",
        "image_id": 456789123
      }
    ]
  }
}

 

Using the Shopify Storefront API, you can retrieve a product's variants and associated images using the productByHandle query, and then display the appropriate images based on the variant selected by the customer.

Here's an example of how to retrieve a product's variants and associated images using the Shopify Storefront API:

 

query {
  productByHandle(handle: "t-shirt") {
    title
    variants(first: 3) {
      edges {
        node {
          title
          image {
            originalSrc
          }
        }
      }
    }
  }
}

 


 If this fixed your issue, likes and accepting as a solution are highly appreciated
|  Build an online presence with our custom-built Shopify Theme: EcomifyTheme
|  Check out our reviews: Trustpilot Reviews
|  We are Shopify Partners: EcomGraduates Shopify Partner