Ass color swatches to bundles using Shopifys bundles app

Store Design
, , , ,
1

Hi!

I’ve successfully added color swatches to our products, but would not like to add color swatches to bundled products. We use Shopifys app Bundles and according to Shopify support, color swatches isn’t supported in bundles and that this need to be hard-coded.

We’re using Makers theme and whenever I’ve tried to assign color swatches to the variants using metafields with hex codes, it doesn’t work. I either don’t get the color swatches to show at all, or I get colors to show but it doesn’t match the swatches on product pages and you can’t click on the swatches to choose one either.

Has anyone successfully added color swatches to bundles by code?

2

Hi @NataliF ,

Please send the website link, I will check it for you

3

Hi @NataliF ,

This is Amelia from PageFly - a Landing Page Builder App,

I think that you can try to use the metafield to build your color swatch bubble,
Here are some steps to make this:

Step 1: Define Metafields for Color Swatches

First, ensure that you have defined metafields for your product variants to store the hex codes for the colors.

Step 2: Create a Snippet for Color Swatches1. Create a new snippet:

  • Go to Online Store > Themes.

  • Click on Actions > Edit code.

  • Under the Snippets folder, click Add a new snippet and name it color-swatches.

  1. Add the following code to the color-swatches.liquid snippet:
{% assign colors = product.metafields.custom.colors %}
{% if colors %}
  
    {% for color in colors %}
      

    {% endfor %}
  

{% endif %}

Step 3: Add the Snippet to Your Product Template1. Locate the Product Template:

  • In the Sections folder, find the template file that renders the product page. This might be product-template.liquid or a similar file.

  1. Include the Color Swatches Snippet:

    • Add the following code where you want the color swatches to appear:
{% include 'color-swatches' %}

Step 4: Style the Color Swatches

Add some CSS to style the color swatches. You can add this to your theme’s CSS file:

.color-swatches {
  display: flex;
  gap: 10px;
}

.color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
}

I hope that my solution works for you.

Best regards,

Amelia | PageFly

4

Hi!

This is one of the products I can’t get color swatches for because it’s a bundled product: https://alliescosmetics.com/sv/products/creme-foundation-yadi-fuckracism-palette

Thanks!

5

Thanks! But this unfortunately didn’t make the product show color swatches. :confused:

6

Hi @NataliF ,

I checked and the bundle product does not support a value swatch. So if you want, you need to create Metafield for it and change the code so it can receive bundle products.

Can I send you a collaborator invite? it will help me create Metafield and change code for you

7

Hi @NataliF ,
You need to add the metafield color to your product

8

Sure, that would be great!

9

Hi @NataliF ,

Please send me the collaborator code in private message, I will check it soon

1 Like
10

Hello @NataliF ,

This is Cherry here from Simple Bundles. :blush:

I assume your product combinations will lead to more than 100 variants, correct? If yes, your bundle will most likely, your bundle requirement will fall into our Infinite Options bundle type. There’s a way to create color selection swatches, that align with what you’re looking for. This help document might provide further guidance. https://help.simplebundles.io/article/293-how-to-make-infinite-options-with-swatches-and-feature-selection-per-color-selection

Hope this helps you! :folded_hands: If you have any questions, we’re so happy to guide you through. Please feel free to reach out to our support team (hello@simplebundles.io). See you there!