RFC: How do you use color swatches on product bundles?

[SimJoSt]

Short description of issue

Native color swatches don’t work for native product bundles

Reproduction steps

Context

Shopify’s native solution for colour swatches using category metaobjects (https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields) works great for normal products.

Unfortunately, that is not the case on product bundles, that use Shopify’s native bundle system:

About product bundles

Actual reproduction steps

1. Create product(s) that have a variant option of colour and use the Shopify colour swatch system with category metaobjects: https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields

2. Create a product bundle that includes that product(s) with one of the Shopify apps that use the native bundle features, like:

Shopify Bundles - Offer fixed bundles and multipacks to drive more sales |...

3. Check out the product page / template and try to get colour swatches working

Additional info

A customer just ran into this issue and I have been trying to solve this for them in different ways. In the process, I got curious how others are solving and working around this limitation.

In this forum I only found the following related thread, that is using custom swatch logic because of bundles: Product limit is 50 on custom swatch filter
And this one in the merchant forum:

Ass color swatches to bundles using Shopifys bundles app

Of course, it would be great if Shopify would just support it natively in bundles as well, but I wanted to get the input from the community.

Have you run into this?
Is this a problem for you, or is this just not a concern?
Are you using virtual bundles and custom UI from bundles apps instead?
Did you find a solution to the issue? What is it?

With the Maestrooo theme that this client is using, I found 2 different solutions that require minimal changes to the theme, but first wanted to check how you guys are dealing with it before sharing them.

What type of topic is this

Troubleshooting
Feature request
General discussion

[Alan_G]

Hey @SimJoSt, thanks for sharing this, you’re right that color swatches aren’t supported on bundle parent products yet, but I’m happy to log a feature request on your behalf for sure.

Would you be open to sharing your use case for this, just out of curiosity? For example, do you need one “primary” swatch for the bundle hero, or per-component swatches so shoppers can configure each item’s color? Are you looking for bundles to appear under color filters on collection pages, and for images to auto-swap when a swatch changes?

If you have examples (outfit builders, skincare sets with shade choices, multi-pack color mixing, etc. ) that would be super helpful, so I can advocate better on my end here for the feature. Hope to hear from you soon!

[Alan_G]

Hey @SimJoSt - wanted to follow up here to see if the above helped/if I can still set up that feature request for you, let me know!

[SimJoSt]

In this specific case, 3 products are combined into a bundle.
Two of them have a colour variant option, the last one has different models up for selection. So it’s more of a per-component colour swatch that is needed here.

For now, we only focused on the PDP experience and didn’t think about filters on the PLP yet.
But yes, the images should auto-switch based on variant option selection.

The product itself is not yet online, so I cannot share a link yet. If that changes, I will try.

[Alan_G]

Thanks for the details @SimJoSt that’s helpful info. I’ve logged a feature request for you on this. If you’re able to share a link or screenshots when the product goes live, that would help us validate UX edge cases, and if you’d like, feel free to share the two minimal-change Maestrooo approaches you’ve found here (it might help other folks, especially if people are finding this thread later).

I’ll wait a little bit before I close out this thread just in case you’d like to reach back out. Hope this helps!

[SimJoSt]

Alright, thank you.
Especially now, that the variant limit was increased to 2048 bundles become more powerful: Variant limit increase to 2048 is here 🎉

Variant limit increase to 2048 is here

In September, Shopify sent an email announcing the planned rollout of the increase to the variant limit to 2048 for “Early October”. Since it was pushed multiple times, my hopes were not very high for it to actually release this time around (Questions about 2,000 Variants + Store Resource Limits - maxProductVariants still limited to 100?). Checking in with other Partners, it appears, the rollout has started or maybe even already completed! The stores of clients I checked have access to it now …

Even more so regarding colour variant options.
Now you can combine 3 products with 12 colour way each in a bundle!

I will check my code and share the approach I took.

[Alan_G]

No worries, thanks for following up here @SimJoSt . If your minimal-change on the Maestrooo theme approach isn’t working on the PDP, just let me know and I can take a closer look with you again to see if we have any other workarounds.

[SimJoSt]

The way we did it is to extend the native color swatch code.

The original approach queried the Shopify-native color pattern metaobject entries for swatches by their unique handle.
First, we handleize the label of the option and get the metaobjects image and color:

assign handleize_label = label | handleize

assign metaobject_image = metaobjects['shopify--color-pattern'][handleize_label].image
assign metaobject_color = metaobjects['shopify--color-pattern'][handleize_label].color

The case statement, figuring out how to display the options, checks if an image or color exists in the metaobject and displays them, the same way the image or swatch value for an option_value is displayed

elsif metaobject_image
  assign swatch_image = metaobject_image | image_url: width: 72
  assign swatch_style = '--swatch-background: url(' | append: swatch_image | append: ')'
elsif metaobject_color
  assign swatch_style = '--swatch-background: linear-gradient(to right, ' | append: metaobject_color | append: ', ' | append: metaobject_color | append: ')'

Unfortunately, if there were a lot of unique colors or a lot of other lookups with unique handles (also for metafields) in the same template, it would break after the 20th lookup: Exceeded maximum number of unique handles for metaobject handle

To remedy this, I had to switch to looping through all metaobject entries instead, as this limit is higher at 50.
Using the paginate tag, it is possible to increase the limit much higher.

It would be great, if bundle options would just provide their swatch color or image directly.

[Alan_G]

Hey @SimJoSt thanks so much for sharing your workaround here, this is really helpful for anyone else hitting this same issue. Yeah, the approach of querying shopify--color-pattern metaobjects by handleized label is a solid pattern. I’ve added these details to the existing feature request on our end. Thanks again for taking the time to share this.

[Gideon]

This would be very easy, requiring no custom code, if custom swatch options were correctly mapped with the `swatch` object.

Lets say I make a “Material” category metafields for my shoe products, and create shopify--color-pattern swatches for “Suede” and “Leather”. Everything maps correctly in the product admin and looks perfect:

It seems like this would be the “correct” way to make custom swatch options. Unfortunately, the “Material” option will not have a swatch object attached to it:

My best option is to do a manual lookup on metafields.shopify['color-pattern'].values['suede'] – which has two problems:

1. I need to do a string match against the option_group name, “Material”, in order to trigger this manual lookup workflow. That means I need settings and translations for every possible option_group.name containing swatches.
2. I am limited to 20 colors per product, because global metaobject lookups are slow and appropriately paginated.

I have been getting support tickets about this for a while and I can’t tell if I should apply the manual lookup hack-fix or wait for the proper solution.

Intuitively, I expect an option that shows as a swatch in the Shopify admin to have the swatch object attached in Liquid. The bug affects every theme, including Horizon.

Here’s the main bug-report thread for the issue:

Variants created by metaobject entries that aren't default Shopify metaobjects always have an empty swatch object

Short description of issue Variants created by metaobject entries that aren’t default Shopify metaobjects always have an empty swatch object Reproduction steps Create a product Create a metaobject (stitching in this example) > populate two entries. Each metaobject entry has a ‘Name’, ‘Image’ and ‘Color Picker’ field. Create the respective product metafield and connect to the new meaobject type. Create a variant option in the product based on the new metaobject Also connect Shopify’s default ‘C…