Product variations combination

Retired Boards Appdev Graphql Basics And Troubleshooting

Topic summary

A user imported a product via API with specific variant combinations (e.g., red in sizes 10 and 20 only, blue in sizes 20 and 30 only). While the Shopify backend correctly shows only the intended variant combinations, the frontend incorrectly displays all colors as available for all sizes.

Technical Details:

  • The JSON structure includes all possible option values (sizes and colors) in the options array
  • Only valid combinations are defined in the variants array
  • Backend displays correctly, but frontend shows invalid combinations

Resolution:

  • A helper confirmed the product is functioning correctly: invalid combinations show “Unavailable” and cannot be added to cart
  • This is expected Shopify behavior—the platform displays all option combinations but disables invalid ones

Follow-up Question:

  • User asked if it’s possible to hide unavailable colors after selecting a size (rather than just disabling them)
  • This would require theme customization; a community resource link was shared for implementing such functionality
Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hello my friends

have a question on the subject of product variations via API.

I have imported a product via API that looks like this as an example:

Product:
Variation 1: color red, size 10, 20 (without 30)
Variation 2: color blue, size 20, 30 (without 10)
..

Unfortunately, it shows me every color for every size in the frontend.
In Shpopify backend, however, only the product variations that are required are entered!

here is the json that I recorded:
For options (size, color) I entered all possible values of the product and for variations the possible combinations.

Do I have to change anything with the Json or does Shopify have a problem here?

{
“product”: {
“published_at”: null,
“published_scope”: “web”,
“template_suffix”: “product”,
“title”: “Airport SO”,
“vendor”: “FALKE”,
“product_type”: “Socken Herren”,
“options”: [
{
“name”: “Size”,
“values”: [
“39-40”,
“45-46”,
“41-42”,
“43-44”
]
},
{
“name”: “Color”,
“values”: [
8140,
6933,
7991,
8596,
3080,
6370,
8120,
8973,
3920,
5930,
4660,
3000,
8095,
8233,
8821,
8207,
3070,
6326,
5410,
8727,
7647,
8042,
1853
]
}
],
“variants”: [
{
“option1”: “39-40”,
“option2”: 8140,
“price”: “15.00”,
“sku”: “5210442”,
“inventory_quantity”: “1”,
“fulfillment_service”: “manual”,
“inventory_management”: “shopify”
},
{
“option1”: “39-40”,
“option2”: 6933,
“price”: “15.00”,
“sku”: “5139446”,
“inventory_quantity”: “1”,
“fulfillment_service”: “manual”,
“inventory_management”: “shopify”
},
{
“option1”: “39-40”,
“option2”: 7991,
“price”: “15.00”,
“sku”: “5026203”,
“inventory_quantity”: “1”,
“fulfillment_service”: “manual”,
“inventory_management”: “shopify”
},
{
“option1”: “39-40”,
“option2”: 8596,
“price”: “15.00”,
“sku”: “5026326”,
“inventory_quantity”: “3”,
“fulfillment_service”: “manual”,
“inventory_management”: “shopify”
},
{
“option1”: “39-40”,
“option2”: 3080,
“price”: “15.00”,
“sku”: “3184165”,
“inventory_quantity”: “3”,
“fulfillment_service”: “manual”,
“inventory_management”: “shopify”
},
{
“option1”: “39-40”,
“option2”: 6370,
“price”: “15.00”,
“sku”: “3185360”,
“inventory_quantity”: “1”,
“fulfillment_service”: “manual”,
“inventory_management”: “shopify”
},
{
“option1”: “39-40”,
“option2”: 8120,
“price”: “15.00”,
“sku”: “3186152”,
“inventory_quantity”: “2”,
“fulfillment_service”: “manual”,
“inventory_management”: “shopify”
},
{
“option1”: “45-46”,
“option2”: 8973,
“price”: “15.00”,
“sku”: “6218522”,
“inventory_quantity”: “2”,
“fulfillment_service”: “manual”,
“inventory_management”: “shopify”
},
{
“option1”: “45-46”,
“option2”: 3920,
“price”: “15.00”,
“sku”: “5025725”,
“inventory_quantity”: “1”,
“fulfillment_service”: “manual”,
“inventory_management”: “shopify”
},
{
“option1”: “45-46”,
“option2”: 7991,
“price”: “15.00”,
“sku”: “5026234”,
“inventory_quantity”: “1”,
“fulfillment_service”: “manual”,
“inventory_management”: “shopify”
},
{
“option1”: “45-46”,
“option2”: 5930,
“price”: “15.00”,
“sku”: “4491200”,
“inventory_quantity”: “1”,
“fulfillment_service”: “manual”,
“inventory_management”: “shopify”
},
{
“option1”: “45-46”,
“option2”: 4660,
“price”: “15.00”,
“sku”: “3184622”,
“inventory_quantity”: “1”,
“fulfillment_service”: “manual”,
“inventory_management”: “shopify”
},
{
“option1”: “45-46”,
“option2”: 3000,
"pric

2

Hey @Max3452342

Can you link me the product on your storefront?

3

tsx for you help,

here the product Link: https://axk4w31rjlkwuoj2-25503203418.shopifypreview.com/products_preview?preview_key=9f3e58e5afb25e2236bb64d6dd3e707f

On this product it is wrongly possible to select all possible variations (Size to Color).

Here a image from Backend with all possible variation with size 39-40. In Frontend it is possible to choose other colors.

Max3452342_0-1600759655399.png
Max3452342_0-1600759655399.png459Ă—493 18.8 KB

4

New Produkt Link (now public) : https://corseterie-test.myshopify.com/products/airport-so

5

Hey @Max3452342

I just took a look at the product example you posted, and if I select a combination on the storefront that isn’t valid, the button turns to “Unavailable” and won’t let me add it to cart. As far as I can tell everything is working on the backend, and any further customization is related to theme design.

6

Thank you very much for the answer, a short question:
Is it possible to not display the unavailable colors in the example after selecting a size?

7

Hey @Max3452342

I believe it’s possible and we include some more information on that here.

1 Like
8

Thanks For sharing that link it was helpfull.