Handling 4 Variant Options + SKU for Fulfillment When Using a 3rd-Party Add-to-Cart App

Ask & Offer
1

Hello everyone :waving_hand:

I’m working on a Shopify store that sells T-shirts, and I’m facing a limitation with Shopify’s 3 variant option limit.

Current Setup

The product needs 4 options:

  1. Size

  2. Color

  3. Material

  4. Logo option (Yes / No)

Since Shopify only allows 3 variant options, I configured:

  • 3 options as native Shopify variants

  • The 4th option as a line item property (inline property)

Problem

The fulfillment team processes 300+ orders per day and they export orders from Shopify.

The issue is:

  • Line item properties are not included in the standard Shopify order export

  • Because of this, the Logo option is missing from their workflow

They asked if the SKU could include all variant information, including the 4th option.

Attempted Solution

To solve this, I tried the following:

  1. Duplicated the product

    • Product A → Logo option True

    • Product B → Logo option False

  2. Created a custom form.js script to:

    • Detect the Logo option selection

    • Automatically submit the correct product variant to the cart

New Issue

The store uses a third-party app for the Add-to-Cart functionality, and it overrides Shopify’s native product form.

Because of this:

  • My custom form.js does not run

  • The product switching logic doesn’t work

Question

What would be the best way to handle a 4th product option while ensuring the fulfillment team can see the information in the order export?

Possible goals:

  • Include the 4th option in SKU

  • Ensure the data appears in Shopify order exports

  • Work even when a third-party add-to-cart app is used

Has anyone handled a similar situation or found a reliable workaround?

Thanks in advance :folded_hands:

2

This is something new that I learned today. I have been working with line item properties for a while and did not know about this.

I know the line item properties do come up on order information as extra info but didn’t know they didn’t get exported.

Thanks

3

The easiest way would be to combine 2 options, like “Color” and “Logo” so that you have “Red with Logo” and “Red no Logo”, etc…

No the ideal, but would not require many efforts.
Would duplicate the number of variants, but hey, this is no longer limited to 100.

1 Like
4

Thank you @tim_1
That really helped me
I am not sure why I didn’t think about that
Thanks again

1 Like
5

@tim_1 's got the simplest approach, and it has another upside of being able to work multichannel

More complicated it to just go all the way and EVERY product is just it’s combination of options.
aka psuedo-combined listings, sibling products, flat products, product families, etc.
And do stuff like retitle them e.g. /products/logoless-red or logofree etc
And either present them in a collection as one product, or a placholder/“parent” product that stitches them all together.
Then optionally on the backend sync inventory to a main product.

You should only need to get the forms ID and use that ID as the value of an attribute form on the input:
<input form="prodcut-form-124356yasd" ....>
And update that before the form submits.

If it doesn’t work then the app is garbage because it’s probably going either through the hierarchy, or some virtual dom/state nonsense that stores only specific values and doesn’t respect reality.

So that problem turns into the advanced workaround of updating product in the cart itself; which can mean disabling instant buy-buttons so there is always a cart step.

If you need any of that built, or to automate the product option combining reach out to me or the other devs for services.