Custom Product builder -> Cannot find variant with Ajax

Technical Q&A

Topic summary

Issue: Adding multiple items to a Shopify cart via AJAX returns 404 “Cart Error: Cannot find variant.” The builder assembles a necklace variant plus multiple “charm” items and posts them to /cart/add.js as an items array.

Implementation details: The necklace variant ID is read from a dropdown (data-id) and added to form.items. The selected charms are collected from elements with .charm-item.cloned and their data-id values are pushed as item IDs. Console logs show IDs being gathered and sent.

Observed payload: The first ID (e.g., 45484000182550) appears to be a variant ID, while the charm IDs (e.g., 8768164200726, 8483792650518, 8523530764566) are likely product IDs. Shopify’s cart/add.js requires variant IDs for each item, not product IDs, which aligns with the “Cannot find variant” error. Code snippets are central to understanding the issue.

Status: No resolution posted. Another participant asked if it was resolved, indicating the thread is open.

Unanswered key points: How to retrieve and pass the correct variant IDs for each charm (e.g., first available variant) instead of product IDs.

Summarized with AI on December 23. AI used: gpt-5.
1

I’m designing a custom product builder and am having trouble adding the items to the cart.

The code looks for a “Clicked” Item’s product.id and then pushes it to my payload/form object. When I run a console.log I see all of the ids, but the fetch doesn’t recognize them so I get the error:

{status: 404, message: "Cart Error", description: "Cannot find variant"}
description: "Cannot find variant"
message: "Cart Error"
status: 404

Here is the add-to-cart function

document.getElementById('add-to-cart-button').addEventListener('click', async function(event) {
    event.preventDefault();
    console.log("Add-to-cart button clicked.");
       
    let form = {
        items: []
    };

    let selectedOption = necklaceVariantDropdown.options[necklaceVariantDropdown.selectedIndex];
    let selectedNecklaceVariantId = parseInt(selectedOption.getAttribute('data-id'), 10);
  if (!selectedNecklaceVariantId) {
        console.warn("No necklace variant selected.");
        return;
    }

    form.items.push({
        id: selectedNecklaceVariantId,
        quantity: 1
    });

    console.log("Necklace variant added to cart items:", selectedNecklaceVariantId);

    let selectedCharms = necklacePreview.querySelectorAll('.charm-item.cloned');
    console.log(`Found ${selectedCharms.length} selected charms.`);

    //Add each selected charm to the cart items array
    selectedCharms.forEach(charm => {
    let charmId = parseInt(charm.getAttribute('data-id'), 10);
      if (!charmId) {
            console.warn("Charm with no data-id found:", charm);
            return;
        }
        form.items.push({
            id: charmId,
            quantity: 1
        });

        console.log(`Charm with ID ${charmId} added to cart items.`);
    });

    if (form.items.length === 0) {
        console.warn("No items to add to the cart.");
        return;
    }

    console.log("All cart items ready to be added:", form.items); 

    // Sending all items together
    await fetch(window.Shopify.routes.root + 'cart/add.js', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(form)
    })
    .then(response => {
      if (!response.ok) {
        throw new Error(`Server responded with status: ${response.statusText}`);
    }
    return response.json();
    })
    .catch((error) => {
        console.error('Error:', error);
    });
});

Here is my console:

Necklace variant added to cart items: 45484000182550
scripts.js?567:100 Found 3 selected charms.
scripts.js?567:114 Charm with ID 8768164200726 added to cart items.
scripts.js?567:114 Charm with ID 8483792650518 added to cart items.
scripts.js?567:114 Charm with ID 8523530764566 added to cart items.
scripts.js?567:122 All cart items ready to be added: (4) [{…}, {…}, {…}, {…}]

Here is the request payload

[
    {
        "id": 45484000182550,
        "quantity": 1
    },
    {
        "id": 8768164200726,
        "quantity": 1
    },
    {
        "id": 8483792650518,
        "quantity": 1
    },
    {
        "id": 8523530764566,
        "quantity": 1
    }
]

Thanks, I would appreciate any suggestions.

2

Were you able to resolve this issue? We’re facing the same