Extra Variant Options on Product Page || Creating Draft Order || Having issue in draft order

[Abdul-Basit]

Hi,
I am sending the extra variant options which have different prices. When the Customer selects any variants then the price adds to the total price. And I am sending the extra variants data through properties to the cart page.

For the items in the cart, whatever price and title we've adjusted using JavaScript, we get that data in the array. When we click on checkout requests sends to my endpoint (external) create the draft order and redirect to the checkout through the draft invoice URL. So far, that's fine.

But if we want to show the product image, we need to send the variant ID. However, if we use the variant ID in the draft order data, we can't set a custom price because it will take the variant's default price.

If we don't send the variant ID and save it as a custom item, the image won't show, and Shopify's analytics won't track the product data (like how many items were sold and which ones). Because it is custom item.

There should be a solution to this.

[PaulNewton]

Hi @Abdul-Basit 👋 A custom item is a custom item is a custom item, a variant line item is a variant line item... no mixing.

afaik there's no direct fix for this

First reach out to shopify-partner support through the partner dashboard and file a feature request, and probably have the merchant do the same to general support.

Also see the partner slack channel for other possible work arounds.

This is why most productOption/productVariant apps generate one off variants specifically for one order.

Regardless of how that may muck up things on the backend it works for the customer experience side of equation.

A possible workaround is using bundles to set the desired image on a custom bundle made just for that order that has the variant as a component.

In those type of workarounds remember to name "bundles" in the context of the customer experience, so it's not a "bundle" it's a "pack" or "personalization info" as the title of the bundle.

For shopify-plus stores see  shopify-functions cart transformation to set an image using the UpdateOperation:

UpdateOperation: Enables overrides of item properties by specifying a new title, price, or image. Th...

---

[Abdul-Basit]

Hi @PaulNewton ,
Thanks for your reply.

Could you explain how to create a bundle in this context? My limitation is that I can't create more than 3 options for a variant on the product listing. However, I need customers to select a 4th and 5th option on the product page, with each option having its own price that should be added to the total price on the product page (I know this can be done with JavaScript).

This updated total price should be sent to the cart (also possible with JavaScript) and reflected correctly at checkout. The main limitation I’m facing is ensuring these options and their prices are accurately shown at checkout as part of the same product.

I'm prepared to build complex logic, but I keep getting stuck due to Shopify's limitations.

How can I handle this, considering these constraints?