Headless Shopify handling Products with Variants over 100

Technical Q&A
1

I’m currently developing a headless Hydrogen Shopify site. I have one product that has 4 variant types

  • Length
  • Color
  • Option 1
  • Option 2

Because of this, the product exceeds the variant limitation. I see Shopify theme apps like Infinite Option app, that basically ‘assembles’ a line item and doesn’t use the variants (I could be wrong on this).

So my strategy was to use Length, Option 1, and Option 2 variants in the Shopify admin. But color, will be handled in the code. Color doesn’t affect price or our SKU.

I’m trying to find the best approach for this via Hydrogen. Is there a smart way of managing this via the AddToCartButton component? Could this be handled via a different route?

Eventually, I will be adding a ‘product builder’ component that will need to send values to build that line item and variant selector.

Thanks

2

I think you can implement the Combined Listing just like this website: https://www.honeylove.com/en-ca/products/just-like-leather-legging
The idea is that instead of switching variants (for example: Color), you will switch the product instead.
https://www.linkedin.com/feed/update/urn:li:activity:7181303457117581312/

3

This is a very interesting solution. I can see something like this working with a few of our products, but there are others without color that the variant could would be super high. Is there a way to ‘inject’ a line item? I’m assuming via draft order could be a method. How do you think the Infinite Option app handles their variants and inserts them in the cart?

4

@rattlesnakeMT The Infinite Options app is basically add properties to the cart items which you can do it from Hydrogen storefront with Storefront API by adding attributes to the line items: https://shopify.dev/docs/api/storefront/2024-01/input-objects/AttributeInput

5

Is this the only way to manipulate the line items? Can adjust them directly? Only through attributes?

Thanks so much for the help.

6

Hello @rattlesnakeMT , if you’re looking for something similar to Infinite Options, the only way to achieve it is by adding attributes to the line items. Depending on your needs, you can try to implement both Combined Listing and Infinite Options together.